建站
咨詢
售后
建站咨詢
新聞中心
本文嘗試闡述Javascript中的上下文與作用域背后的機制，主要涉及到執(zhí)行上下文（execution context）、作用域鏈（scope chain）、閉包（closure）、this等概念。
網(wǎng)站制作、網(wǎng)站設計的開發(fā)，更需要了解用戶，從用戶角度來建設網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián)公司多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡公司，打造的就是網(wǎng)站建設產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)公司，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務。
Execution context
執(zhí)行上下文（簡稱上下文）決定了Js執(zhí)行過程中可以獲取哪些變量、函數(shù)、數(shù)據(jù)，一段程序可能被分割成許多不同的上下文，每一個上下文都會綁定一個變 量對象（variable object），它就像一個容器，用來存儲當前上下文中所有已定義或可獲取的變量、函數(shù)等。位于最頂端或最外層的上下文稱為全局上下文（global context），全局上下文取決于執(zhí)行環(huán)境，如Node中的global和Browser中的window：
需要注意的是，上下文與作用域（scope）是不同的概念。Js本身是單進程的，每當有function被執(zhí)行時，就會產(chǎn)生一個新的上下文，這一上 下文會被壓入Js的上下文堆棧（context stack）中，function執(zhí)行結(jié)束后則被彈出，因此Js解釋器總是在棧頂上下文中執(zhí)行。在生成新的上下文時，首先會綁定該上下文的變量對象，其中 包括arguments和該函數(shù)中定義的變量；之后會創(chuàng)建屬于該上下文的作用域鏈（scope chain），***將this賦予這一function所屬的Object，這一過程可以通過下圖表示：
this
上文提到this被賦予function所屬的Object，具體來說，當function是定義在global對中時，this指向global；當function作為Object的方法時，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"
上文提到，在function被執(zhí)行時生成新的上下文時會先綁定當前上下文的變量對象，再創(chuàng)建作用域鏈。我們知道function的定義是可以嵌套 在其他function所創(chuàng)建的上下文中，也可以并列地定義在同一個上下文中（如global）。作用域鏈實際上就是自下而上地將所有嵌套定義的上下文所 綁定的變量對象串接到一起，使嵌套的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
如果理解了上文中提到的上下文與作用域鏈的機制，再來看閉包的概念就很清楚了。每個function在調(diào)用時會創(chuàng)建新的上下文及作用域鏈，而作用域 鏈就是將外層（上層）上下文所綁定的變量對象逐一串連起來，使當前function可以獲取外層上下文的變量、數(shù)據(jù)等。如果我們在function中定義 新的function，同時將內(nèi)層function作為值返回，那么內(nèi)層function所包含的作用域鏈將會一起返回，即使內(nèi)層function在其他 上下文中執(zhí)行，其內(nèi)部的作用域鏈仍然保持著原有的數(shù)據(jù)，而當前的上下文可能無法獲取原先外層function中的數(shù)據(jù)，使得function內(nè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í)行過程如下圖所示，inc內(nèi)部返回的匿名function在創(chuàng)建時生成的作用域鏈包括了inc中的x，即使后來賦值給inc1和inc2之后，直接在global context下調(diào)用，它們的作用域鏈仍然是由定義中所處的上下文環(huán)境決定，而且由于x是在function inc中定義的，無法被外層的global context所改變，從而實現(xiàn)了閉包的效果：
this in closure
我們已經(jīng)反復提到執(zhí)行上下文和作用域?qū)嶋H上是通過function創(chuàng)建、分割的，而function中的this與作用域鏈不同，它是由**執(zhí)行該function時**當前所處的Object環(huán)境所決定的，這也是this最容易被混淆用錯的一點。一般情況下的例子如下：
- var name = "global";
- var o = {
- name: "o",
- getName: function(){
- return this.name
- }
- };
- o.getName(); // -> "o"
由于執(zhí)行o.getName()時getName所綁定的this是調(diào)用它的o，所以此時this == o；更容易搞混的是在closure條件下：
- var name = "global";
- var oo = {
- name: "oo",
- getNameFunc: function(){
- return function(){
- return this.name;
- };
- }
- }
- oo.getNameFunc()(); // -> "global"
此時閉包函數(shù)被return后調(diào)用相當于：
- getName = oo.getNameFunc();
- getName(); // -> "global"
換一個更明顯的例子：
- var ooo = {
- name: "ooo",
- getName: oo.getNameFunc() // 此時閉包函數(shù)的this被綁定到新的Object
- };
- ooo.getName(); // -> "ooo"
當然，有時候為了避免閉包中的this在執(zhí)行時被替換，可以采取下面的方法：
- var name = "global";
- var oooo = {
- name: "ox4",
- getNameFunc: function(){
- var self = this;
- return function(){
- return self.name;
- };
- }
- };
- oooo.getNameFunc()(); // -> "ox4"
或者是在調(diào)用時強行定義執(zhí)行的Object：
- var name = "global";
- var oo = {
- name: "oo",
- getNameFunc: function(){
- return function(){
- return this.name;
- };
- }
- }
- oo.getNameFunc()(); // -> "global"
- oo.getNameFunc().bind(oo)(); // -> "oo"
總結(jié)
Js是一門很有趣的語言，由于它的很多特性是針對HTML中DOM的操作，因而顯得隨意而略失嚴謹，但隨著前端的不斷繁榮發(fā)展和Node的興 起，Js已經(jīng)不再是“toy language”或是jQuery時代的“CSS擴展”，本文提到的這些概念無論是對新手還是從傳統(tǒng)Web開發(fā)中過度過來的Js開發(fā)人員來說，都很容易 被混淆或誤解，希望本文可以有所幫助。
寫這篇總結(jié)的原因是我在Github上分享的Learn javascript in one picture，剛開始有人質(zhì)疑這只能算是一張語法表（syntax cheat sheet），根本不會涉及更深層的閉包、作用域等內(nèi)容，但是出乎意料的是這個項目竟然獲得3000多個star，所以不能虎頭蛇尾，以上。
網(wǎng)站題目：圖文并茂詳解Javascript上下文與作用域
轉(zhuǎn)載源于：http://www.5511xx.com/article/dhojgci.html
