列表項目

前言

學習了javascript已經(jīng)很久了，關于這個語言中的這兩個特性也是早已耳熟能詳，但是在實際的使用的過程中或者是遇到相關的問題的時候，還是不能很好的解決。
因此我覺得很有必要深入的學習并且記錄這個問題，以便在今后的學習和使用的過程中回顧。

正文

1. 全局作用域

• 瀏覽器環(huán)境

  所有瀏覽器都支持 window 對象，它表示瀏覽器窗口，JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。
  
  所以，全局變量是 window 對象的屬性，全局函數(shù)是 window 對象的方法，甚至 HTML DOM 的 document 也是 window 對象的屬性之一。
  
  全局變量是JavaScript里生命周期（一個變量多長時間內(nèi)保持一定的值）最長的變量，其將跨越整個程序，可以被程序中的任何函數(shù)方法訪問。
  
  在全局下聲明的變量都會在window對象下，都在全局作用域中，我們可以通過window對象訪問，也可以直接訪問。

• Node環(huán)境

  全局對象是global對象，與window類似，在全局下聲明的所有的變量都在global對象之下，都在全局作用域中，可以通過glocal訪問，也可以通過變量名訪問。

  var name = 'clam'; console.log(name); // clam // 瀏覽器環(huán)境 console.log(window.name); // clam // Node環(huán)境 console.log(global.name); // clam

• 聲明方式產(chǎn)生全局變量

  在js的任何位置，聲明變量的時候沒有使用var關鍵字，這個變量就是全局變量。

  function add(a,b){return sum = a+b; }add(1,2); // 3 console.log(sum); //3/* 相當于以下代碼

*/ var sum; function add(a,b){return sum = a+b; } add(1,2) ; // 3 console.log(sum); ```

全局變量存在于整個函數(shù)的生命周期中，然而其在全局范圍內(nèi)很容易被篡改，我們在使用全局變量時一定要小心，盡量不要使用全局變量。在函數(shù)內(nèi)部聲明變量沒有使用var也會產(chǎn)生全局變量，會為我們造成一些混亂，比如變量覆蓋等。所以，我們在聲明變量的任何時候最好都要帶上var。

全局變量存在于程序的整個生命周期，但并不是通過其引用我們一定可以訪問到全局變量。

2. 詞法作用域

詞法作用域：函數(shù)在定義它們的作用域里運行，而不是在執(zhí)行它們的作用域里運行。也就是說詞法作用域取決于源碼，通過靜態(tài)分析就能確定，因此詞法作用域也叫做靜態(tài)作用域。with和eval除外，所以只能說JS的作用域機制非常接近詞法作用域（Lexical scope）。詞法作用域也可以理解為一個變量的可見性，及其文本表述的模擬值。

var name = "global";function fun() {var name = "clam";return name; } console.log(fun()); // 輸出:clam console.log(name); // 輸出:global

在通常情況下，變量的查詢從最近接的綁定上下文開始，向外部逐漸擴展，直到查詢到第一個綁定，一旦完成查找就結(jié)束搜索。就像上例，先查找離它最近的name="clam"，查詢完成后就結(jié)束了，將第一個獲取的值作為變量的值。

3. 動態(tài)作用域

動態(tài)作用域與詞法作用域相對而言的，不同于詞法作用域在定義時確定，動態(tài)作用域在執(zhí)行時確定，其生存周期到代碼片段執(zhí)行為止。動態(tài)變量存在于動態(tài)作用域中，任何給定的綁定的值，在確定調(diào)用其函數(shù)之前，都是不可知的。

在代碼執(zhí)行時，對應的作用域鏈常常是保持靜態(tài)的。然而當遇到with語句、call方法、apply方法和try-catch中的catch時，會改變作用域鏈的。以with為例，在遇到with語句時，會將傳入的對象屬性作為局部變量來顯示，使其便于訪問，也就是說把一個新的對象添加到了作用域鏈的頂端，這樣必然影響對局部標志符的解析。當with語句執(zhí)行完畢后，會把作用域鏈恢復到原始狀態(tài)。

// demo var name = "global";// 使用with之前 console.log(name); // 輸出:globalwith({name:"jeri"}){console.log(name); // 輸出:jeri }// 使用with之后，作用域鏈恢復 console.log(name); // 輸出:global

在作用域鏈中有動態(tài)作用域時，this引用也會變得更加復雜，不再指向第一次創(chuàng)建時的上下文，而是由調(diào)用者確定。比如在使用apply或call方法時，傳入它們的第一個參數(shù)就是被引用的對象。

function globalThis() {console.log(this); }globalThis(); // 輸出:Window {document: document,external: Object…} globalThis.call({name:"clam"}); // 輸出:Object {name: "clam"} globalThis.apply({name:"clam"},[]); // 輸出:Object {name: "clam"}

因為this引用是動態(tài)作用域，所以在編程過程中一定要注意this引用的變化，及時跟蹤this的變動。

4 .函數(shù)作用域

函數(shù)作用域，顧名思義就是在定義函數(shù)時候產(chǎn)生的作用域，這個作用域也可以稱為局部作用域。和全局作用域相反，函數(shù)作用域一般只在函數(shù)的代碼片段內(nèi)可訪問到，外部不能進行變量訪問。在函數(shù)內(nèi)部定義的變量存在于函數(shù)作用域中，其生命周期隨著函數(shù)的執(zhí)行結(jié)束而結(jié)束。

var name = "global";function fun() {var name = "clam";console.log(name); // 輸出:jeriwith ({name:"with"}) {console.log(name); // 輸出:with}console.log(name); // 輸出:clam }fun();// 不能訪問函數(shù)作用域 console.log(name); // 輸出:global

5. 沒有塊級作用域

不同于其他編程語言，在JavaScript里并沒有塊級作用域，也就是說在for、if、while等語句內(nèi)部的聲明的變量與在外部聲明是一樣的，在這些語句外部也可以訪問和修改這些變量的值.

function fun() {if(0 < 2) {var name = "clam";} console.log(name); // 輸出:clamname = "klay";console.log(name); // 輸出:klay }fun();

6. 作用域鏈

JavaScript里一切皆為對象，包括函數(shù)。函數(shù)對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內(nèi)部屬性。其中一個內(nèi)部屬性是作用域，包含了函數(shù)被創(chuàng)建的作用域中對象的集合，稱為函數(shù)的作用域鏈，它用來保證對執(zhí)行環(huán)境有權(quán)訪問的變量和函數(shù)的有序訪問。

當一個函數(shù)創(chuàng)建后，它的作用域鏈會被創(chuàng)建此函數(shù)的作用域中可訪問的數(shù)據(jù)對象填充。在全局作用域中創(chuàng)建的函數(shù)，其作用域鏈會自動成為全局作用域中的一員。而當函數(shù)執(zhí)行時，其活動對象就會成為作用域鏈中的第一個對象（活動對象：對象包含了函數(shù)的所有局部變量、命名參數(shù)、參數(shù)集合以及this）。在程序執(zhí)行時，Javascript引擎會通過搜索上下文的作用域鏈來解析諸如變量和函數(shù)名這樣的標識符。其會從作用域鏈的最里面開始檢索，按照由內(nèi)到外的順序，直到完成查找，一旦完成查找就結(jié)束搜索。如果沒有查詢到標識符聲明，則報錯。當函數(shù)執(zhí)行結(jié)束，運行期上下文被銷毀，活動對象也隨之銷毀。

var name = 'global';function fun() {console.log(name); // output:globalname = "change";// 函數(shù)內(nèi)部可以修改全局變量console.log(name); // output:change// 先查詢活動對象var age = "18";console.log(age); // output:18 }fun();// 函數(shù)執(zhí)行完畢，執(zhí)行環(huán)境銷毀 console.log(age); // output:Uncaught ReferenceError: age is not defined

7. 閉包

閉包是JavaScript的一大謎團，關于這個問題有很多文章進行講述，然而依然有相當數(shù)量的程序員對這個概念理解不透徹。閉包的官方定義為：一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。

一句話概括就是：閉包就是一個函數(shù)，捕獲作用域內(nèi)的外部綁定。這些綁定是為之后使用而被綁定，即使作用域已經(jīng)銷毀。

• 自由變量

自由變量與閉包的關系是，自由變量閉合于閉包的創(chuàng)建。閉包背后的邏輯是，如果一個函數(shù)內(nèi)部有其他函數(shù)，那么這些內(nèi)部函數(shù)可以訪問在這個外部函數(shù)中聲明的變量（這些變量就稱之為自由變量）。然而，這些變量可以被內(nèi)部函數(shù)捕獲，從高階函數(shù)（返回另一個函數(shù)的函數(shù)稱為高階函數(shù)）中return語句實現(xiàn)“越獄”，以供以后使用。內(nèi)部函數(shù)在沒有任何局部聲明之前（既不是被傳入，也不是局部聲明）使用的變量就是被捕獲的變量。

function makeAdder(captured) {return function(free) {var ret = free + captured;console.log(ret);} }var add10 = makeAdder(10);add10(2); // 輸出:12

從上例可知，外部函數(shù)中的變量captured被執(zhí)行加法的返回函數(shù)捕獲，內(nèi)部函數(shù)從未聲明過captured變量，卻可以引用它。

如果我們再創(chuàng)建一個加法器將捕獲到同名變量captured，但有不同的值，因為這個加法器是在調(diào)用makeAdder之后被創(chuàng)建：

var add16 = makeAdder(16);add16(18); // 輸出:34add10(10); // 輸出:20

• 變量遮蔽

在JavaScript中，當變量在一定作用域內(nèi)聲明，然后在另一個同名變量在一個較低的作用域聲明，會發(fā)生變量的遮蔽。

var name = "clam"; var name = "klay"function glbShadow() {var name = "fun";console.log(name); // 輸出:fun }glbShadow();console.log(name); // 輸出:tom

當在一個變量同一作用域內(nèi)聲明了多次時，最后一次聲明會生效，會遮蔽以前的聲明。

變量聲明的遮蔽很好理解，然而函數(shù)參數(shù)的遮蔽就略顯復雜。

var shadowed = 0;function argShadow(shadowed) {var str = ["Value is",shadowed].join(" ");console.log(str); }argShadow(108); // output:Value is 108argShadow(); // output:Value is

函數(shù)argShadow的參數(shù)shadowed覆蓋了全局作用域內(nèi)的同名變量。即使沒有傳遞任何參數(shù)，仍然綁定的是shadowed，并沒有訪問到全局變量shadowed = 0。

任何情況下，離得最近的變量綁定優(yōu)先級最高。

var shadowed = 0;function varShadow(shadowed) {var shadowed = 123;var str = ["Value is",shadowed].join(" ");console.log(str); }varShadow(108); // output:Value is 123varShadow(); // output:Value is 123

varShadow(108)打印出來的并不是108而是123，即使沒有參數(shù)傳入也是打印的123，先訪問離得最近的變量綁定。

遮蔽變量同樣發(fā)生在閉包內(nèi)部

function captureShadow(shadowed) {console.log(shadowed); // output:108return function(shadowed) {console.log(shadowed); // output:2var ret = shadowed + 1;console.log(ret); // output:3} }var closureShadow = captureShadow(108);closureShadow(2);

在編寫JavaScript代碼時，因為變量遮蔽會使很多變量綁定超出我們的控制，我們應盡量避免變量遮蔽，一定要注意變量命名。

• 典型的誤區(qū)

首先看下面的代碼:

var test = function() {var ret = [];for(var i = 0; i < 5; i++) {ret[i] = function() {return i; }}return ret; }; var test0 = test()[0](); console.log(test0); // 輸出：5var test1 = test()[1](); console.log(test1); //輸出：5

從上面的例子可知，test這個函數(shù)執(zhí)行之后返回一個函數(shù)數(shù)組，表面上看數(shù)組內(nèi)的每個函數(shù)都應該返回自己的索引值，然而并不是如此。當外部函數(shù)執(zhí)行完畢后，外部函數(shù)雖然其執(zhí)行環(huán)境已經(jīng)銷毀，但閉包依然保留著對其中變量綁定的引用，仍然駐留在內(nèi)存之中。當外部函數(shù)執(zhí)行完畢之后，才會執(zhí)行內(nèi)部函數(shù)，而這時內(nèi)部函數(shù)捕獲的變量綁定已經(jīng)是外部函數(shù)執(zhí)行之后的最終變量值了，所以這些函數(shù)都引用的是同一個變量i=5。

// 更加優(yōu)雅的描述方式 for(var i = 0; i < 5; i++) {setTimeout(function() {console.log(i); }, 1000); }// 每隔1秒輸出一個5

按照我們的推斷，上例應該輸出1,2,3,4,5。然而，事實上輸出的是連續(xù)5個5。為什么出現(xiàn)這種詭異的狀況呢？其本質(zhì)上還是由閉包特性造成的，閉包可以捕獲外部作用域的變量綁定。

上面這個函數(shù)片段在執(zhí)行時，其內(nèi)部函數(shù)和外部函數(shù)并不是同步執(zhí)行的，因為當調(diào)用setTimeout時會有一個延時事件排入隊列，等所有同步代碼執(zhí)行完畢后，再依次執(zhí)行隊列中的延時事件，而這個時候 i 已經(jīng) 是5了。

那怎么解決這個問題呢？我們是不是可以在每個循環(huán)執(zhí)行時，給內(nèi)部函數(shù)傳進一個變量的拷貝，使其在每次創(chuàng)建閉包時，都捕獲一個變量綁定。因為我們每次傳參不同，那么每次捕獲的變量綁定也是不同的，也就避免了最后輸出5個5的狀況。實例如下：

for(var i = 0; i < 5; i++) {(function(j) {setTimeout(function() {console.log(j); }, 1000);})(i); }// 輸出：0,1,2,3,4

閉包具有非常強大的功能，函數(shù)內(nèi)部可以引用外部的參數(shù)和變量，但其參數(shù)和變量不會被垃圾回收機制回，常駐內(nèi)存，會增大內(nèi)存使用量，使用不當很容易造成內(nèi)存泄露。但，閉包也是javascript語言的一大特點，主要應用閉包場合為：設計私有的方法和變量。

• 模擬私有變量

從上文的敘述我們知道，變量的捕獲發(fā)生在創(chuàng)建閉包的時候，那么我們可以把閉包捕獲到的變量作為私有變量。

var closureDemo = (function() {var PRIVATE = 0;return {inc:function(n) {return PRIVATE += n;},dec:function(n) {return PRIVATE -= n;}}; })();var testInc = closureDemo.inc(10); //console.log(testInc); // 輸出：10var testDec = closureDemo.dec(7); //console.log(testDec); // 輸出：3closureDemo.div = function(n) {return PRIVATE / n; };var testDiv = closureDemo.div(3); console.log(testDiv); //輸出：Uncaught ReferenceError: PRIVATE is not defined

自執(zhí)行函數(shù)closureDemo執(zhí)行完畢之后，自執(zhí)行函數(shù)作用域和PRIVATE隨之銷毀，但PRIVATE仍滯留在內(nèi)存中，也就是加入到closureDemo.inc和closureDemo.dec的作用域鏈中，閉包也就完成了變量的捕獲。但之后新加入的closureDemo.div并不能在作用域中繼續(xù)尋找到PRIVATE了。因為，函數(shù)只有被調(diào)用時才會執(zhí)行函數(shù)里面的代碼，變量的捕獲也只發(fā)生在創(chuàng)建閉包時，所以之后新加入的div方法并不能捕獲PRIVATE。

• 創(chuàng)建特權(quán)方法

通過閉包我們可以創(chuàng)建私有作用域，那么也就可以創(chuàng)建私有變量和私有函數(shù)。創(chuàng)建私有函數(shù)的方式和聲明私有變量方法一致，只要在函數(shù)內(nèi)部聲明函數(shù)就可以了。當然，既然可以模擬私有變量和私有函數(shù)，我們也可以利用閉包這個特性，創(chuàng)建特權(quán)方法。

(function() {// 私有變量和私有函數(shù)var privateVar = 10;function privateFun() {return false;};// 構(gòu)造函數(shù)MyObj = function() {};// 公有/特權(quán)方法MyObj.prototype.publicMethod = function() {privateVar ++;return privateFun();} })();

上面這個實例創(chuàng)建了一個私有作用域，并封裝了一個構(gòu)造函數(shù)和對應的方法。需要注意的是在上面的實例中，在聲明MyObj這個函數(shù)時，使用的是不帶var的函數(shù)表達式，我們希望產(chǎn)生的是一個全局函數(shù)而不是局部的，不然我們依然在外部無法訪問。所以，MyObj就成為了一個全局變量，能夠在外部進行訪問，我們在原型上定義的方法publicMethod也就可以使用，通過這個方法我們也就可以訪問私有函數(shù)和私有變量了。

總的來說，因為閉包奇特的特性，可以通過它實現(xiàn)一些強大的功能。但，我們在日常編程中，也要正確的使用閉包，要時刻注意回收不用的變量，避免內(nèi)存泄露。

總結(jié)

感謝原文作者，并且附上原文鏈接：JavaScript之作用域與閉包詳解

花費了數(shù)小時來研讀這篇分享，對javascript中的作用域和閉包的問題有了比較深刻的認識和學習。在今后的編碼過程中，希望可以將今天學到的東西及時應用，反復的鞏固。

總結(jié)

以上是生活随笔為你收集整理的javascript中关于作用域和闭包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。