深入理解javascript new的機制

jopen 9年前發布 | 13K 次閱讀 JavaScript開發 JavaScript

我們在使用對象的時候，除了一些瀏覽器內置的單體對象可以直接使用外，都會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

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！