摘要：前言我們在深入淺出面向?qū)ο蠛驮透拍钇谶@篇文章中了解到了如何使用解決重復(fù)創(chuàng)建浪費內(nèi)存的問題，其中的關(guān)鍵就是，那么這篇文章讓我們來重新了解的前世今生一個苦逼年級主任的故事開學(xué)啦高一年級主任龔主任需要為全年級每一位理科班新生錄入學(xué)號并為每一位

前言

我們在深入淺出面向?qū)ο蠛驮汀靖拍钇?】在這篇文章中了解到了如何使用new Function解決重復(fù)創(chuàng)建浪費內(nèi)存的問題，其中的關(guān)鍵就是new，那么這篇文章讓我們來重新了解new的前世今生

一個苦逼年級主任的故事

開學(xué)啦~~~高一年級主任龔主任需要為全年級每一位理科班新生錄入學(xué)號并為每一位學(xué)生生成相關(guān)檔案
不僅要自己留一份而且要把每一個檔案都上傳到學(xué)校資料庫
哇，全年級一千個學(xué)生，一個個輸入，不要命啦？
還好龔主任學(xué)過編程

    // 先造一個對象，把相關(guān)數(shù)據(jù)都先寫進去，看看是啥樣的
    var 學(xué)生 = {
        學(xué)號: 1,
        年級: "高一",
        所選方向: "理科班",
        上傳資料: function () {/*上傳資料的代碼*/
        }
    }
    // 不錯，檔案大致就是如此
    
    // 再來個數(shù)組自己留著作為備份
    // 那么循環(huán)一千次吧
    var 全年級學(xué)生 = []
    for (var i = 0; i < 1000; i++) {
        var 學(xué)生 = {
            學(xué)號: i,
            年級: "高一",
            所選方向: "理科班",
            上傳資料: function () {/*上傳資料的代碼*/}
        }
        全年級學(xué)生.push(學(xué)生)
    }

龔主任突然想到，他昨天晚上在才在segmentfault上看到有關(guān)于內(nèi)存浪費的文章——深入淺出面向?qū)ο蠛驮汀靖拍钇?】
那么他寫的這個代碼就是典型的內(nèi)存浪費啊
每個學(xué)生除了學(xué)號不同，其它都相同，咋辦呢？
哎對了，那篇文章說可以通過原型和原型鏈解決這個問題
那么試試吧

    // 先創(chuàng)建一個學(xué)生原型，然后把相同的代碼都放在這里
    var 學(xué)生原型 = {
        年級: "高一",
        所選方向: "理科班",
        上傳資料: function () {/*上傳資料的代碼*/}
    }
    // 重新寫循環(huán)代碼
    var 全年級學(xué)生 = []
    for (var i = 0; i < 1000; i++) {
        var 學(xué)生 = {
            學(xué)號: i
        }
        // 還記得嗎，每個對象自動帶有__proto__屬性
        // 不過在這里__proto__屬性的指向需要我們自己去設(shè)定
        學(xué)生.__proto__ = 學(xué)生原型

        全年級學(xué)生.push(學(xué)生)
    }

好了，大功告成，這下內(nèi)存不浪費了
但是，龔主任聽說程序猿寫代碼都追求可讀性強，他這寫的太不優(yōu)雅了
再改改吧

    // 優(yōu)雅的代碼離不開封裝，現(xiàn)在讓我們來封裝封裝吧
    function 學(xué)生(學(xué)號) {
        // 我們先建立一個臨時對象，把例如學(xué)號之類需要改變的屬性放進去
        var 臨時對象 = {}
        臨時對象.學(xué)號 = 學(xué)號

        // 再把臨時對象的__proto__手工綁定到學(xué)生.原型
        臨時對象.__proto__ = 學(xué)生.原型

        return 臨時對象
    }

    學(xué)生.原型 = {
        年級: "高一",
        所選方向: "理科班",
        上傳資料: function () {/*上傳資料的代碼*/
        }
    }

    // 好了，開始循環(huán)吧
    var 學(xué)生們 = []
    for (var i = 0; i < 1000; i++) {
        學(xué)生們.push(學(xué)生(i))
    }

好了，讓我們先遠離一下龔先生和他的代碼，來看看到底什么是new

    function 學(xué)生(學(xué)號) {
        // 我們先建立一個臨時對象，把例如學(xué)號之類需要改變的屬性放進去
        // 【new做的第一件事：幫你創(chuàng)立一個臨時對象，臨時對象通過this訪問】
        var 臨時對象 = {}
        臨時對象.學(xué)號 = 學(xué)號

        // 再把臨時對象的__proto__手工綁定到學(xué)生原型
        // 【new做的第二件事：幫你自動把__proto__綁定到學(xué)生.原型】
        臨時對象.__proto__ = 學(xué)生.原型

        // 【new做的第三件事：幫你return臨時對象】
        return 臨時對象
    }

    // 【但new只有一個要求：把學(xué)生原型改名為 學(xué)生.prototype】
    學(xué)生.原型 = {
        年級: "高一",
        所選方向: "理科班",
        上傳資料: function () {/*上傳資料的代碼*/}
    }

那么，我們用new該怎么寫？so easy。new幫你做的事，你還自己做它干嘛呢？

    function 學(xué)生(學(xué)號) {
        // 【new做的第一件事：幫你創(chuàng)立一個臨時對象，臨時對象通過this訪問】
        // 所以我們不用創(chuàng)建臨時對象了，把下面那行代碼注釋掉
        // var 臨時對象 = {}

     // 把臨時對象都改為this就好
        this.學(xué)號 = 學(xué)號

        // 再把臨時對象的__proto__手工綁定到學(xué)生原型
        // 【new做的第二件事：幫你自動把__proto__綁定到學(xué)生原型】
        // 我們不用手動綁定了，注釋掉
        // 臨時對象.__proto__ = 學(xué)生原型

        // 【new做的第三件事：幫你return臨時對象】
        // 我們不用手動return了，注釋掉
        // return 臨時對象
    }

    // 【但new只有一個要求：把學(xué)生原型改名為 學(xué)生.prototype】
    // new 幫了我們這么多忙，按照他的意思來唄，改了！
    學(xué)生.prototype = {
        年級: "高一",
        所選方向: "理科班",
        上傳資料: function () {/*上傳資料的代碼*/}
    }

    var 學(xué)生們 = []
    for (var i = 0; i < 1000; i++) {
        學(xué)生們.push(new 學(xué)生(i))

我的天哪，我們的代碼竟然通過new減少了這么多！！

    function test(id) {
        this.id = id
    }

    new test(1)

    console.log(test.prototype) // {constructor: ?}

使用new操作符的時候，為了記錄臨時對象是由哪個函數(shù)創(chuàng)建的，會在prototype里添加一個constructor屬性，指向創(chuàng)建臨時對象的函數(shù)
注意：如果直接給prototype賦值，則constructor屬性會消失

function 學(xué)生(學(xué)號) {
        this.學(xué)號 = 學(xué)號
    }
    學(xué)生.prototype = {
        年級: "高一",
        所選方向: "理科班",
        上傳資料: function () {/*上傳資料的代碼*/}
    }

    var 學(xué)生們 = []
    for (var i = 0; i < 1000; i++) {
        學(xué)生們.push(new 學(xué)生(i))
    }

    // 沒有出現(xiàn)constructor屬性
    console.log(學(xué)生.prototype) // {年級: "高一", 所選方向: "理科班", 上傳資料: ?}

可以采用另一種賦值方式

    function 學(xué)生(學(xué)號) {
        this.學(xué)號 = 學(xué)號
    }

    學(xué)生.prototype.年級 = "高一"
    學(xué)生.prototype.所選方向 = "理科班"
    學(xué)生.prototype.上傳資料 = function () {/*上傳資料的代碼*/}

    var 學(xué)生們 = []
    for (var i = 0; i < 1000; i++) {
        學(xué)生們.push(new 學(xué)生(i))
    }

    // 出現(xiàn)constructor屬性
    console.log(學(xué)生.prototype) // {年級: "高一", 所選方向: "理科班", 上傳資料: ?, constructor: ?}

new的本質(zhì)其實就是一個語法糖，目的就是為了幫我們省代碼

創(chuàng)立一個臨時對象，臨時對象指向類的this

把實例__proto__綁定到類的prototype

return臨時對象(也就是this)

var a = {} 是 var a = new Object()的語法糖
var a = [] 是 var a = new Array()的語法糖
var a = funciton(){} 是 var a = new Function()的語法糖

new運算符
JS 的 new 到底是干什么的？