快捷導(dǎo)航

JS創(chuàng)建對(duì)象的十種方式總結(jié)

更新時(shí)間：2023年10月05日 11:46:15 作者：愛(ài)吃糖的貓

面向?qū)ο笫且环N重要的編程范式,如何靈活的創(chuàng)建對(duì)象,是對(duì)編程基本功的考驗(yàn),本來(lái)我們來(lái)探討一下JavaScript中創(chuàng)建對(duì)象的十種方式,感興趣的小伙伴可以了解下

前言

面向?qū)ο笫且环N重要的編程范式，如何靈活的創(chuàng)建對(duì)象，是對(duì)編程基本功的考驗(yàn)，本來(lái)我們來(lái)探討創(chuàng)建對(duì)象的十種方式。我將這十種分為new Object、構(gòu)造函數(shù)與原型對(duì)象、其他三個(gè)大類。

new Object

這三種本質(zhì)都是new Object，他們無(wú)法根據(jù)對(duì)象的原型對(duì)象準(zhǔn)確判斷對(duì)象的類型，因?yàn)樵蛯?duì)象上都是Object。console.log(obj.__proto__===Object.prototype); // true

new Object

const obj = new Object({name: 'wayne',age: 18})

字面量方式

const obj = {name: 'wayne',age: 18}

工廠函數(shù)方式

function createPerson(name, age) {
 	return {name,age,}
}
 const obj = createPerson('wayne', 18)

構(gòu)造函數(shù)與原型對(duì)象

這四種是對(duì)構(gòu)造函數(shù)與原型對(duì)象創(chuàng)建對(duì)象上的細(xì)化。

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

如果構(gòu)造函數(shù)中包含的方法，則會(huì)重復(fù)創(chuàng)建，造成內(nèi)存的浪費(fèi)（只適合放屬性不適合方法）

function Person(name, age) {
	this.name = name
    this.age = age
    this.getInfo = function() {
        console.log(this.name, this.age)
    }
}
const obj = new Person('wayne', 18)

原型對(duì)象方式

合放方法：將共同的方法放到原型當(dāng)中可以避免重新創(chuàng)建相同功能的方法，減少了內(nèi)存的使用。不適合放屬性：原因有三條

new初始化新的屬性時(shí)候不方便，
修改起來(lái)不方便 p1.__proto__.name = 'jack'
在原型對(duì)象的屬性會(huì)在所有的對(duì)象上共享，導(dǎo)致新new出來(lái)出現(xiàn)問(wèn)題

function Person() {}
Person.prototype.name = "wayne"
Person.prototype.age = 10
Person.prototype.getInfo = function() {
	console.log(this.name, this.age)
}
const p1 = new Person()
// 這里使用的是原型上的屬性
p1.getInfo() // wayne 10
// 修改原型上的屬性
p1.__proto__.name = 'jack'
p1.__proto__.age = 18
// 這里使用的是原型上的屬性
p1.getInfo() // jack 18
const p2 = new Person()
// 修改過(guò)的屬性
p2.getInfo()  // jack 18

混合模式

這是我們常見(jiàn)的方式，將屬性放在構(gòu)造函數(shù)，方法放在原型上。但這種方式不太符合面向?qū)ο蠓庋b的思想。

function Person(name, age) {
	this.name = name
  this.age = age
}
Person.prototype.getInfo = function() {
	console.log(this.name, this.age)
}
const p1 = new Person(name, age)

動(dòng)態(tài)混合

其實(shí)就是混合模式的改進(jìn)，這種方式的缺點(diǎn)是語(yǔ)義不符，其實(shí)只有第一個(gè)對(duì)象創(chuàng)建時(shí)才會(huì)走 if 判斷

function Person(name, age) {
	this.name = name
  this.age = age
  if (Person.prototype.getInfo === "undefined") {
  	Person.prototype.getInfo = function() {
    	console.log(this.name, this.age)
    }
  }
}
// 第一次調(diào)用時(shí)會(huì)給 Person.prototype 添加 getInfo 方法
const p1 = new Person("wayne", 18) 
const p2 = new Person("jack", 15)

寄生構(gòu)造函數(shù)

和動(dòng)態(tài)混合一樣，但通過(guò)函數(shù)里調(diào)用其他構(gòu)造函數(shù)

function Person(name, age) {
	this.name = name
    this.age = age
    if (Person.prototype.getInfo === "undefined") {
        Person.prototype.getInfo = function() {
            console.log(this.name, this.age)
        }
    }
}
function func(name, age) {
	const p = new Person(name, age)
    return p
}
const p1 = func("wayne", 18)

其他

class

使用ES6語(yǔ)法糖class創(chuàng)建對(duì)象，其實(shí)class的本質(zhì)就是function。

class Person {
	constructor(name, age) {
  	this.name = name
    this.age = age
  }
  getInfo() {
  	console.log(this.name, this.age)
  }
}
const p1 = new Person("wayne", 18)
// class的本質(zhì)是function
console.log(typeof Person);  //function

閉包

利用閉包的特性，也可以實(shí)現(xiàn)創(chuàng)建對(duì)象。優(yōu)點(diǎn)：不用this 和 new；缺點(diǎn)：容易造成內(nèi)存泄漏。

function Person(name, age) {
    return {
      getName() {
          return name
      },
      getAge: function() {
          return age
      }
    }
}
const p1 = Person("wayne", 18)
console.log(p1.getName()) // wayne
console.log(p1.getAge()) // 18