前言
最近在學習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原理等,太多太多了,一時間也說不完。有空在寫一篇。本文也是為了自己總結加深記憶。可能會有些地方理解的有錯誤,請大家及時指出。