js之工廠構造函數模式(譯)

本文爲譯文,初次翻譯,若有誤導,請多多包含,如閱讀英文,可直接戳連接便可js之工程構造函數模式

若想聽音頻內容,可戳連接js之工廠構造函數模式

類模式

前言

在面向(oriented)對象編程中,一個類是一個可擴展的程序代碼的模板，用於建立對象，爲狀態（成員變量）和行爲實現(implementations)（成員函數或方法）提供初始值

JavaScript中有一個特殊的語法結構和關鍵字類。但在學習以前，咱們應該考慮「類」這個術語來自於面向對象編程的理論。定義在上面引用，它是語言無關獨立的

在JavaScript中有幾個衆所周知的編程模式，即便不使用class關鍵字也能夠編寫類。在這裏，咱們首先來談談他們

這個類的構造將在下一章中描述，可是在JavaScript中它是一個「語法糖」，是咱們在這裏學習的一種模式的擴展

功能類模式

根據定義,下面的構造器函數能夠被認爲是「類

/*
   *
   *  用new關鍵字+函數名(),那麼這個函數爲構造器函數
   *  @construtor: User
   *  @methods:sayHi
   *
   *
    */
   functoin User(name){
        this.sayHi = function(){
        alert(name);
     }
   }
   let user = new User("john");
   user.sayHi();  // john
複製代碼

結果以下所示:

它遵循定義的全部部分

1. 它是一個用於建立對象的「程序代碼模板」（能夠用new來調用）
2. 它提供了狀態的初始值（參數名稱）
3. 它提供了方法（sayHi）

在函數類模式中，用戶內部的局部變量和嵌套函數,沒有分配給它,從內部可見,但在外部代碼沒法訪問

因此咱們能夠很容易地添加內部函數和變量,好比calcAge()

/*
*  添加內部函數和變量
*  @constructor: User
*  @parameter: 參數name,birthday
*  @function calcAge
*  @methods: sayHi
*  @return 時間戳
*
 */
function User(name,birthday){
    // only visible from other methods inside User
    function calcAge(){
        return new Date().getFullYear()-birthday.getFullYear();
    }
    this.sayHi = function(){
        alert(`${name,age:${calcAge()}}`);
    }
}
let user = new User("john",new Date(2000,0,1));
user.sayHi();  // john,age:18
複製代碼

結果以下所示:

在這個代碼中,變量名,生日和函數calcAge()是內部,對象是私有的。他們只能從裏面看到

另外一方面，說Hi就是外在的，公開的方法。建立用戶的外部代碼能夠訪問它

這樣咱們就能夠從外部代碼中隱藏內部實現(internal implementation)細節和輔助方法。只有分配給這個構造函數才能夠看得見外面的

工廠類模式

咱們能夠建立一個班級,而不使用新的

像這樣

/*
* 工廠類模式
* @constructor User
* @parameter 形式參數:name,birthday
* @function calcAge
* @return 當前的年份-出生的年份
* @return User函數返回一個sayHi函數,將名字和年齡結果進行輸出
*
*
 */
function User(name,birthday){
    // only visible from other methods inside User
    function calcAge(){
        return new Date().getFullYear()-birthday.getFullYear();
    }
    return{
        sayHi(){
            alert(`${name},age:${calcAge()}`);
        }
    }
}
let user = User("john",new Date(2000,0,1)); // 函數名的調用,函數表達式賦值
user.sayHi();  

複製代碼

實現的效果以下所示

正如咱們所看到的，函數User返回一個具備公共屬性和方法的對象。這種方法的惟一好處是咱們能夠省略new：write let user = User（...）而不是let user = new User（...）。在其餘方面，它幾乎與功能模式相同

基於原型的類

基於原型的課程是最重要的,也是最好的。功能和工廠類模式在實踐中不多使用

不久你就會明白爲何

這是用原型重寫的同一個類

/*
*
* 基於原型重寫的一個類
* @function User
* @parameter name,birthday
* @prototype 
* @methods: _calcAge,sayHi
* 
*
 */
function User(name,birthday){
    this._name = name;
    this._birthday = birthday;
}

User.prototype._calcAge = function(){
    return new Date().getFullYear()-this._birthday.getFullYear();
}

User.prototype._calcAge = function(){
    return new Date().getFullYear()-this_birthday.getFullYear();
}

User.prototype.sayHi = function(){
    alert(`${this._name},age:${this._calcAge()}`);
}

let user = new User("john",new Date(2000,0,1));
user.sayHi();

複製代碼

實現效果以下所示:

代碼結構

1. 構造函數User僅初始化當前的對象狀態
2. 方法被添加到User.prototype中

正如咱們所看到的,方法在詞法做用域上不在函數User內部,它們並不共享一個通用的做用域環境.若是咱們在函數User中聲明變量,那麼它們將不會被方法看到

因此，有一個衆所周知的協議，內部屬性和方法前綴爲下劃線「」。像_name或_calcAge（）。從技術上講，這只是一個協議，外部代碼仍然能夠訪問它們。但大多數開發人員認識到「」的含義，並儘可能不要觸摸外部代碼中的前綴屬性和方法

如下是功能模式的優勢:

1. 在功能模式中，每一個對象都有本身的每一個方法的副本。咱們在構造函數中分配了this.sayHi = function(){...}和其餘方法的單獨副本

2. 在原型模式中，全部的方法都是在全部用戶對象之間共享的User.prototype中。一個對象自己只存儲數據

因此原型模式更具備記憶效率

但不只如此。原型容許咱們以很是有效的方式設置繼承。內置的JavaScript對象都使用原型。還有一個特殊的語法結構：「類」，爲他們提供漂亮的語法。還有更多，因此讓咱們繼續他們

類基於原型的繼承

假設咱們有兩個基於原型的類

兔子:

/*
*
* 類基於原型的繼承
* 
* @function Rabbit
* @paraterm name  
* @method jump
* @constructor: Rabbit
* 
*/
   function Rabbit(name){
      this.name = name;
   }
   Rabbit.prototype.jump = function(){
      alert(`${this.name}jimp!`);
   }
   let rabbit = new Rabbit("my rabit");
   rabbit.jump();  // my rabit jimp

複製代碼

實現的效果圖以下

和動物

/*
   *  @constructor:Animal
   *  @methods:eat
   *
   *    
    */
   function Animal(name){
       this.name = name;
   }
   Animal.prototype.eat = function(){
       alert(`${this.name}eats`);
   }
   let animal = new Animal("My animal");
   animal.eat();
複製代碼

代碼實例效果以下:

如今他們徹底獨立了

可是咱們但願兔子能擴展動物。換句話說，兔子應該以動物爲基礎，可使用動物的方法，並用本身的方法擴展它們

原型語言是什麼意思？

如今兔子對象的方法在Rabbit.prototype中。若是在Rabbit.prototype中找不到方法,咱們但願兔子使用Animal.prototype做爲「後備」

因此原型鏈應該是Rabbit→Rabbit.prototype→Animal.prototype。

像這樣

要實現的代碼

/*
   * @constructor Animal,Rabbit
   * @paraterm name
   * @methods:eat,jump
   * 
   *
   *
    */
   // same Animal as before
   function Animal(name){
      this.name = name;
   }
   // All animals can eat,right?
   Animal.prototype.eat = function(){
      alert(`${this.name}eats`);
   }
   // same Rabbit as before
   function Rabbit(name){
      this.name = name;
   }
   Rabbit.prototype.jump = function(){
      alert(`${this.name}jumps`);
   }
   // setup the inheritance chain
   Rabbit.prototype._proto_= Animal.prototype; // (*)

   let rabbit = new Rabbit("white Rabbit");

   rabbit.eat();  // rabbits can eat too
   rabbit.jump();  
複製代碼

該行（*）設置了原型鏈。因此兔子首先在 Rabbit.prototype中搜索方法，而後是 Animal.prototype。而後，爲了完整起見，若是在Animal.prototype中沒有找到該方法,則繼續在 Object.prototype中進行搜索,由於 Animal.prototype是一個普通的普通對象,因此它繼承了它

因此這是完整的畫面

小結

術語「類」來自面向對象編程。在JavaScript中，它一般意味着功能類模式或原型模式。原型模式更強大，更高效，因此它建議堅持下去

根據原型模式

1. 方法存儲在Class.prototype中
2. 原型相互繼承

總結

在本節當中,主要講的是工廠構造函數模式,用於建立對象的模板,其中模板能夠粗俗的理解模具,它是基於一份模具建立不少個不一樣的對象,工廠構造函數就是用於建立多個共享特性和行爲的對象,經過構造函數生成的對象具備默認的屬性和方法,而原型就是更改對象下面公用的屬性和方法,讓公用的屬性和方法達到共用一份,一是爲了減小內存的開銷,提升性能,另外一方面是爲了拓展,當須要在代碼的其他全部部分經過屏蔽較爲複雜的的對象建立方法來簡化某些特定對象的建立過程時,使用工廠模式最爲合適,其實它也就是面向對象的一種寫法