js 創(chuàng)建對(duì)象的多種方式與優(yōu)缺點(diǎn)小結(jié)

更新時(shí)間：2021年03月10日 10:44:33 作者：feng

這篇文章主要介紹了js 創(chuàng)建對(duì)象的多種方式與優(yōu)缺點(diǎn)，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下

早期創(chuàng)建方式

var obj = new Object()
obj.name ='xxx'
obj.age = 18
或使用對(duì)象字面量
var o1 = {
  name: 'xxx',
  say: () => {}
}
var o2 = {
  name: 'xxx',
  say: () => {}
}

缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對(duì)象，會(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è)相似對(duì)象代碼重復(fù)問(wèn)題
缺點(diǎn)：無(wú)法識(shí)別對(duì)象是什么類型

構(gòu)造函數(shù)模式

ECMAScript中可以使用構(gòu)造函數(shù)創(chuàng)建特定類型的對(duì)象，如Object，Array這種原生構(gòu)造函數(shù)。此外，也可以創(chuàng)建自定義構(gòu)造函數(shù)，從而定義自定義對(duì)象的屬性和方法。

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() // 1
o2.sayName() // 2

優(yōu)點(diǎn)：構(gòu)造函數(shù)模式創(chuàng)建的實(shí)例可以區(qū)分類型標(biāo)識(shí)(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() // 1
o2.sayName() // 2

優(yōu)點(diǎn)：多個(gè)實(shí)例共享在全局作用域中定義的函數(shù)，解決了兩個(gè)函數(shù)做同一件事的問(wèn)題
缺點(diǎn)：全局作用域定義的函數(shù)實(shí)際上只能被某個(gè)對(duì)象調(diào)用，全局作用域名不副實(shí)，而且如果對(duì)象需要定義很多方法，需要?jiǎng)?chuàng)建很多個(gè)全局函數(shù)，這讓自定義的對(duì)象類型沒(méi)有封裝特性。

原型模式

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)protoype屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象。這個(gè)對(duì)象的用途是包含了可以由特定類型的所有實(shí)例共享的屬性和方法。即prototype就是由構(gòu)造函數(shù)創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。

function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 123
o2.sayName() // 123

優(yōu)點(diǎn)：解決了實(shí)例共享屬性或事件的問(wèn)題
缺點(diǎn)：因?yàn)閷?shí)例共享屬性的原因，對(duì)于值為引用類型的屬性來(lái)說(shuō)，一個(gè)實(shí)例的修改會(huì)導(dǎo)致其他實(shí)例訪問(wèn)值更改。如：

function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.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() // 1
o2.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() // 1
o2.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ù)的情況下為對(duì)象添加特殊方法
缺點(diǎn)：返回的對(duì)象與構(gòu)造函數(shù)以及構(gòu)造函數(shù)的原型沒(méi)有任何關(guān)系，該方法與在構(gòu)造函數(shù)外部創(chuàng)建的對(duì)象沒(méi)有什么不同

穩(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外沒(méi)有任何方法能夠訪問(wèn)name，在一些安全的環(huán)境使用
缺點(diǎn)：與工廠模式相似，無(wú)法識(shí)別對(duì)象所屬類型

以上就是js 創(chuàng)建對(duì)象的多種方式與優(yōu)缺點(diǎn)小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于js 創(chuàng)建對(duì)象的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: