js 對象的創建方式和對象的區別
js一個有三種方法創建對象,這裏做一個總結.
1.對象直接量
所謂對象直接量,可以看做是一副映射表,這個方法也是最直接的一個方法,個人比較建議,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//創建簡單對象
var obj1 = {}; //空對象
var obj2 = {
name: "ys" ,
age: 12
};
//創建復雜對象
var obj3 = {
name: "ys" ,
age: 12,
like: {
drink: "water" ,
eat: "food"
}
};
console.log( typeof obj1); //object
console.log( typeof obj2); //object
console.log( typeof obj3); //object
|
有的人可能會發現,這裏的鍵值名怎麽沒有引號”“,好細心,其實這個引號(單引雙引號,js一樣)加不加都行,但是個人建議加上,為什麽能,因為加上之後,鍵值名可以很隨意….當然如果你不亂定義名字的話,第一個比較好,因人而異,
?1 2 3 4 5 6 7 8 9 10 |
var obj4 = {
"my name" : "ys" , //鍵值名中間有空格
"my-age" : 12, //鍵值名中間有連字符
"while" : 111 //鍵值名是關鍵字
}
console.log(obj4[ ‘my name‘ ]); //ys
console.log(obj4[ ‘my-age‘ ]); //12
console.log(obj4. while ); //111
console.log( typeof obj3); //object
|
通過上面的例子,大家可以看出”.”和”[]”訪問屬性的區別了吧
對象直接量創建的對象,鍵值對的值支持表達式,如下
?1 2 3 4 5 6 7 8 9 10 |
var obj3 = {
name: "ys" ,
age: obj2.age, //引用obj2.age
like: {
drink: "water" ,
eat: "food"
}
};
console.log(obj3.age); //100
|
2.new創建對象
1).系統內置對象
?1 2 3 4 5 6 7 8 9 |
var obj1 = new Object();
var obj2 = new Array();
var obj3 = new Date();
var obj4 = new RegExp( "ys" );
console.log( typeof obj1); //object
console.log( typeof obj2); //object
console.log( typeof obj3); //object
console.log( typeof obj4); //object
|
2).自定義對象
?1 2 3 4 5 6 7 8 9 10 11 |
function Person(name, age){
this .name = name;
this .age = age;
}
var obj1 = new Person( "ys" , 12);
console.log(Object.prototype.toString.call(obj1)); //object
console.log(Person instanceof Object); //true
console.log( typeof obj1); //object
console.log(obj1.age); //12
|
3.Object.create()創建
該方法有兩個參數,我就只解釋下第一參數,第二個參數不常用(對對象的屬性進行進一步描述)
第一個參數:傳入要繼承的原型(prototype)對象
怎樣理解這句話呢?
1 2 3 4 5 6 |
var obj1 = Object.create({
name: "ys" ,
age: 12
});
console.log(obj1); //{}
console.log(obj1.age); //12
|
obj1為{},為什麽可以訪問到屬性值呢?我們理解下第一個參數的意義“傳入要繼承的原型對象”
console.log(obj1.__proto__); //Object {name: "ys", age: 12}
對象本身為空,但是原型鏈上數據不為空,存在obj1.age,所以可以訪問到。
1).當第一個參數為null時
?1 2 |
var obj2 = Object.create( null ); //不繼承對象應有的屬性和方法
console.log(obj2 + "abc" ); //報錯 ,失去 + 功能
|
為什麽會報錯呢?正常參數下生成的圖如下:
通過圖可以看出,要繼承的原型對象(即參數)又繼承了Object的原型對象,關鍵原因來了,Object的原型對象包含了一些js對象的基本方法(indexOf(),toString(),‘+‘功能……)而這個時候,如果參數為null,那麽這條繼承鏈就斷了。
這個時候大家應該理解了一句話了吧,JavaScript中所有的對象都繼承自Object,以為Object處於繼承鏈的最頂端。
2).創建空對象
?1 2 3 |
var obj3 = Object.create(Object.prototype);
console.log(obj3); //{},(空對象,與前兩個方法 {},new Object 相同)
console.log(obj3.__proto__); //如下圖 ,只包含了基本對象的方法
|
代碼的圖:
這樣創建的對象,只包含了對象的基本方法。
3).最後大家看下面的代碼,希望能更深刻的理解Object.create()方法,大家可以參考這篇文章:《一種新的javascript對象創建方式Object.create()》
?1 2 3 4 5 6 7 8 9 |
var obj1 = {
name: "ys" ,
age: 12
};
obj1.prototype = {
sayName: function (){
return console.log( this .name);
}
};
|
1 2 3 4 5 6 |
/*①對象參數,只繼承對象*/
var obj2 = Object.create(obj1);
console.log(obj2); //{}
console.log(obj2.name); //ys
/*console.log(obj2.sayName());*/ /* 報錯 obj2.sayName is not a function*/
console.log(obj2.__proto__.prototype.sayName()); //ys 理解原型的原型
|
如果不理解的話,看下面的圖
?1 2 3 4 5 6 7 |
/*②對象原型,繼承對象原型*/
var obj3 = Object.create(obj1.prototype);
console.log(obj3); //{}
console.log(obj3.name); //undefined,沒有繼承對象本身
obj3.name = "ys" ;
console.log(obj3.name); //ys
console.log(obj3.sayName()); //ys
|
代碼不理解看圖(設置name後的圖):
這個時候相信大家都理解第一個參數了吧。
以上就是本文的全部內容,希望可以幫助大家更好的創建對象。
js 對象的創建方式和對象的區別