深入理解javascript new的機制

標籤：

我們在使用對象的時候，除了一些瀏覽器內建的單體對象可以直接使用外，都會new一個出來使用。

1.最簡單的莫過於如下擷取一個Object對象執行個體

var obj = new Object();

說明：此時的new關鍵字幹了最有用的一件事就是，繼承了所有Object.prototype上的方法，這個可以去查看一下es5的參考資料中Object.prototype的方法列表。也就是說此時的obj對象可以使用所有繼承而來的方法了！

2.然而是建構函式模式讓我們對new有了一個深入的瞭解！

function Person(name,age){    this.name = name;    this.age = age;    this.sayName = function(){        console.log(this.name);    }}var person1 = new Person("wang",23);var person2 = new Person("jiang",24);var person3 = new Person;//當不傳參數的時候

我們很容易知道建構函式使得每個執行個體都獨自擷取了一份屬性和方法。但是這是怎麼實現出來的呢？

new過程中發生了什嗎？

1).建立一個對象。

2).將建構函式的範圍賦給新對象（因此this就指向了新對象）

3).執行建構函式中的代碼（為新對象添加屬性）

4).返回新對象

值得注意的是它們的繼承關係是：person1/person2/person3繼承於Person,而Person繼承於Object(一切對象皆繼承於Object)

如果理解了上面的東西，在一些簡單編程中遇到new，基本也夠了。

下面繼續繼續介紹一些有關new的話題

3.模組模式(Moudle模式)，下面講解一個最簡單的模組模式例子

var Calculator = function (eq) {    //這裡可以聲明私人成員    var name = 2;    var eqCtl = document.getElementById(eq);    return {        // 暴露公開的成員        name : name,        add: function (x, y) {            var val = x + y;            eqCtl.innerHTML = val;        }    };};var c1 = new Calculator(‘eq‘);var c2 = new Calculator(‘la‘);c1.name = 3;//c1的name屬性改變了卻不會影響c2的name屬性console.log(c1);console.log(c2);c1.add(2, 2);

值得注意的是，在Calculator這個建構函式中返回了一個對象！

說明：如果建構函式中返回了一個對象，（第4步）那麼new出來的對象將會被返回的對象覆蓋。模組模式的結果是c1和c2都從返回的對象copy了一份屬性和方法，它們之間互不影響。

繼承關係也變了，c1和c2都直接繼承於Object

 

深入理解javascript new的機制