早期創建方式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var obj = new Object()obj.name ='xxx'obj.age = 18或使用對象字面量var o1 = { name: 'xxx', say: () => {}}var o2 = { name: 'xxx', say: () => {}} |
缺點：使用同一個接口創建很多對象，會產生大量重復代碼
工廠模式
|
1
2
3
4
5
6
7
8
|
function factory(name,age) { var obj = new Object() obj.name = name obj.age = age return obj}var o1 = factory(1, 11)var o2 = factory(2, 22) |
優點：解決了創建多個相似對象代碼重復問題
缺點：無法識別對象是什么類型
構造函數模式
ECMAScript中可以使用構造函數創建特定類型的對象，如Object，Array這種原生構造函數。此外，也可以創建自定義構造函數，從而定義自定義對象的屬性和方法。
|
1
2
3
4
5
6
7
8
9
10
11
|
function Person(name, age) { this.name = name this.age = age this.sayName = function() { console.log(this.name) }}var o1 = new Person(1,11)var o2 = new Person(2,22)o1.sayName() // 1o2.sayName() // 2 |
優點：構造函數模式創建的實例可以區分類型標識(instanceof 判斷)
缺點：每個方法都需要在實例上重新創建，如 兩個實例的sayName方法任務相同，但是實際創建了兩個Function實例
構造函數模式優化
|
1
2
3
4
5
6
7
8
9
10
11
|
function Person(name, age) { this.name = name this.age = age}function sayName () { console.log(this.name)}var o1 = new Person(1,11)var o2 = new Person(2,22)o1.sayName() // 1o2.sayName() // 2 |
優點：多個實例共享在全局作用域中定義的函數，解決了兩個函數做同一件事的問題
缺點：全局作用域定義的函數實際上只能被某個對象調用，全局作用域名不副實，而且如果對象需要定義很多方法，需要創建很多個全局函數，這讓自定義的對象類型沒有封裝特性。
原型模式
我們創建的每個函數都有一個protoype屬性，這個屬性是一個指針，指向一個對象。這個對象的用途是包含了可以由特定類型的所有實例共享的屬性和方法。即prototype就是由構造函數創建的那個對象實例的原型對象。
|
1
2
3
4
5
6
7
8
9
10
|
function Person(){}Person.prototype.name = '123'Person.prototype.age = 18Person.prototype.sayName = function() { console.log(this.name)}var o1 = new Person(1,11)var o2 = new Person(2,22)o1.sayName() // 123o2.sayName() // 123 |
優點：解決了實例共享屬性或事件的問題
缺點：因為實例共享屬性的原因，對于值為引用類型的屬性來說，一個實例的修改會導致其他實例訪問值更改。如：
|
1
2
3
4
5
6
7
8
9
10
11
|
function Person(){}Person.prototype.name = '123'Person.prototype.age = 18Person.prototype.friends = ['a', 'b']Person.prototype.sayName = function() { console.log(this.name)}var o1 = new Person(1,11)var o2 = new Person(2,22)o1.friends.push('c')console.log(o2.friends) // ['a', 'b', 'c'] |
構造函數和原型模式組合
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function Person(name, age) { this.name = name this.age = age this.friends = ['a']}Person.prototype = { constructor: Person, sayName: function() { console.log(this.name) }}var o1 = new Person(1,11)var o2 = new Person(2,22)o1.sayName() // 1o2.sayName() // 2 |
優點：每個實例有自己的屬性，同時又共享著方法的引用，還支持傳參數
動態原型模式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function Person(name, age) { this.name = name this.age = age this.friends = ['a'] if(typeof this.sayName != 'function') { Person.prototype.sayName = function() { console.log(this.name) } }}var o1 = new Person(1,11)var o2 = new Person(2,22)o1.sayName() // 1o2.sayName() // 2 |
優點：僅在方法不存在的時候創建一次，避免重復創建
寄生構造函數模式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function SpecialArray() { var o = new Array() // 添加值 o.push.apply(o, arguments) // 添加方法 o.toPipedString = function(){ return this.join('|') } return o}var o1 = new SpecialArray(1,11)o1.toPipedString() // 1|11 |
優點：在不更改原始構造函數的情況下為對象添加特殊方法
缺點：返回的對象與構造函數以及構造函數的原型沒有任何關系，該方法與在構造函數外部創建的對象沒有什么不同
穩妥構造函數模式
|
1
2
3
4
5
6
7
8
9
10
|
function Person(name) { var o = new Object() // 添加方法 o.getName = function(){ return name } return o}var o1 = new Person(1)o1.getName() // 1 |
與寄生構造函數不同在于，不使用this，不使用new調用
優點：除了使用getName外沒有任何方法能夠訪問name，在一些安全的環境使用
缺點：與工廠模式相似，無法識別對象所屬類型
以上就是js 創建對象的多種方式與優缺點小結的詳細內容，更多關于js 創建對象的資料請關注服務器之家其它相關文章！
原文鏈接：https://segmentfault.com/a/1190000039376338
