資訊專(zhuān)欄INFORMATION COLUMN
摘要：這一篇簡(jiǎn)單的說(shuō)一說(shuō)的函數(shù)執(zhí)行和的執(zhí)行上下文的概念，之前在我的博客里邊也提到過(guò)的堆棧隊(duì)列，這一篇打算多帶帶的拿出來(lái)說(shuō)一說(shuō)是什么是的執(zhí)行上下文一段可以執(zhí)行的代碼在被執(zhí)行的時(shí)候，會(huì)創(chuàng)建一個(gè)函數(shù)的執(zhí)行上下文執(zhí)行上下文里邊有三個(gè)重要的屬性分別是變量對(duì)象
這一篇簡(jiǎn)單的說(shuō)一說(shuō)js的函數(shù)執(zhí)行和js的執(zhí)行上下文的概念，之前在我的博客里邊也提到過(guò)
js的堆棧隊(duì)列，
這一篇打算多帶帶的拿出來(lái)說(shuō)一說(shuō)
一段可以執(zhí)行的代碼在被執(zhí)行的時(shí)候，會(huì)創(chuàng)建一個(gè)函數(shù)的執(zhí)行上下文
執(zhí)行上下文里邊有三個(gè)重要的屬性分別是
變量對(duì)象
作用域鏈
this指向
執(zhí)行上下文是跟函數(shù)相關(guān)的，執(zhí)行上下文分為兩個(gè)階段
創(chuàng)建階段
執(zhí)行階段
首先創(chuàng)建階段
掃描變量和函數(shù)（確定變量環(huán)境）
確定this指向
確定詞法環(huán)境
簡(jiǎn)單說(shuō)一下詞法環(huán)境和變量環(huán)境的區(qū)別，我個(gè)人理解的就是說(shuō)詞法環(huán)境是包含變量環(huán)境的
在js里邊原型鏈大家都不陌生 ，js在當(dāng)前的對(duì)象里邊找不到所使用的屬性的話會(huì)去他的上一級(jí)去找
直到Object，再找不到就會(huì)undefined ，這里邊 當(dāng)前對(duì)象的作用域就是他的變量環(huán)境，而詞法環(huán)境則是與之關(guān)聯(lián)的的執(zhí)行上下文中聲明的變量
在創(chuàng)建階段 函數(shù)的聲明會(huì)被儲(chǔ)存在當(dāng)前的變量環(huán)境之中，var的變量的話則會(huì)被設(shè)置成undefined
，所以我們?cè)诼暶髦熬涂梢栽L問(wèn)到var聲明的變量 ，but他是一個(gè)undfined
然后就是執(zhí)行階段了
這個(gè)時(shí)候已經(jīng)完成了對(duì)所有變量的分配，開(kāi)始執(zhí)行代碼
變量對(duì)象什么是變量對(duì)象，變量對(duì)象就是與執(zhí)行上下文相關(guān)得數(shù)據(jù)得一個(gè)作用域，這里邊存儲(chǔ)了在這個(gè)上下文里邊定義的而變量和函數(shù)聲明
函數(shù)聲明的時(shí)候會(huì)在創(chuàng)建階段的時(shí)候聲明一個(gè)函數(shù)指針全局上下文和函數(shù)上下文
故名思與函數(shù)上下文，在函數(shù)被執(zhí)行的時(shí)候創(chuàng)建，那么全局上下文是什么時(shí)候被創(chuàng)建的呢，首先我們要知道一個(gè)概念就是，全局對(duì)象
在一般的函數(shù)里邊全局對(duì)象可以用this引用其屬性，客戶端的話是window對(duì)象
console.log(this);
可以嘗試著去打印一下this，如下圖可以看到，window對(duì)象里邊有很多我們常用或者常見(jiàn)的屬性和方法
當(dāng)然也有一些其他的情況this并不是指向的window對(duì)象，this指向 這個(gè)東西，我們會(huì)在下邊說(shuō)
當(dāng)然js 萬(wàn)物皆對(duì)象不只是說(shuō)說(shuō)
用 instanceof 輸出一下this 會(huì)發(fā)現(xiàn)也是一個(gè)object
console.log(this instanceof Object);
所以說(shuō)全局對(duì)象是一個(gè)object的實(shí)例化對(duì)象
所以說(shuō)說(shuō)白了全局上下文就是在一開(kāi)始就被創(chuàng)建的，全局上下文是由在瀏覽器關(guān)閉或者刷新的時(shí)候才會(huì)銷(xiāo)毀， 然后這個(gè)window對(duì)象其實(shí)就是全局上下文的變量對(duì)象
函數(shù)上下文和上邊所說(shuō)的意思差不多，但是，啊，但是，在函數(shù)上下文中的時(shí)候，函數(shù)里邊的變量對(duì)象是活動(dòng)對(duì)象，他的英文名字叫做 actiation object ，大面上看的意思就是說(shuō)只有進(jìn)入了這個(gè)執(zhí)行上下文中的時(shí)候，也就是說(shuō)執(zhí)行到了這個(gè)函數(shù)的時(shí)候，其中的變量對(duì)象才會(huì)被激活，才會(huì)能被訪問(wèn)，在沒(méi)有執(zhí)行到這個(gè)函數(shù)的時(shí)候，其屬性是不能訪問(wèn)的，這里是和全局上下文不同的。
函數(shù)執(zhí)行過(guò)程
function foo(a) {
var b = 2;
function c() {}
var d = function() {};
b = 3;
}
foo(1);
首先看這段代碼，上邊也說(shuō)了，函數(shù)執(zhí)行有兩個(gè)階段創(chuàng)建階段和執(zhí)行階段
首先進(jìn)如執(zhí)行上下文，進(jìn)入創(chuàng)建階段
首先形參，也就是調(diào)用的方法的時(shí)候傳進(jìn)來(lái)的值，如果你傳了就是有值得，如果沒(méi)傳就是一個(gè)undefined，相應(yīng)得函數(shù)里邊會(huì)有一個(gè)arguments對(duì)象，存放著形參得值，
然后函數(shù)里邊聲明得變量，在創(chuàng)建階段得時(shí)候是沒(méi)有值得，會(huì)被賦值一個(gè)undefined。
函數(shù)聲明會(huì)由名稱(chēng)和對(duì)應(yīng)值組成一個(gè)變量對(duì)象的屬性被創(chuàng)建，也就是上邊說(shuō)的函數(shù)得指針，我是這么理解得，因?yàn)檫@個(gè)變量指向了這個(gè)函數(shù)，如果變量對(duì)象已經(jīng)存在相同名稱(chēng)的屬性，則完全替換這個(gè)屬性
上邊這段代碼在創(chuàng)建階段是這樣得
{
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c(){},
d: undefined
}
然后函數(shù)的而執(zhí)行階段，這個(gè)時(shí)候就該干嘛干嘛了，函數(shù)里邊聲明的變量，賦值等等的會(huì)在這里根據(jù)代碼，修改變量的值
{
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}
得出一個(gè)結(jié)論，函數(shù)的執(zhí)行上下文里邊在初始化的時(shí)候只包含一個(gè)arguments對(duì)象，其他的屬性是沒(méi)有值的，為了直觀一點(diǎn) ，舉個(gè)例子
function foo() {
console.log(a);
a = 1;
}
foo();
function bar() {
a = 1;
console.log(a);
}
bar();
比如說(shuō)這個(gè)在foo函數(shù)的上下文里邊打印a， 但是foo 里邊沒(méi)有用var聲明，下邊的a就找不到所以會(huì)打印一個(gè) a is not defined。
但是第二個(gè)的話會(huì)打印一個(gè)1，因?yàn)榇钶d因之前，全局對(duì)象里邊已經(jīng)有了a屬性
最后就是，在上文提到
c: reference to function c(){},
d: reference to FunctionExpression "d"
在上下文創(chuàng)建的時(shí)候，變量是不會(huì)覆蓋這種聲明的，比如說(shuō)
console.log(foo);
function foo(){
console.log("foo");
}
var foo = 1;
會(huì)打印這個(gè)函數(shù)，但是， 啊，但是，如果是這樣
function foo(){
console.log("foo");
}
var foo = 1;
console.log(foo);
這樣的話就變成了剛才所說(shuō)的賦值了 ，會(huì)打印1
以上是我對(duì)js函數(shù)的執(zhí)行與上下文的一些認(rèn)識(shí)，剛從博客園搬過(guò)來(lái)，有不足的希望指正
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105480.html
摘要：思考題在深入學(xué)習(xí)之詞法作用域和動(dòng)態(tài)作用域中，提出這樣一道思考題思考題一思考題二兩段代碼都會(huì)打印但是還是有些許差異的，本文就詳細(xì)的解析執(zhí)行上下文棧和執(zhí)行上下文的具體變化過(guò)程。 在《深入學(xué)習(xí)js之——執(zhí)行上下文?！分姓f(shuō)過(guò)，當(dāng)JavaScript代碼執(zhí)行一段可執(zhí)行代碼（executable code）時(shí),會(huì)創(chuàng)建對(duì)應(yīng)的執(zhí)行上下文（execution context） 對(duì)于每一個(gè)執(zhí)行上下文，都有...
摘要：圖片轉(zhuǎn)引自的演講和兩個(gè)定時(shí)器中回調(diào)的執(zhí)行邏輯便是典型的機(jī)制。異步編程關(guān)于異步編程我的理解是，在執(zhí)行環(huán)境所提供的異步機(jī)制之上，在應(yīng)用編碼層面上實(shí)現(xiàn)整體流程控制的異步風(fēng)格。 問(wèn)題背景 在一次開(kāi)發(fā)任務(wù)中，需要實(shí)現(xiàn)如下一個(gè)餅狀圖動(dòng)畫(huà)，基于canvas進(jìn)行繪圖，但由于對(duì)于JS運(yùn)行環(huán)境中異步機(jī)制的不了解，所以遇到了一個(gè)棘手的問(wèn)題，始終無(wú)法解決，之后在與同事交流之后才恍然大悟。問(wèn)題的根節(jié)在于經(jīng)典的J...
摘要：深入之繼承的多種方式和優(yōu)缺點(diǎn)深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。對(duì)于解釋型語(yǔ)言例如來(lái)說(shuō)，通過(guò)詞法分析語(yǔ)法分析語(yǔ)法樹(shù)，就可以開(kāi)始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點(diǎn) JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 寫(xiě)在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 但是注意： 這篇文章更像是筆記，哎，再讓我...
摘要：執(zhí)行上下文和執(zhí)行棧是中關(guān)鍵概念之一，是難點(diǎn)之一。理解執(zhí)行上下文和執(zhí)行棧同樣有助于理解其他的概念如提升機(jī)制作用域和閉包等。函數(shù)執(zhí)行完成，函數(shù)的執(zhí)行上下文出棧，并且被銷(xiāo)毀。 前言 如果你是一名 JavaScript 開(kāi)發(fā)者，或者想要成為一名 JavaScript 開(kāi)發(fā)者，那么你必須知道 JavaScript 程序內(nèi)部的執(zhí)行機(jī)制。執(zhí)行上下文和執(zhí)行棧是JavaScript中關(guān)鍵概念之一，是Ja...
摘要：執(zhí)行上下文和執(zhí)行棧是中關(guān)鍵概念之一，是難點(diǎn)之一。理解執(zhí)行上下文和執(zhí)行棧同樣有助于理解其他的概念如提升機(jī)制作用域和閉包等。函數(shù)執(zhí)行完成，函數(shù)的執(zhí)行上下文出棧，并且被銷(xiāo)毀。 前言 如果你是一名 JavaScript 開(kāi)發(fā)者，或者想要成為一名 JavaScript 開(kāi)發(fā)者，那么你必須知道 JavaScript 程序內(nèi)部的執(zhí)行機(jī)制。執(zhí)行上下文和執(zhí)行棧是JavaScript中關(guān)鍵概念之一，是Ja...
閱讀 2284·2021-09-07 09:58
閱讀 3474·2019-08-30 14:07
閱讀 1355·2019-08-29 12:32
閱讀 724·2019-08-29 11:06
閱讀 3747·2019-08-26 18:18
閱讀 3810·2019-08-26 17:35
閱讀 1441·2019-08-26 11:35
閱讀 672·2019-08-26 11:35
