js建立物件的6種方式總結

2021-10-24 03:24:44 字數 3078 閱讀 4185

1、new 操作符 + object 建立物件

var person = new object();

person.name = "lisi";

person.age = 21;

person.family = ["lida","lier","wangwu"];

person.say = function()

2、字面量式建立物件

var person =

};

以上兩種方法在使用同一介面建立多個物件時,會產生大量重複**,為了解決此問題,工廠模式被開發。

3、工廠模式

function createperson(name,age,family) 

return o;

}var person1 = createperson("lisi",21,["lida","lier","wangwu"]); //instanceof無法判斷它是誰的例項,只能判斷他是物件,建構函式都可以判斷出

var person2 = createperson("wangwu",18,["lida","lier","lisi"]);

console.log(person1 instanceof object); //true

工廠模式解決了重複例項化多個物件的問題,但沒有解決物件識別的問題(但是工廠模式卻無從識別物件的型別,因為全部都是object,不像date、array等,本例中,得到的都是o物件,物件的型別都是object,因此出現了建構函式模式)。

4、建構函式模式

function person(name,age,family) 

}var person1 = new person("lisi",21,["lida","lier","wangwu"]);

var person2 = new person("lisi",21,["lida","lier","lisi"]);

console.log(person1 instanceof object); //true

console.log(person1 instanceof person); //true

console.log(person2 instanceof object); //true

console.log(person2 instanceof person); //true

console.log(person1.constructor); //constructor 屬性返回對建立此物件的陣列、函式的引用

對比工廠模式有以下不同之處:

1、沒有顯式地建立物件

2、直接將屬性和方法賦給了 this 物件

3、沒有 return 語句

以此方法呼叫建構函式步驟:

1、建立乙個新物件

2、將建構函式的作用域賦給新物件(將this指向這個新物件)

3、執行建構函式**(為這個新物件新增屬性)

4、返回新物件 ( 指標賦給變數person ??? )

可以看出,建構函式知道自己從**來(通過 instanceof 可以看出其既是object的例項,又是person的例項)

建構函式也有其缺陷,每個例項都包含不同的function例項( 建構函式內的方法在做同一件事,但是例項化後卻產生了不同的物件,方法是函式 ,函式也是物件)

因此產生了原型模式

5、原型模式

function person() 

person.prototype.name = "lisi";

person.prototype.age = 21;

person.prototype.family = ["lida","lier","wangwu"];

person.prototype.say = function();

console.log(person.prototype); //object

var person1 = new person(); //建立乙個例項person1

console.log(person1.name); //lisi

var person2 = new person(); //建立例項person2

person2.name = "wangwu";

person2.family = ["lida","lier","lisi"];

console.log(person2); //person

// console.log(person2.prototype.name); //報錯

console.log(person2.age); //21

原型模式的好處是所有物件例項共享它的屬性和方法(即所謂的共有屬性),此外還可以如**第16,17行那樣設定例項自己的屬性(方法)(即所謂的私有屬性),可以覆蓋原型物件上的同名屬性(方法)。

6、混合模式(建構函式模式+原型模式)

建構函式模式用於定義例項屬性,原型模式用於定義方法和共享的屬性

function person(name,age,family)

person.prototype =

}var person1 = new person("lisi",21,["lida","lier","wangwu"]);

console.log(person1);

var person2 = new person("wangwu",21,["lida","lier","lisi"]);

console.log(person2);

可以看出,混合模式共享著對相同方法的引用,又保證了每個例項有自己的私有屬性。最大限度的節省了記憶體。

高程中還提到了動態原型模式,寄生建構函式模式,穩妥建構函式模式。

JS 建立物件的6種方式總結

一 new 操作符 object 建立物件 1 var person new object 2 person.name lisi 3 person.age 21 4 person.family lida lier wangwu 5 person.say function 二 字面式建立物件 1 va...

js 建立物件的6種方式

字面式建立物件var person new 操作符 object 建立物件var person newobject person.name lisi person.age 21 person.family lida lier wangwu person.say function 以上兩種方法在使用同...

建立物件的6種方式

物件 無序的屬性的集合,key 字串 不重複 value 任何資料型別 表現方式 對映 賦值 1 new object var x age var obj newobject obj.name gao obj.x 18 字串 obj x 16 變數 console.log obj 字面量 var x...