JS創(chuàng)建對象常用設計模式工廠構造函數(shù)及原型

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

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

引言

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

工廠模式

什么是工廠模式？其實就字面意思，在現(xiàn)實社會生活中，市場通過不同工廠加工成不同的產(chǎ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)建了特定對象。

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

構造函數(shù)模式

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

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

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

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

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

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

這里涉及到一個重要的考點：即使用 new 會發(fā)生什么？

官方解答：

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

這個，就是“原型鏈”的構造過程??！

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

構造函數(shù)的問題

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

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

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

即使是同樣的方法，也不相等，因為每次執(zhí)行 new 的時候，實例的方法都是重新創(chuàng)建的；

原型模式

原型模式可以解決構造函數(shù)模式“重復創(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

這里不妨再重溫一下原型鏈的指向關系：

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

原型模式弱化了向構造函數(shù)傳遞初始化參數(shù)的能力，會導致所有實例默認都取得相同的屬性值。

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ù)來說比較合適。對原始值的屬性也還好，但對于引用值的屬性，則會產(chǎn)生混亂??！