Javascript中上下文和作用域的區(qū)別是什么-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)Javascript中上下文和作用域的區(qū)別是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司專(zhuān)注于河間網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供河間營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，河間網(wǎng)站制作、河間網(wǎng)頁(yè)設(shè)計(jì)、河間網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù)，打造河間網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供河間網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

執(zhí)行上下文(Execution context)

執(zhí)行上下文（簡(jiǎn)稱(chēng)上下文）決定了Js執(zhí)行過(guò)程中可以獲取哪些變量、函數(shù)、數(shù)據(jù)，一段程序可能被分割成許多不同的上下文，每一個(gè)上下文都會(huì)綁定一個(gè)變量對(duì)象（variable object），它就像一個(gè)容器，用來(lái)存儲(chǔ)當(dāng)前上下文中所有已定義或可獲取的變量、函數(shù)等。位于最頂端或最外層的上下文稱(chēng)為全局上下文（global context），全局上下文取決于執(zhí)行環(huán)境，如Node中的global和Browser中的window：

需要注意的是，上下文與作用域（scope）是不同的概念。Js本身是單線(xiàn)程的，每當(dāng)有function被執(zhí)行時(shí)，就會(huì)產(chǎn)生一個(gè)新的上下文，這一上下文會(huì)被壓入Js的上下文堆棧（context stack）中，function執(zhí)行結(jié)束后則被彈出，因此Js解釋器總是在棧頂上下文中執(zhí)行。在生成新的上下文時(shí)，首先會(huì)綁定該上下文的變量對(duì)象，其中包括arguments和該函數(shù)中定義的變量；之后會(huì)創(chuàng)建屬于該上下文的作用域鏈（scope chain），最后將this賦予這一function所屬的Object，這一過(guò)程可以通過(guò)下圖表示：

this

上文提到this被賦予function所屬的Object，具體來(lái)說(shuō)，當(dāng)function是定義在global對(duì)中時(shí)，this指向global；當(dāng)function作為Object的方法時(shí)，this指向該Object：

var x = 1; 
var f = function(){ 
 console.log(this.x);
}
f(); // -> 1

var ff = function(){ 
 this.x = 2;
 console.log(this.x);
}
ff(); // -> 2 
x  // -> 2

var o = {x: "o's x", f: f}; 
o.f(); // "o's x"

Scope chain

上文提到，在function被執(zhí)行時(shí)生成新的上下文時(shí)會(huì)先綁定當(dāng)前上下文的變量對(duì)象，再創(chuàng)建作用域鏈。我們知道function的定義是可以嵌套在其他function所創(chuàng)建的上下文中，也可以并列地定義在同一個(gè)上下文中（如global）。作用域鏈實(shí)際上就是自下而上地將所有嵌套定義的上下文所綁定的變量對(duì)象串接到一起，使嵌套的function可以“繼承”上層上下文的變量，而并列的function之間互不干擾：

var x = 'global'; 
function a(){ 
 var x = "a's x";
 function b(){
 var y = "b's y";
 console.log(x);
 };
 b();
}
function c(){ 
 var x = "c's x";
 function d(){
 console.log(y);
 };
 d();
}
a(); // -> "a's x" 
c(); // -> ReferenceError: y is not defined 
x  // -> "global" 
y  // -> ReferenceError: y is not defined

Closure

如果理解了上文中提到的上下文與作用域鏈的機(jī)制，再來(lái)看閉包的概念就很清楚了。每個(gè)function在調(diào)用時(shí)會(huì)創(chuàng)建新的上下文及作用域鏈，而作用域鏈就是將外層（上層）上下文所綁定的變量對(duì)象逐一串連起來(lái)，使當(dāng)前function可以獲取外層上下文的變量、數(shù)據(jù)等。如果我們?cè)趂unction中定義新的function，同時(shí)將內(nèi)層function作為值返回，那么內(nèi)層function所包含的作用域鏈將會(huì)一起返回，即使內(nèi)層function在其他上下文中執(zhí)行，其內(nèi)部的作用域鏈仍然保持著原有的數(shù)據(jù)，而當(dāng)前的上下文可能無(wú)法獲取原先外層function中的數(shù)據(jù)，使得function內(nèi)部的作用域鏈被保護(hù)起來(lái)，從而形成“閉包”。

看下面的例子：

var x = 100; 
var inc = function(){ 
 var x = 0;
 return function(){
 console.log(x++);
 };
};

var inc1 = inc(); 
var inc2 = inc();

inc1(); // -> 0 
inc1(); // -> 1 
inc2(); // -> 0 
inc1(); // -> 2 
inc2(); // -> 1 
x;  // -> 100

執(zhí)行過(guò)程如下圖所示，inc內(nèi)部返回的匿名function在創(chuàng)建時(shí)生成的作用域鏈包括了inc中的x，即使后來(lái)賦值給inc1和inc2之后，直接在global context下調(diào)用，它們的作用域鏈仍然是由定義中所處的上下文環(huán)境決定，而且由于x是在function inc中定義的，無(wú)法被外層的global context所改變，從而實(shí)現(xiàn)了閉包的效果：

this in closure

我們已經(jīng)反復(fù)提到執(zhí)行上下文和作用域?qū)嶋H上是通過(guò)function創(chuàng)建、分割的，而function中的this與作用域鏈不同，它是由執(zhí)行該function時(shí)當(dāng)前所處的Object環(huán)境所決定的，這也是this最容易被混淆用錯(cuò)的一點(diǎn)。一般情況下的例子如下：

var name = "global"; 
var o = { 
 name: "o",
 getName: function(){
 return this.name
 }
};
o.getName(); // -> "o"

由于執(zhí)行o.getName()時(shí)getName所綁定的this是調(diào)用它的o，所以此時(shí)this == o；更容易搞混的是在closure條件下：

var name = "global"; 
var oo = { 
 name: "oo",
 getNameFunc: function(){
 return function(){
  return this.name;
 };
 }
}
oo.getNameFunc()(); // -> "global"

此時(shí)閉包函數(shù)被return后調(diào)用相當(dāng)于：

getName = oo.getNameFunc(); 
getName(); // -> "global"

換一個(gè)更明顯的例子：

var ooo = { 
 name: "ooo",
 getName: oo.getNameFunc() // 此時(shí)閉包函數(shù)的this被綁定到新的Object
};
ooo.getName(); // -> "ooo"

當(dāng)然，有時(shí)候?yàn)榱吮苊忾]包中的this在執(zhí)行時(shí)被替換，可以采取下面的方法：

var name = "global"; 
var oooo = { 
 name: "ox4",
 getNameFunc: function(){
 var self = this;
 return function(){
  return self.name;
 };
 }
};
oooo.getNameFunc()(); // -> "ox4"

或者是在調(diào)用時(shí)強(qiáng)行定義執(zhí)行的Object：

var name = "global"; 
var oo = { 
 name: "oo",
 getNameFunc: function(){
 return function(){
  return this.name;
 };
 }
}
oo.getNameFunc()(); // -> "global" 
oo.getNameFunc().bind(oo)(); // -> "oo"

看完上述內(nèi)容，你們對(duì)Javascript中上下文和作用域的區(qū)別是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：Javascript中上下文和作用域的區(qū)別是什么-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://bm7419.com/article42/dsdpec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、自適應(yīng)網(wǎng)站、網(wǎng)站改版、商城網(wǎng)站、定制開(kāi)發(fā)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)