JS創(chuàng)建對(duì)象常用設(shè)計(jì)模式工廠構(gòu)造函數(shù)及原型

更新時(shí)間：2022年07月08日 08:49:57 作者：掘金安東尼

本篇帶來你一定熟知的、用于創(chuàng)建對(duì)象的三種設(shè)計(jì)模式：工廠模式、構(gòu)造函數(shù)模式、原型模式，有需要的朋友可以借鑒參考下，希望能夠有所幫助

引言

很多工友們都說：設(shè)計(jì)模式根本用不到，然而它其實(shí)時(shí)刻就在我們身邊，像王國(guó)維所說：眾里尋他千百度，驀然回首，那人正在燈火闌珊處。

工廠模式

什么是工廠模式？其實(shí)就字面意思，在現(xiàn)實(shí)社會(huì)生活中，市場(chǎng)通過不同工廠加工成不同的產(chǎn)品。

轉(zhuǎn)化成 JS 代碼就是這樣的：

// 汽車工廠
function carFactory(brand, price, district) {
	 let o = new Object();
	 o.brand= brand;
	 o.price= price;
	 o.district= district;
	 o.performance= function() {
		 console.log(this.brand);
	 };
	 return o;
}
// 生產(chǎn)汽車
let car1 = carFactory("Benz", 50, "china");
let car2= carFactory("Honda", 30, "usa");

// 糖果工廠
function candyFactory(name, size, color) {
	 let o = new Object();
	 o.name= name;
	 o.size= size;
	 o.color= color;
	 o.performance= function() {
		 console.log(this.name);
	 };
	 return o;
}
// 生產(chǎn)糖果
let candy1= candyFactory("Oreo", "small", "white");
let candy2= candyFactory("quduoduo", "middle", "black");

有汽車工廠，糖果工廠等等，我們通過工廠函數(shù)，創(chuàng)建了特定對(duì)象。

工廠模式是一種眾所周知的設(shè)計(jì)模式，廣泛應(yīng)用于軟件工程領(lǐng)域，用于抽象創(chuàng)建特定對(duì)象的過程。

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

構(gòu)造函數(shù)是用于創(chuàng)建特定類型對(duì)象的，可以自定義構(gòu)造函數(shù)，以函數(shù)的形式為自己的對(duì)象類型定義屬性和方法。

比如前面的例子，就可以該寫為：

// 構(gòu)造汽車的構(gòu)造函數(shù)
function Car(brand, price, district) {
	 this.brand= brand;
	 this.price= price;
	 this.district= district;
	 this.performance= function() {
		 console.log(this.brand);
	 };
}
// 構(gòu)造汽車
let car1 = new Car("Benz", 50, "china");
let car2= new Car("Honda", 30, "usa");

與工廠模式的區(qū)別是，構(gòu)造函數(shù)模式：

沒有顯式地創(chuàng)建對(duì)象；
屬性和方法直接賦值給了 this；
沒有 return；

構(gòu)造函數(shù)首字母通常是大寫；

這里涉及到一個(gè)重要的考點(diǎn)：即使用 new 會(huì)發(fā)生什么？

官方解答：

(1) 在內(nèi)存中創(chuàng)建一個(gè)新對(duì)象。 (2) 這個(gè)新對(duì)象內(nèi)部的[[Prototype]]（隱式原型）特性被賦值為構(gòu)造函數(shù)的 prototype （顯示原型）屬性。 (3) 構(gòu)造函數(shù)內(nèi)部的 this 被賦值為這個(gè)新對(duì)象（即 this 指向新對(duì)象）。 (4) 執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼（給新對(duì)象添加屬性）。 (5) 如果構(gòu)造函數(shù)返回非空對(duì)象，則返回該對(duì)象；否則，返回剛創(chuàng)建的新對(duì)象。

這個(gè)，就是“原型鏈”的構(gòu)造過程??！

car1.__proto__===Car.prototype // true
car1 instanceof Car // true

構(gòu)造函數(shù)的問題

構(gòu)造函數(shù)的主要問題在于，其定義的方法會(huì)在每個(gè)實(shí)例上都創(chuàng)建一遍。

什么意思？用代碼來解釋：

// 構(gòu)造汽車的構(gòu)造函數(shù)
function Car(brand, price, district) {
	 this.brand= brand;
	 this.price= price;
	 this.district= district;
	 this.performance= function() {
	 };
}
// 構(gòu)造汽車
let car1 = new Car("Benz", 50, "china");
let car2= new Car("Honda", 30, "usa");
car1.performance == car2.performance // false

即使是同樣的方法，也不相等，因?yàn)槊看螆?zhí)行 new 的時(shí)候，實(shí)例的方法都是重新創(chuàng)建的；

原型模式

原型模式可以解決構(gòu)造函數(shù)模式“重復(fù)創(chuàng)建方法”的問題。

// 原型創(chuàng)建
function Car(brand, price, district) {
	 Car.prototype.brand= brand;
	 Car.prototype.price= price;
	 Car.prototype.district= district;
	 Car.prototype.performance= function() {
	 };
}
let car1 = new Car("Benz", 50, "china");
let car2= new Car("Honda", 30, "usa");
car1.performance === car2.performance // true

這里不妨再重溫一下原型鏈的指向關(guān)系：

car1.__proto__===Car.prototype // true
Car.__proto__===Function.prototype // true
Function.prototype.__proto__===Object.prototype //true
Car.prototype.__proto__===Object.prototype //true
Object.prototype.__proto__===null // true

原型模式弱化了向構(gòu)造函數(shù)傳遞初始化參數(shù)的能力，會(huì)導(dǎo)致所有實(shí)例默認(rèn)都取得相同的屬性值。

function Person() {}
Person.prototype = {
 constructor: Person,
 friends: "A",
 sayName() {
 }
}; 
let person1 = new Person();
let person2 = new Person();
person1.friends="B";
person1.friends // 'B'
person2.friends // 'A'

function PersonArr() {}
PersonArr.prototype = {
 constructor: PersonArr,
 friends:["A"],
 sayName() {
 }
}; 
let person1 = new PersonArr();
let person2 = new PersonArr();
person1.friends.push("B");
person1.friends // ["A","B"]
person2.friends // ["A","B"]

原型上的所有屬性是在實(shí)例間共享的，這對(duì)函數(shù)來說比較合適。對(duì)原始值的屬性也還好，但對(duì)于引用值的屬性，則會(huì)產(chǎn)生混亂??！