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后的圖）：
這個時候相信大家都理解第一個參數了吧。