淺談 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原理等，太多太多了,一時間也說不完。有空在寫一篇。本文也是爲了本身總結加深記憶。可能會有些地方理解的有錯誤，請你們及時指出。