JavaScript的執(zhí)行過程

gaomysion 發(fā)布于2019-08-21 11:45 / 2615人閱讀

摘要：變量對象實際上是一個邏輯上的概念，是邏輯上作用域鏈的組成元素。在全局上下文中，全局對象充當變量對象，全局上下文的作用域鏈中存放全局對象在函數(shù)進入執(zhí)行上下文之前，會生成一個活動對象，將參數(shù)函數(shù)聲明變量聲明按這個順序添加到變量對象之中。

javascript的執(zhí)行過程

整個JavaScript的代碼運行可以分為 <建立執(zhí)行上下文> 和 <代碼執(zhí)行> 兩個階段；
其中執(zhí)行上下文的建立包括：

初始化this

變量對象VO（活動對象AO）

作用域鏈SC；

代碼執(zhí)行時會實例化VO或AO對象中的變量；具體如下：

執(zhí)行上下文 execution context

執(zhí)行上下文會有三種情況：

全局執(zhí)行上下文、

函數(shù)執(zhí)行上下文、

eval執(zhí)行上下文；

引擎會在執(zhí)行時建立執(zhí)行上下文堆棧；執(zhí)行上下文會初始化三個對象：this、變量對象VO/活動對象AO、作用域鏈。

this對象

使用easy模式來判定this的指向，作為對象屬性方法調(diào)用時指向?qū)ο?，作為全局方法使用指向window，函數(shù)中的this主要是依賴于調(diào)用者，在進行賦值等操作時注意this的指向丟失問題；

變量對象VO/激活對象AO

看有些資料說變量對象和活動對象是一回事兒，甚至有些資料說其差異在于活動對象多了arguments屬性。昨天的學習課程讓我對這個問題有了清晰的認識。變量對象實際上是一個邏輯上的概念，是邏輯上作用域鏈的組成元素。而在實際的實踐中則大部分時間由活動對象充當這個角色。在全局上下文中，全局對象window充當變量對象，全局上下文的作用域鏈中存放全局對象；在函數(shù)進入執(zhí)行上下文之前，會生成一個活動對象，將arguments、參數(shù)、函數(shù)聲明、變量聲明按這個順序添加到變量對象之中。

在VO/AO中存在同名變量時的覆蓋順序是：應(yīng)該是函數(shù)聲明>函數(shù)形參>變量；也就是在這里完成變量聲明、函數(shù)形參和函數(shù)聲明的提前的；而變量聲明不會進行復制操作，函數(shù)形參也沒有復制操作一說；需要注意的是函數(shù)聲明會把函數(shù)體帶入，此時函數(shù)會建立相應(yīng)的隱式[[scope]]數(shù)組屬性，這個數(shù)組指向的當前上下文的作用域鏈，需要注意的是這里只有函數(shù)聲明，不會有函數(shù)表達式，函數(shù)聲明都是在跟語句下，而函數(shù)表達式都是在執(zhí)行代碼時建立的；

函數(shù)中的激活對象最開始只有一個對象；就是arguments這個對象，有著length、callee等屬性；

其實VO/AO都是作為當前上下文的作用于鏈的組成元素，

作用域鏈scope chain

全局執(zhí)行上下文的作用域鏈就是[window];

函數(shù)的作用域鏈就是 [當前上下文的VO/AO，自身的scope內(nèi)容]；這里函數(shù)的隱式[[scope]]是在函數(shù)被聲明或者被表達式執(zhí)行時建立的，也就是上文說的當前執(zhí)行上下文的作用域鏈；

變量實例化在代碼執(zhí)行前，上下文建立后來完成的

原型

所有的對象都是通過函數(shù)創(chuàng)建的，首先看看函數(shù)和new操作時都發(fā)生了什么：其中隱式[[prototype]]也就是瀏覽器中認為的 _protp_這個對象

prototype原型

函數(shù)也是一種對象。他也是屬性的集合，你也可以對函數(shù)進行自定義屬性。javascript自己就默認的給函數(shù)一個屬性------prototype。對，每個函數(shù)都有一個屬性叫做prototype。這個prototype的屬性值是一個對象（屬性的集合，再次強調(diào)！），默認的只有一個叫做constructor的屬性，指向這個函數(shù)本身。

進行new Object（）時的情況

隱式原型"_proto_"也是[[prototype]]
每個函數(shù)function都有一個prototype，即原型。這里再加一句話------每個對象都有一個_proto_，可成為隱式原型。這個_proto_是一個隱藏的屬性，javascript不希望開發(fā)者用到這個屬性值，有的低版本瀏覽器甚至不支持這個屬性值。

每個對象都有一個_proto_屬性，指向創(chuàng)建該對象的函數(shù)的prototype。

同樣自定義函數(shù)的prototype。自定義函數(shù)的prototype本質(zhì)上就是和 var obj = {} 是一樣的，都是被Object創(chuàng)建，所以它的_proto_指向的就是Object.prototype。

但是Object.prototype確實一個特例------它的_proto_指向的是null，切記切記！

同樣之前說了函數(shù)也是對象，那么函數(shù)的_proto_是誰？是Function.prototype，而Function.prototype指向的對象也是對象，它的_proto_是不是也指向Object.prototype？看一張大圖慢慢理解：

其實在JavaScript中的instanceof就是跟著原型鏈這么來進行判定的；

創(chuàng)建function算法函數(shù)有prototype屬性是個對象和[[Prototype]]也就是_proto_屬性

F=new Object();創(chuàng)建對象

F.[[class]]="Function";指定類型

F.[[Prototype]]=Function.prototype;把_proto_指向函數(shù)的prototype

F.[[Call]]=internalCall; 內(nèi)部調(diào)用

F.[[Construct]]=internalConstructor; 內(nèi)部構(gòu)造

F.[[Scope]]=currentContext.Scope Chain.concat(); 把[[Scope]]是當前執(zhí)行上下文作用域

F.length=FormalParameterNum

//DontDelete ReadOnly DontEnum

temp=new Object();  初始化prototype

temp.constructor=F; 初始化prototype下的constructor

//DontEnum DontDelete

F.prototype=temp; 完成初始化

return F 返回

new函數(shù)

function internalConstructor(parameters){

O=new Object();

O.[[Class]]="Object";

O.[[Prototype]]=Object.prototype;

R=F.[[Call]].apply(O,parameters);

return O;

}