javascript 編程反思1 new 原理

我們在定義對象的時候通常使用兩種方式

1:通過new 關鍵字創建對象

2:直接定義對象 var o={};

第二種一般比較容易理解,就是直接創建一個空對象,但是第一種 通過new 的方式具體原理和細節是比較模糊的,舉例來說

 

function foo(){
    this.name="demo"
    //return  {};
}
foo.prototype.show=function(p){
    console.log(p);
}
var f=new foo();
console.log(f.name);// demo
f.show("lee");// lee

 f 是一個對象,爲什麼就具有了name 屬性?

 

我們來仔細分析一下創建f 對象的過程,

1:js 解析器遇到new 關鍵字以後首先會創建一個空對象,var f={};這個f 沒有任何內容,僅僅有__prop__

這些繼承Object prototype 中的東西,

2:更換prototype 對象,把這個f.__prop__ 這個原始對象替換爲foo.prototype 對象,這個很重,這裏反覆提起prototype 是一個對象的概念,具體原理可以查閱一下其他資料,

     當第二步驟執行完以後,f.show 就可以執行了,

3:執行構造器 foo() ,傳f 進入構造器代替原先的this ,可以這樣理解foo.call(f); 裏邊的代碼this.name="demo" 實際執行變成了f.name="demo",

      當第三步執行完成,f.show 就可以執行了,因爲show 已經在f對象的原型鏈上了,具體原型鏈的概念和原型鏈的查找原理這裏不做贅述,

4:返回構造器執行結果,如果構造器中有了return ,如果有了return 那麼前幾步統統作廢,所有的結果就變成了return 的結果,不過通過構造器做return 的不是很普遍。

 

 

new 你懂了嗎???

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章