javascript基礎-js對象

 

1、js對象的建立

 

1.普通最簡單的方式

var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = 35; teacher.job = "教師"; teacher.say = function( ) {     return this.name + this.age + this.job;        //this表明的是teacher下的做用域
}; console.log(teacher.say( ));

 

2.對象初始化（單體方式）-json格式，不適合多個對象

var json = {name:"張三", age:15, sex:1, show:function( ){alert(this.name+this.age+this.sex)},}; var person = {     name : "張三",     age : 25,     say : function ( ) {         return "我是張三";        },     action : function( ) {         return "正在學習關於js高級應用...";        }, }; console.log(person.name +" "+ person.age); console.log(person.say() +" "+ person.action());

 

3.構造函數建立

function Student(_name, _age) {     this.name = _name;     this.age = _age;     this.say = function( ) {         return "我是"+this.name+"，我今年"+this.age+"歲了。";        }        this.action = function( ) {         return "正在動手操做js高級應用...";        } } var student = new Student("李四", 22); console.log(student.say( )+" "+student.action( ));

 

4.工廠模式

function createObject(_name, _age){     var obj = new Object();    //私有對象obj，所以是沒法通new方法
    obj.name = _name;     obj.age = _age;     obj.run = function( ) {         return this.name + this.age;     };     return obj;        //返回對象的引用（返回的類型爲Object類型） 
} var obj1 = createObject("tom", 25); var obj2 = createObject("jack", 30); console.log(obj1.run()); console.log(obj2.run());

 

 

 

2、js對象的方法

 

 對象的方法也能夠劃分爲 私有方法、對象方法、類方法

function Person( ) {     //對象方法
    this.getUsername = function( ) {         return "admin";     }     //私有方法
    var getPassword = function( ) {         return "123456";     }     //調用私有方法
    console.log("密碼："+getPassword( ));     //對象方法
    Person.prototype.getAge = function( ) {         return 25;     } } //對象方法
Person.prototype.getName = function( ) {      return "admin" ; } Person.prototype = {      start : function( ) {           return "start";      },      end : function( ) {           return "end";      } } //類方法
Person.getCountry = function( ) {     return "China"; } var p = new Person( ); console.log("用戶名："+p.getUsername( )); console.log("年齡："+p.getAge( )); console.log(Person.getCountry( ));

 

 

 

兩種寫法的對比

 方式一：

function Student() {     this.name = "cxb";     this.talk = function() {         return "我叫" + this.name;     } } var stu1 = new Student(); var stu2 = new Student();

 

 方式二：

function Student() {     this.name = "cxb"; } Student.prototype.talk = function() {     return "我叫" + this.name; } var stu1 = new Student(); var stu2 = new Student();

 方式一與方式二產生的結構幾乎是同樣的，而本質區別就是：方式二new產生的二個實例對象共享了原型的talk方法，這樣的好處節省了內存空間，方式一則是要爲每個實例複製talk方法，每一個方法屬性都佔用必定的內存的空間，因此若是把全部屬性方法都聲明在構造函數中，就會無形的增大不少開銷，這些實例化的對象的屬性如出一轍，都是對this的引用來處理。除此以外方式一的全部方法都是拷貝到當前實例對象上。方式二則是要經過scope鏈接到原型鏈上查找，這樣就無形之中要多一層做用域鏈的查找了。

 

注：prototype方式的位置不能隨意互換

function Person() { } // 位置一
Person.prototype = { walk : function() { console.log("walk") }, run : function() { console.log("run") } } // 位置二
Person.prototype.talk = function() { console.log("talk") } var p = new Person(); p.talk() console.log(Person.prototype) 

 

若是位置一和位置二調換，p.talk()異常  Uncaught TypeError: p.talk is not a function

console.log(Person.prototype)  打印信息以下：

 

若是位置一和位置二調換，會少一個原型鏈方法

 

 

 

3、js對象的屬性

 

js對象的屬性也能夠劃分爲：對象屬性、私有屬性、類屬性

function User( ) {     this.username = "admin";     //對象屬性
    var password = "123456";    //私有屬性
    this.getPassword = function(){         return password;    //獲取私有屬性的方法
    }     User.prototype.age = 25;    //對象屬性
} User.country = "China";        //類屬性
var user = new User( ); console.log("用戶名："+user.username); console.log("密碼："+user.getPassword( )); console.log("年齡："+user.age); console.log("國籍："+User.country); //length屬性
function box(name, age){     return name+age; } console.log(box.length);        //返回box中的參數個數
console.log(User.length);

 

 

 

 

 

4、js對象的引用

 

對象的引用其實就是將一個對象賦值給另外一個對象的過程

var a = 123; var b = a; a = "張三"; console.log("a的值："+ a);    //將打印張三
console.log("b的值："+ b);    //將打印123

var x = 240; var y = x; x = 320; console.log("x="+ x); console.log("y="+ y); var array1 = [1,2,3]; var array2 = array1; array2.push(4);        //array1.push(5);結果同樣
console.log("array1:"+ array1); console.log("array2:"+ array2); var arr1 = [1,2,3]; var arr2 = []; arr2 = arr1; arr2.push(4); console.log(arr1);    //顯示1,2,3,4
console.log(arr2);    //顯示1,2,3,4

 

 

 

 

5、命名空間

使用命名空間能夠解決同名函數衝突問題及防止變量的污染，命名空間採用JSON方式

var com = { }; com.bj = { }; com.sh = { }; com.hz = { }; com.bj.get = function( ) {     console.log("北京"); } com.sh.get = function( ) {     console.log("上海"); } com.hz.get = function( ) {     console.log("杭州"); } com.bj.get( ); com.sh.get( ); com.hz.get( );

 

 

 

6、this關鍵字

 

1.普通最簡單的方式 

//當全局做用域調用函數時，this對象引用的就是window //this指代的是當前的方法屬於誰 或 當前發生事件的對象 //window是一個對象，並且是js中最大的對象，是最外圍的對象
console.log(window);                   //輸出：[object Window]
console.log(typeof window);        //輸出object object類型
console.log(this);                          //輸出：[object Window] this目前表示的是window，由於是在window範圍下
console.log(typeof this);              //輸出object object類型 //上面的this就是window

var color = "紅色的";                 //這裏的color是全局變量，而這個變量又是window的屬性
console.log(window.color);        //輸出：紅色的
console.log(this.color);              //輸出：紅色的
 window.color = "紅色的";            //至關於    var color="紅色的";
console.log(this.color); var box = {     color:"藍色的",                           //這裏的color是box下的屬性
    showColor : function( ) {         alert("box："+this.color);        //這裏的this.color，表明的是box下的color
    }    }

 

 

//例：全局的方法屬於window對象下的
function show(){     alert("show()："+this.color );        //這裏的this.color，其實仍是在window下,這裏執行的是動態的，第一次在window下，第二次在box2下
} //其實上一種寫法等同於：window.show=function(){...}  即這裏的 show()方法屬於window對象的
alert(" "+this.color); box.showColor( ); show( ); // var box2 = {     color:"黃色的",    } box2.showColor = show;    //這段代碼至關於以下：
box2.showColor( ); /* var box2 = {     color:"黃色的",     showColor:function( ) {         alert("box："+this.color);     }        } */

//例：
var array = [1, 2, 3, 4]; array.a = 20; array.getA = function( ) {     console.log(this.a);    //這裏的this表明array對象
} var oDiv = document.getElementById("box"); oDiv.onclick = function( ) {     console.log(this);        //這裏的this表明oDiv對象   
}

 

 

 

7、內置對象

 

1.URI編碼方法 功能：字符串解析。功能很是強大，但也很是危險。

var name = "//Lee李"; var a = encodeURI(name); var b = encodeURIComponent(name); console.log(name); console.log(a);            //只對中文進行編碼
console.log(b);           //對全部進行編碼（中文及特殊字符） //解碼
console.log(decodeURI(a)); console.log(decodeURIComponent(b));

 

2.eval方法

eval("var num = 100"); console.log(num); //字符串"var num = 100",其實就是一段javascript代碼，eval會把這個字符串解析成javascript
eval("console.log(250)"); console.log(eval("console.log(250)"));     //打印出250及undefined（先執行裏面的打印）
 eval("function show( ){return 666;}"); console.log(show( ));

 

3.global 

//alert(Global);
var box = "Lee"; console.log(window.box);
console.log(Object); //返回一個構造函數

 

• Global對象沒法直接訪問
• Global對象內置屬性和方法
• Global對象的屬性：undefined、NaN、Object、Array、Function等。