摘要：面向?qū)ο笾膭?chuàng)建特定對(duì)象的語(yǔ)法糖個(gè)人學(xué)習(xí)筆記分享為了講清楚面向?qū)ο髮?shí)際上是需要幾個(gè)前置知識(shí)的。于是之父創(chuàng)造了這個(gè)語(yǔ)法糖。

個(gè)人學(xué)習(xí)筆記分享

為了講清楚面向?qū)ο?實(shí)際上是需要幾個(gè)前置知識(shí)的。
包括前面的幾篇文章【原型鏈】 【this】 和今天要說(shuō)的【new】

還是先說(shuō)結(jié)論: new只是一個(gè)語(yǔ)法糖,這個(gè)語(yǔ)法糖被設(shè)計(jì)出來(lái),使用場(chǎng)景是批量創(chuàng)建對(duì)象

通篇文章,我們都是在實(shí)現(xiàn)這個(gè)需求,不斷優(yōu)化,最終實(shí)現(xiàn)一個(gè)new語(yǔ)法糖。

類(lèi)似這樣的士兵ojb

var 士兵 = {
    ID: 1,
    兵種: "美國(guó)大兵",
    攻擊力: 5,
    生命值: 42,
    攻擊: function(){console.log("攻擊")},
    防御: function(){console.log("防御")},
    死亡: function(){console.log("死亡")},
}

var 士兵
var 士兵們 = []
for (var i = 0 ; i < 100 ; i++){
     士兵 = {
        ID: 1,
        兵種: "美國(guó)大兵",
        攻擊力: 5,
        生命值: 42,
        攻擊: function(){console.log("攻擊")},
        防御: function(){console.log("防御")},
        死亡: function(){console.log("死亡")},
    }
    士兵們.push(士兵)
}

最終我們得到了array士兵們

根據(jù)第二篇文章 JS面向?qū)ο笾驹玩湣?對(duì)象和對(duì)象的關(guān)系).md),我們知道這里的攻擊、防御、死亡都是匿名函數(shù),在內(nèi)存空間都會(huì)占據(jù)空間。
這些函數(shù)的內(nèi)容完全相同,300個(gè)匿名函數(shù)卻要占用300個(gè)內(nèi)存空間,十分浪費(fèi)。

自然地,我們就想到JS的原型鏈就是專門(mén)解決這個(gè)問(wèn)題的,我們把共同的屬性放到__proto__里,所有士兵的__proto__都指向相同的內(nèi)存空間。

var 士兵
var 士兵們 = []

for (var i=0 ; i<100 ; i++){
    士兵 = {
        ID: 1,
        生命值: 42
    }
   士兵.__proto__ = 士兵共
   士兵們.push(士兵)
}

var 士兵共 = {
    兵種: "美國(guó)大兵",     // 如果兵種和攻擊力也是一樣的話,那么也需要放到__proto__里去共享
    攻擊力: 5,
    攻擊: function(){console.log("攻擊")},
    防御: function(){console.log("防御")},
    死亡: function(){console.log("死亡")},
}

最終依舊得到了array士兵們

(以上代碼可粘貼運(yùn)行)
現(xiàn)在我們省掉了之前297個(gè)匿名函數(shù)所占用的空間。讓他們的__proto__都指向"士兵共"這個(gè)內(nèi)容空間就OK了

var soldier
var soldiers= []

for (var i=0 ; i<100 ; i++){
    soldier = {
        ID: 1,
        生命值: 42
    }
   soldier.__proto__ = soldierCommon
   soldiers.push(soldier)
}

var soldierCommon = {
    兵種: "美國(guó)大兵",     // 如果兵種和攻擊力也是一樣的話,那么也需要放到__proto__里去共享
    攻擊力: 5,
    攻擊: function(){console.log("攻擊")},
    防御: function(){console.log("防御")},
    死亡: function(){console.log("死亡")},
}

    var soldierCommon = {
        兵種: "美國(guó)大兵",     // 如果兵種和攻擊力也是一樣的話,那么也需要放到__proto__里去共享
        攻擊力: 5,
        攻擊: function(){console.log("攻擊")},
        防御: function(){console.log("防御")},
        死亡: function(){console.log("死亡")},
    }
    
    function createSoldier(){
        var obj = {
            ID: 1,
            生命值: 42
        }
        obj.__proto__ = soldierCommon
        return obj
    }
    
------分割線以上是創(chuàng)建構(gòu)造函數(shù), 分割線以下,是使用構(gòu)造函數(shù)------

    var soldiers = []
    for(var i = 0 ;i<100 ; i++){
        soldiers.push(createSoldier()) 
    }

    // 讓soldierCommon成為構(gòu)造函數(shù)的屬性(因?yàn)楹瘮?shù)也是obj,當(dāng)然可以有屬性)
    // soldierCommon可以改叫xxx,只是一個(gè)名字,只是為了讓這個(gè)對(duì)象和createSoldier產(chǎn)生聯(lián)系
    
    createSoldier.xxx = {
        兵種: "美國(guó)大兵",     
        攻擊力: 5,
        攻擊: function(){console.log("攻擊")},
        防御: function(){console.log("防御")},
        死亡: function(){console.log("死亡")},
    }
    
    function createSoldier(){
        var obj = {
            ID: 1,
            生命值: 42
        }
        obj.__proto__ = createSoldier.xxx
        return obj
    }
    
------分割線以上是創(chuàng)建構(gòu)造函數(shù), 分割線以下,是使用構(gòu)造函數(shù)------

    var soldiers = []
    for(var i = 0 ;i<100 ; i++){
        soldiers.push(createSoldier()) 
    }

那么現(xiàn)在還可以優(yōu)化嗎? 上面這段代碼,唯一的缺點(diǎn)就是xxx不太容易理解。

所以,JS之父為了容易理解將這個(gè)xxx,也就是共有屬性的引用,統(tǒng)一叫做prototype,雖然prototype對(duì)于中國(guó)人來(lái)說(shuō)依舊不好理解。

    
    createSoldier.prototype = {
        兵種: "美國(guó)大兵",     
        攻擊力: 5,
        攻擊: function(){console.log("攻擊")},
        防御: function(){console.log("防御")},
        死亡: function(){console.log("死亡")},
    }
    
    function createSoldier(){
        var obj = {
            ID: 1,
            生命值: 42
        }
        obj.__proto__ = createSoldier.prototype
        return obj
    }
    
------分割線以上是創(chuàng)建構(gòu)造函數(shù), 分割線以下,是使用構(gòu)造函數(shù)------

    var soldiers = []
    for(var i = 0 ;i<100 ; i++){
        soldiers.push(createSoldier()) 
    }

好了,仔細(xì)看看上面的代碼,還有什么可優(yōu)化的地方嗎?

內(nèi)存、變量名、代碼集中都做了優(yōu)化,也就是范例式的代碼。

那么,JS之父也認(rèn)為這個(gè)就是最好的代碼,他希望,當(dāng)JS開(kāi)發(fā)者們需要批量創(chuàng)建特定對(duì)象時(shí),都這樣寫(xiě)。

于是,JS之父創(chuàng)造了new這個(gè)語(yǔ)法糖。

 function Soldier(){
     this.ID  = 1
     this.生命值 = 42
 }
 
 Soldier.prototype.兵種 = "美國(guó)大兵"
 Soldier.prototype.攻擊力 = "65
 Soldier.prototype.攻擊 = function(){console.log("攻擊")}
 Soldier.prototype.防御 = function(){console.log("防御")}
 Soldier.prototype.死亡 = function(){console.log("死亡")}
 
 ------分割線以上是創(chuàng)建構(gòu)造函數(shù), 分割線以下,是使用構(gòu)造函數(shù)------
 
 var soldiers = []
 for(var i = 0 ;i<100 ; i++){
     soldiers.push( new Soldier()) 
 }

v2.2 沒(méi)有使用new語(yǔ)法的函數(shù)createSoldier

    function createSoldier(){
        var obj = {
            ID: 1,
            生命值: 42
        }
        obj.__proto__ = createSoldier.prototype
        return obj
    }

v3.0 使用了new語(yǔ)法的函數(shù)Soldier

     function Soldier(){
     //   this = {}                                          JS偷偷做的第1個(gè)事情                               
     //   this.__proto__ = Soldier.prototype                 JS偷偷做的第2個(gè)事情 
     
        this.ID  = 1
        this.生命值 = 42
         
     // return this                                          JS偷偷做的第3個(gè)事情 
         
     }
     
     Soldier.prototype = {                                  JS偷偷給Soldier.prototype加了個(gè)constructor屬性
        constructor : Soldier
     }

對(duì)比一下,當(dāng)你使用new語(yǔ)法,JS之父幫你做了什么事情

第一 , JS幫你在函數(shù)里創(chuàng)建了一個(gè)this空對(duì)象,并且這個(gè)this指向是構(gòu)造函數(shù)的實(shí)例

第二 , JS幫你讓this的__proto__ 指向 構(gòu)造函數(shù)的原型,也就是prototype

第三 , JS幫你偷偷return了 this

第四 , JS偷偷給Soldier.prototype加了個(gè)constructor屬性

其他注意事項(xiàng)

構(gòu)造函數(shù)首字母大寫(xiě),習(xí)慣寫(xiě)法

__proto__不能在生產(chǎn)環(huán)境出現(xiàn),因?yàn)闀?huì)嚴(yán)重影響性能

用new調(diào)用的時(shí)候,也沒(méi)法用call了,因?yàn)镴S之父幫你call了,this的指向就像你見(jiàn)到的指向?qū)嵗?/p>

所以使用了new,就可以讓代碼沒(méi)有廢話。

你只需要設(shè)置對(duì)象的自有屬性和共有屬性。
JS幫你創(chuàng)建空對(duì)象,幫你搞定this指向,幫你改變this的__proto__,幫你return this