【前端知識(shí)】JavaScript——設(shè)計(jì)模式（工廠模式、構(gòu)造函數(shù)模式、原型模式）
一、工廠模式
工廠模式是一種眾所周知的設(shè)計(jì)模式，廣泛應(yīng)用于軟件工程領(lǐng)域，用于抽象創(chuàng)建特定對(duì)象的過(guò)程。
優(yōu)點(diǎn)：可以解決創(chuàng)建多個(gè)類似對(duì)象的問(wèn)題
缺點(diǎn)：沒(méi)有解決對(duì)象標(biāo)識(shí)問(wèn)題（即新創(chuàng)建的對(duì)象是什么類型）
示例：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-616409.html
function createPerson(name, age, job) {
// 創(chuàng)建對(duì)象，將值賦值給該對(duì)象后，返回
let o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
};
// 返回對(duì)象
return o;
}
let person1 = createPerson("Nicholas", 29, "Software Engineer");
let person2 = createPerson("Greg", 27, "Doctor");
二、構(gòu)造函數(shù)模式
構(gòu)造函數(shù)模式與工廠模式相比，沒(méi)有顯式地創(chuàng)建對(duì)象，其屬性和方法直接賦值給了 this，且沒(méi)有 return。
優(yōu)點(diǎn)：定義自定義構(gòu)造函數(shù)可以確保實(shí)例被標(biāo)識(shí)為特定類型
缺點(diǎn)：其定義的方法會(huì)在每個(gè)實(shí)例上都創(chuàng)建一遍
示例：
// 區(qū)別1: 函數(shù)名大寫(xiě)，為了與普通函數(shù)區(qū)分
function Person(name, age, job){
// 區(qū)別2: 與工廠模式不同，傳入的參數(shù)賦值給this
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name);
};
// 區(qū)別3: 無(wú)需返回對(duì)象
}
// 區(qū)別4: 通過(guò)new操作符，創(chuàng)建Person實(shí)例
let person1 = new Person("Nicholas", 29, "Software Engineer");
let person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg
注意：使用 new 操作符調(diào)用構(gòu)造函數(shù)的執(zhí)行過(guò)程：
| 步驟 | 過(guò)程 |
|---|---|
| 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è)函數(shù)都會(huì)創(chuàng)建一個(gè) prototype 屬性，這個(gè)屬性是一個(gè)對(duì)象，包含應(yīng)該由特定引用類型的實(shí)例共享的屬性和方法。
優(yōu)點(diǎn)：在它上面定義的屬性和方法可以被對(duì)象實(shí)例共享
缺點(diǎn)：所有實(shí)例在默認(rèn)情況先都將取得相同的屬性值文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-616409.html
示例：
function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
console.log(this.name);
};
let person1 = new Person();
person1.sayName(); // "Nicholas"
let person2 = new Person();
person2.sayName(); // "Nicholas"
console.log(person1.sayName == person2.sayName); // true
到了這里，關(guān)于【前端知識(shí)】JavaScript——設(shè)計(jì)模式（工廠模式、構(gòu)造函數(shù)模式、原型模式）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
