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

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

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

還是先說結(jié)論: new只是一個語法糖,這個語法糖被設(shè)計出來,使用場景是批量創(chuàng)建對象

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

類似這樣的士兵ojb

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

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

最終我們得到了array士兵們

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

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

var 士兵
var 士兵們 = []

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

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

最終依舊得到了array士兵們

(以上代碼可粘貼運(yùn)行)
現(xiàn)在我們省掉了之前297個匿名函數(shù)所占用的空間。讓他們的__proto__都指向"士兵共"這個內(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 = {
    兵種: "美國大兵",     // 如果兵種和攻擊力也是一樣的話,那么也需要放到__proto__里去共享
    攻擊力: 5,
    攻擊: function(){console.log("攻擊")},
    防御: function(){console.log("防御")},
    死亡: function(){console.log("死亡")},
}

    var soldierCommon = {
        兵種: "美國大兵",     // 如果兵種和攻擊力也是一樣的話,那么也需要放到__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ù)的屬性(因為函數(shù)也是obj,當(dāng)然可以有屬性)
    // soldierCommon可以改叫xxx,只是一個名字,只是為了讓這個對象和createSoldier產(chǎn)生聯(lián)系
    
    createSoldier.xxx = {
        兵種: "美國大兵",     
        攻擊力: 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)化嗎? 上面這段代碼,唯一的缺點就是xxx不太容易理解。

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

    
    createSoldier.prototype = {
        兵種: "美國大兵",     
        攻擊力: 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)為這個就是最好的代碼,他希望,當(dāng)JS開發(fā)者們需要批量創(chuàng)建特定對象時,都這樣寫。

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

 function Soldier(){
     this.ID  = 1
     this.生命值 = 42
 }
 
 Soldier.prototype.兵種 = "美國大兵"
 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 沒有使用new語法的函數(shù)createSoldier

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

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

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

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

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

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

第三 , JS幫你偷偷return了 this

第四 , JS偷偷給Soldier.prototype加了個constructor屬性

其他注意事項

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

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

用new調(diào)用的時候,也沒法用call了,因為JS之父幫你call了,this的指向就像你見到的指向?qū)嵗?/p>

所以使用了new,就可以讓代碼沒有廢話。

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