js 創(chuàng)建對象的多種方式與優(yōu)缺點(diǎn)小結(jié)
var obj = new Object()obj.name =’xxx’obj.age = 18或使用對象字面量var o1 = { name: ’xxx’, say: () => {}}var o2 = { name: ’xxx’, say: () => {}}
缺點(diǎn):使用同一個(gè)接口創(chuàng)建很多對象,會(huì)產(chǎn)生大量重復(fù)代碼
工廠模式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)
優(yōu)點(diǎn):解決了創(chuàng)建多個(gè)相似對象代碼重復(fù)問題缺點(diǎn):無法識別對象是什么類型
構(gòu)造函數(shù)模式ECMAScript中可以使用構(gòu)造函數(shù)創(chuàng)建特定類型的對象,如Object,Array這種原生構(gòu)造函數(shù)。此外,也可以創(chuàng)建自定義構(gòu)造函數(shù),從而定義自定義對象的屬性和方法。
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
優(yōu)點(diǎn):構(gòu)造函數(shù)模式創(chuàng)建的實(shí)例可以區(qū)分類型標(biāo)識(instanceof 判斷)缺點(diǎn):每個(gè)方法都需要在實(shí)例上重新創(chuàng)建,如 兩個(gè)實(shí)例的sayName方法任務(wù)相同,但是實(shí)際創(chuàng)建了兩個(gè)Function實(shí)例
構(gòu)造函數(shù)模式優(yōu)化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
優(yōu)點(diǎn):多個(gè)實(shí)例共享在全局作用域中定義的函數(shù),解決了兩個(gè)函數(shù)做同一件事的問題缺點(diǎn):全局作用域定義的函數(shù)實(shí)際上只能被某個(gè)對象調(diào)用,全局作用域名不副實(shí),而且如果對象需要定義很多方法,需要?jiǎng)?chuàng)建很多個(gè)全局函數(shù),這讓自定義的對象類型沒有封裝特性。
原型模式我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)protoype屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對象。這個(gè)對象的用途是包含了可以由特定類型的所有實(shí)例共享的屬性和方法。即prototype就是由構(gòu)造函數(shù)創(chuàng)建的那個(gè)對象實(shí)例的原型對象。
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
優(yōu)點(diǎn):解決了實(shí)例共享屬性或事件的問題缺點(diǎn):因?yàn)閷?shí)例共享屬性的原因,對于值為引用類型的屬性來說,一個(gè)實(shí)例的修改會(huì)導(dǎo)致其他實(shí)例訪問值更改。如:
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’]構(gòu)造函數(shù)和原型模式組合
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
優(yōu)點(diǎn):每個(gè)實(shí)例有自己的屬性,同時(shí)又共享著方法的引用,還支持傳參數(shù)
動(dòng)態(tài)原型模式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
優(yōu)點(diǎn):僅在方法不存在的時(shí)候創(chuàng)建一次,避免重復(fù)創(chuàng)建
寄生構(gòu)造函數(shù)模式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
優(yōu)點(diǎn):在不更改原始構(gòu)造函數(shù)的情況下為對象添加特殊方法缺點(diǎn):返回的對象與構(gòu)造函數(shù)以及構(gòu)造函數(shù)的原型沒有任何關(guān)系,該方法與在構(gòu)造函數(shù)外部創(chuàng)建的對象沒有什么不同
穩(wěn)妥構(gòu)造函數(shù)模式function Person(name) { var o = new Object() // 添加方法 o.getName = function(){ return name } return o}var o1 = new Person(1)o1.getName() // 1
與寄生構(gòu)造函數(shù)不同在于,不使用this,不使用new調(diào)用優(yōu)點(diǎn):除了使用getName外沒有任何方法能夠訪問name,在一些安全的環(huán)境使用缺點(diǎn):與工廠模式相似,無法識別對象所屬類型
以上就是js 創(chuàng)建對象的多種方式與優(yōu)缺點(diǎn)小結(jié)的詳細(xì)內(nèi)容,更多關(guān)于js 創(chuàng)建對象的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
