淺談 JavaScript new 執行過程及function原理


前言

  最近在學習JavaScript語言精粹,感覺寫得相當不錯。所以這里也算是總結一下。一個方法使用new的方式創建到底是怎樣的過程,一個function的聲明內部又是怎樣執行的呢

  另外學的過程中,不斷參照ECMAScript的API,也能理解不少東西。ECMAScript Api:下載地址 W3C參考地址:http://www.w3school.com.cn/js/pro_js_functions.asp

正文 

  1.首先,看個例子,看下面例子的輸出。

  

 

  結果通過new運算符執行結果與直接執行函數結果不一樣。new返回了一個對象

  2.那么如果Person方法本身返回一個對象呢。看下圖

  

 

  結果這次到時按照return的結果直接返回了,和直接執行有一樣了

  所以我們可以試着得出一個結論:new運算符 會根據方法返回值的不同,執行方式是不一樣的。

  3.然后,new 會改變this的指向,這個大家應該都知道,不過我們還是再說一下

  直接作為函數執行this指向window

  

 

  在使用new運算符后的this,卻指向當前對象了

  

 

  所以我們也可以得出一個結論::使用new運算符后的this指向當前對象

  4.接下來,我們說Person聲明的問題,如下圖:

  

  Person剛生下來怎么會有這么多屬性?applu,bind,call,lenth都是從哪里來的?

  5.帶着這個問題,我們來看個例子(方法的另外一種聲明方式):

  

  你可能首先會問你為啥知道Function能這樣用?那就來看一下w3c的說明):

  

  其實function Person(){}具體的執行就是調用Function()構造函數進行構造的,最后一個參數是函數體

 

  如果他是Function的一個實例,Person有那么多屬性/方法,也就是Function對象的了。看下Function源碼你就知道了!

  那你可能會問?不對啊!Function的屬性明顯沒有Person多啊,其他的哪來的?再來看張截圖

Function中少的那些個屬性其實都是Object的屬性,Object的源碼就不貼出來了,前面的ECMAScript Api文檔里都有說明,在這里也截個圖(有空你可以把Object+Function屬性方法加起來,看是不是正好)。

其實Function應該也是一個Object,所以也會帶有Object的一系列屬性/方法(Object與Function有着千絲萬縷的關系,不能展開說了,涉及的太多了)

說完Function(雖然有點離題,但是能幫助我們理解好多東西)。我們繼續正題模擬實現new吧。

其實new這個運算符是啥,可以當它是一個方法,方法里面就是執行初始化的過程,可學習javascript語言精粹中的講解。具體模擬實現如下,都在注釋里說了(也就只能模擬下,因為看不到內部啊):

 不多說一看就懂了……

總結

其實有好多點都可以擴展開講,比如_proto_咋回事,apply原理等,太多太多了,一時間也說不完。有空在寫一篇。本文也是為了自己總結加深記憶。可能會有些地方理解的有錯誤,請大家及時指出

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM