技術標籤：JavaScriptjavascript工廠模式建構函式

工廠模式

【1】定義

工廠模式是一種軟體工程領域一種廣為人知的設計模式，這種模式抽象了建立物件的過程，因為ECMAScript無法穿類，所以開發人員就發明一個函式，用函式來封裝以特定的介面建立物件。簡單理解：通過函式封裝物件，並通過呼叫函式來呼叫封裝的物件。通過呼叫多次函式從而建立多次不同的物件。

【2】程式碼

工廠模式有返回值，因為通過呼叫函式會把把函式返回值（這裡就是函式封裝的物件obj）給返回，然後我們通過宣告一個變數person1去接收，此時變數person1裡面存的就是物件，然後通過物件呼叫屬性與方法，如果沒有返回值就會報錯。

 function person(name, age) {
  let obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayHi = function () {
    console.log("您好");
  };
  return obj;
}
let person1 = person("Demi", 18) 
console.log(person1.name) // Demi
console.log(person1.age) // 18
person1.sayHi() // 您好

 
 

建構函式

【1】定義

建構函式 ，是一種特殊的方法。主要用來在建立物件時初始化物件， 即為物件成員變數賦初始值，總與new運算子一起使用在建立物件的語句中。特別的一個類可以有多個建構函式 ，可根據其引數個數的不同或引數型別的不同來區分它們，即建構函式的過載。在 JavaScript 中，用 new 關鍵字來呼叫的函式，稱為建構函式。建構函式首字母一般大寫

【2】程式碼

建構函式的首字母必須大寫（這裡的建構函式是Person），用來區分於普通函式，內部使用的this物件，來指向即將要生成的例項物件，使用New來生成例項物件

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function () {
    console.log("您好");
  };
}
let person2 = new Person("dingFY", 20);
console.log(person2.name) // dingFY
console.log(person2.age) // 20
person2.sayHi() // 您好
 

new例項化過程

通過上面程式碼比較，我們會發現工廠模式建立了一個空物件obj，並且返回了這個物件，但是建構函式沒有這一步，那是因為new例項化物件已經幫我們做了以下操作

1. 建立一個空物件 obj;
2. 將新建立的空物件的隱式原型指向其建構函式的顯示原型。
3. 使用 call 改變 this 的指向
4. 如果無返回值或者返回一個非物件值，則將 obj 返回作為新物件；如果返回值是一個新物件的話那麼直接直接返回該物件。

let person2 = new Person("dingFY", 20);

// new Person() 例項化過程
new Person("dingFY", 20) {
  var obj = {};
  obj.__proto__ = Person.prototype;
  var result = Person.call(obj, "dingFY", 20);
  return typeof result === 'obj' ? result : obj;
}

區別總結

共同點：都是函式，都可以建立物件，都可以傳入引數

不同點：

工廠模式：

1. 函式名是小寫
2. 有new
3. 有返回值
4. new之後的物件是當前的物件
5. 直接呼叫函式就可以建立物件

自定義建構函式：

1. 函式名是大寫(首字母)
2. 沒有new
3. 沒有返回值
4. this是當前的物件
5. 通過new的方式來建立物件

文章每週持續更新，可以微信搜尋「前端大集錦」第一時間閱讀，回覆【視訊】【書籍】領取200G視訊資料和30本PDF書籍資料

​