JS 中 new 的作用詳細

Posted on by

簡介：

大部分講 new 的文章會從面向對象的思路講起，但是我始終認為，在解釋一個事物的時候，不應該引入另一個更復雜的事物。

想象我們在制作一個策略類戰爭遊戲，玩傢可以操作一堆士兵攻擊敵方。

我們著重來研究一下這個遊戲裡面的「制造士兵」環節。

一個士兵的在計算機裡就是一堆屬性，如下圖：

1、舉例

我們隻需要這樣就可以制造一個士兵：

var 士兵 = {
  ID: 1, // 用於區分每個士兵
  兵種:"美國大兵",
  攻擊力:5,
  生命值:42, 
  行走:function(){ /*走倆步的代碼*/},
  奔跑:function(){ /*狂奔的代碼*/  },
  死亡:function(){ /*Go die*/    },
  攻擊:function(){ /*糊他熊臉*/   },
  防禦:function(){ /*護臉*/       }
}

兵營.制造(士兵)

2、制造一百個士兵

如果需要制造 100 個士兵怎麼辦呢？

循環 100 次吧：

var 士兵們 = []
var 士兵
for(var i=0; i<100; i++){
  士兵 = {
    ID: i, // ID 不能重復
    兵種:"美國大兵",
    攻擊力:5,
    生命值:42, 
    行走:function(){ /*走倆步的代碼*/}，
    奔跑:function(){ /*狂奔的代碼*/  },
    死亡:function(){ /*Go die*/    },
    攻擊:function(){ /*糊他熊臉*/   },
    防禦:function(){ /*護臉*/       }
  }
  士兵們.push(士兵)
}

兵營.批量制造(士兵們)

3、質疑

上面的代碼存在一個問題：浪費瞭很多內存。

  • 行走、奔跑、死亡、攻擊、防禦這五個動作對於每個士兵其實是一樣的，隻需要各自引用同一個函數就可以瞭，沒必要重復創建 100 個行走、100個奔跑……
  • 這些士兵的兵種和攻擊力都是一樣的，沒必要創建 100 次。
  • 隻有 ID 和生命值需要創建 100 次，因為每個士兵有自己的 ID 和生命值。

4、改進

看過我們的專欄以前文章（JS 原型鏈）的同學肯定知道，用原型鏈可以解決重復創建的問題：我們先創建一個「士兵原型」，然後讓「士兵」的 __proto__ 指向「士兵原型」

var 士兵原型 = {
  兵種:"美國大兵",
  攻擊力:5,
  行走:function(){ /*走倆步的代碼*/}，
  奔跑:function(){ /*狂奔的代碼*/  },
  死亡:function(){ /*Go die*/    },
  攻擊:function(){ /*糊他熊臉*/   },
  防禦:function(){ /*護臉*/       }
}
var 士兵們 = []
var 士兵
for(var i=0; i<100; i++){
  士兵 = {
    ID: i, // ID 不能重復
    生命值:42
  }

  /*實際工作中不要這樣寫，因為 __proto__ 不是標準屬性*/
  士兵.__proto__ = 士兵原型 

  士兵們.push(士兵)
}

兵營.批量制造(士兵們)

5、優雅？

有人指出創建一個士兵的代碼分散在兩個地方很不優雅，於是我們用一個函數把這兩部分聯系起來：

function 士兵(ID){
  var 臨時對象 = {}

  臨時對象.__proto__ = 士兵.原型

  臨時對象.ID = ID
  臨時對象.生命值 = 42
  
  return 臨時對象
}

士兵.原型 = {
  兵種:"美國大兵",
  攻擊力:5,
  行走:function(){ /*走倆步的代碼*/}，
  奔跑:function(){ /*狂奔的代碼*/  },
  死亡:function(){ /*Go die*/    },
  攻擊:function(){ /*糊他熊臉*/   },
  防禦:function(){ /*護臉*/       }
}

// 保存為文件：士兵.js

然後就可以愉快地引用「士兵」來創建士兵瞭：

var 士兵們 = []
for(var i=0; i<100; i++){
  士兵們.push(士兵(i))
}

兵營.批量制造(士兵們)

6、JS 之父的關懷

JS 之父創建瞭 new 關鍵字，可以讓我們少寫幾行代碼：

 

隻要你在士兵前面使用 new 關鍵字，那麼可以少做四件事情：

  • 不用創建臨時對象，因為 new 會幫你做（你使用「this」就可以訪問到臨時對象）；
  • 不用綁定原型，因為 new 會幫你做（new 為瞭知道原型在哪，所以指定原型的名字為 prototype）；
  • 不用 return 臨時對象，因為 new 會幫你做；
  • 不要給原型想名字瞭，因為 new 指定名字為 prototype。

7、這一次我們用 new 來寫

function 士兵(ID){
  this.ID = ID
  this.生命值 = 42
}

士兵.prototype = {
  兵種:"美國大兵",
  攻擊力:5,
  行走:function(){ /*走倆步的代碼*/},
  奔跑:function(){ /*狂奔的代碼*/  },
  死亡:function(){ /*Go die*/    },
  攻擊:function(){ /*糊他熊臉*/   },
  防禦:function(){ /*護臉*/       }
}

// 保存為文件：士兵.js

然後是創建士兵（加瞭一個 new 關鍵字）：

var 士兵們 = []
for(var i=0; i<100; i++){
  士兵們.push(new 士兵(i))
}

兵營.批量制造(士兵們)

new 的作用，就是省那麼幾行代碼。（也就是所謂的語法糖）

8、註意 constructor 屬性

new 操作為瞭記錄「臨時對象是由哪個函數創建的」，所以預先給「士兵.prototype」加瞭一個 constructor 屬性：

士兵.prototype = {
  constructor: 士兵
}

如果你重新對「士兵.prototype」賦值，那麼這個 constructor 屬性就沒瞭，所以你應該這麼寫：

士兵.prototype.兵種 = "美國大兵"
士兵.prototype.攻擊力 = 5
士兵.prototype.行走 = function(){ /*走倆步的代碼*/}
士兵.prototype.奔跑 = function(){ /*狂奔的代碼*/  }
士兵.prototype.死亡 = function(){ /*Go die*/    }
士兵.prototype.攻擊 = function(){ /*糊他熊臉*/   }
士兵.prototype.防禦 = function(){ /*護臉*/       }

或者你也可以自己給 constructor 重新賦值：

士兵.prototype = {
  constructor: 士兵,
  兵種:"美國大兵",
  攻擊力:5,
  行走:function(){ /*走倆步的代碼*/},
  奔跑:function(){ /*狂奔的代碼*/  },
  死亡:function(){ /*Go die*/    },
  攻擊:function(){ /*糊他熊臉*/   },
  防禦:function(){ /*護臉*/       }
}

到此這篇關於JS 中 new 的作用詳細的文章就介紹到這瞭,更多相關JS 中 new 的作用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：