現在的位置: 首頁 > 搜索技術 > 正文

JS 的 new 到底是干什么的

2020年01月14日 搜索技術 ⁄ 共 445字 ⁄ 字號 評論關閉

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

  JS 的 new 到底是干什么的

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

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

  一個士兵的在計算機里就是一堆屬性,如下:

  我們只需要這樣就可以制造一個士兵:

  var 士兵 = {

  ID: 1, // 用于區分每個士兵

  兵種:"美國大兵",

  攻擊力:5,

  生命值:42,

  行走:function(){ /*走倆步的代碼*/},

  奔跑:function(){ /*狂奔的代碼*/ },

  死亡:function(){ /*Go die*/ },

  攻擊:function(){ /*糊他熊臉*/ },

  防御:function(){ /*護臉*/ }

  }

  兵營.制造(士兵)

  制造一百個士兵

  如果需要制造 100 個士兵怎么辦呢?

  循環 100 次吧:

  var 士兵們 = []

  var 士兵

  for(var i=0; i<100; i++){   士兵 = {   ID: i, // ID 不能重復   兵種:"美國大兵",   攻擊力:5,   生命值:42,   行走:function(){ /*走倆步的代碼*/},   奔跑:function(){ /*狂奔的代碼*/ },   死亡:function(){ /*Go die*/ },   攻擊:function(){ /*糊他熊臉*/ },   防御:function(){ /*護臉*/ }   }   士兵們.push(士兵)   }   兵營.批量制造(士兵們)   哎呀好簡單。   質疑   上面的代碼存在一個問題:浪費了很多內存。   行走、奔跑、死亡、攻擊、防御這五個動作對于每個士兵其實是一樣的,只需要各自引用同一個函數就可以了,沒必要重復創建 100 個行走、100個奔跑……   這些士兵的兵種和攻擊力都是一樣的,沒必要創建 100 次。   只有 ID 和生命值需要創建 100 次,因為每個士兵有自己的 ID 和生命值。   改進   看過我們的專欄以前文章(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(士兵)   }   兵營.批量制造(士兵們)   優雅?   有人指出創建一個士兵的代碼分散在兩個地方很不優雅,于是我們用一個函數把這兩部分聯系起來:   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))   }   兵營.批量制造(士兵們)   JS 之父的關懷   JS 之父創建了 new 關鍵字,可以讓我們少寫幾行代碼:   只要你在士兵前面使用 new 關鍵字,那么可以少做四件事情:   不用創建臨時對象,因為 new 會幫你做(你使用「this」就可以訪問到臨時對象);   不用綁定原型,因為 new 會幫你做(new 為了知道原型在哪,所以指定原型的名字為 prototype);   不用 return 臨時對象,因為 new 會幫你做;   不要給原型想名字了,因為 new 指定名字為 prototype。   這一次我們用 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 的作用,就是省那么幾行代碼。(也就是所謂的語法糖)   注意 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 到底是干什么的全部內容,更多知識請關注學步園。

抱歉!評論已關閉.

奔驰宝马破解版下载 新快赢481近500期走势图 成都麻将换三张技巧 北京赛车pk10秘籍 a股模拟交易软件 四川熊猫麻将电脑版 在家赚钱网络兼职 怎么玩股票的 网络联盟兼职靠谱吗 美国股票历史走势 急速赛车网站 股票技术分析 怎么利用手机网络赚 私募基金备案须知2019 腾讯分分彩是合法的吗 低价股票查询 三分钟一期的彩票骗局