JavaScript的執(zhí)行過程

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

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

javascript的執(zhí)行過程

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

初始化this

變量對(duì)象VO（活動(dòng)對(duì)象AO）

作用域鏈SC；

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

執(zhí)行上下文 execution context

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

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

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

eval執(zhí)行上下文；

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

this對(duì)象

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

變量對(duì)象VO/激活對(duì)象AO

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

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

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

其實(shí)VO/AO都是作為當(dāng)前上下文的作用于鏈的組成元素，

作用域鏈scope chain

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

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

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

原型

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

prototype原型

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

進(jìn)行new Object（）時(shí)的情況

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

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

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

但是Object.prototype確實(shí)一個(gè)特例------它的_proto_指向的是null，切記切記！

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

其實(shí)在JavaScript中的instanceof就是跟著原型鏈這么來進(jìn)行判定的；

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

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

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]]是當(dāng)前執(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;

}