js創建對象的方法匯總

2019-11-20 10:50:31

字體：大中小

來源：轉載

供稿：網友

js一個有三種方法創建對象，這里做一個總結.

1.對象直接量

所謂對象直接量，可以看做是一副映射表，這個方法也是最直接的一個方法，個人比較建議，

//創建簡單對象var obj1 = {}; //空對象var obj2 = {  name: "ys",  age: 12};//創建復雜對象var obj3 = {  name: "ys",  age: 12,  like: {    drink: "water",    eat: "food"  }};console.log(typeof obj1);  //objectconsole.log(typeof obj2);  //objectconsole.log(typeof obj3);  //object

有的人可能會發現，這里的鍵值名怎么沒有引號”“，好細心，其實這個引號（單引雙引號，js一樣）加不加都行，但是個人建議加上，為什么能，因為加上之后，鍵值名可以很隨意….當然如果你不亂定義名字的話，第一個比較好，因人而異，

var obj4 = {  "my name": "ys",  //鍵值名中間有空格  "my-age": 12,    //鍵值名中間有連字符  "while": 111    //鍵值名是關鍵字}console.log(obj4['my name']);  //ysconsole.log(obj4['my-age']);  //12console.log(obj4.while);    //111console.log(typeof obj3);    //object

通過上面的例子，大家可以看出”.”和”[]”訪問屬性的區別了吧

對象直接量創建的對象，鍵值對的值支持表達式，如下

var obj3 = {  name: "ys",  age: obj2.age,   //引用obj2.age  like: {    drink: "water",    eat: "food"  }};console.log(obj3.age); //100

2.new創建對象

1）.系統內置對象

var obj1 = new Object();var obj2 = new Array();var obj3 = new Date();var obj4 = new RegExp("ys");console.log(typeof obj1);  //objectconsole.log(typeof obj2);  //objectconsole.log(typeof obj3);  //objectconsole.log(typeof obj4);  //object

2）.自定義對象

function Person(name, age){  this.name = name;  this.age = age;}var obj1 = new Person("ys", 12);console.log(Object.prototype.toString.call(obj1));  //objectconsole.log(Person instanceof Object);        //trueconsole.log(typeof obj1);              //objectconsole.log(obj1.age);                //12

3.Object.create()創建

該方法有兩個參數，我就只解釋下第一參數，第二個參數不常用（對對象的屬性進行進一步描述）
第一個參數：傳入要繼承的原型（prototype）對象
怎樣理解這句話呢？

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時

var obj2 = Object.create(null);   //不繼承對象應有的屬性和方法console.log(obj2 + "abc");     //報錯 ，失去 + 功能

為什么會報錯呢？正常參數下生成的圖如下：

通過圖可以看出，要繼承的原型對象（即參數）又繼承了Object的原型對象，關鍵原因來了，Object的原型對象包含了一些js對象的基本方法（indexOf()，toString()，'+'功能……）而這個時候，如果參數為null，那么這條繼承鏈就斷了。

這個時候大家應該理解了一句話了吧，JavaScript中所有的對象都繼承自Object，以為Object處于繼承鏈的最頂端。

2）.創建空對象

var obj3 = Object.create(Object.prototype); console.log(obj3);              //{}，（空對象，與前兩個方法 {}，new Object 相同）console.log(obj3.__proto__);         //如下圖 ，只包含了基本對象的方法

代碼的圖：

這樣創建的對象，只包含了對象的基本方法。

3）.最后大家看下面的代碼，希望能更深刻的理解Object.create()方法，大家可以參考這篇文章：《一種新的javascript對象創建方式Object.create()》

var obj1 = {  name: "ys",  age: 12};obj1.prototype = {  sayName: function(){    return console.log(this.name);  }};

/*①對象參數，只繼承對象*/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 理解原型的原型

如果不理解的話，看下面的圖

/*②對象原型，繼承對象原型*/var obj3 = Object.create(obj1.prototype);console.log(obj3);                 //{}console.log(obj3.name);               //undefined，沒有繼承對象本身obj3.name = "ys";console.log(obj3.name);               //ysconsole.log(obj3.sayName());            //ys

代碼不理解看圖（設置name后的圖）：