javascript系列--javascript深入理解--作用域，作用域鏈，閉包的面試題解

anRui 發布于2019-08-23 17:50 / 784人閱讀

摘要：一概要作用域和作用域鏈是中非常重要的特性，關系到理解整個體系，閉包是對作用域的延伸，其他語言也有閉包的特性。作用域鏈的作用他保證了變量對象的有序訪問。

一、概要

作用域和作用域鏈是js中非常重要的特性，關系到理解整個js體系，閉包是對作用域的延伸，其他語言也有閉包的特性。

那什么是作用域？作用域指的是一個變量和函數的作用范圍。

1、js中函數內聲明的所有變量在函數體內始終是可見的；

2、在ES6中有全局作用域和局部作用域，但是沒有沒有塊級作用域（catch只在其內部生效）；

3、局部變量的優先級高于全局變量。

二、作用域

我們來舉幾個栗子：

2.1變量提升

var scope="global";
function scopeTest(){
    console.log(scope);
    var scope="local"  
}
scopeTest(); //undefined

上面的代碼輸出是undefined，這是因為局部變量scope變量提升了,等效于下面

var scope="global";
function scopeTest(){
    var scope;
    console.log(scope);
    scope="local"  
}
scopeTest(); //undefined

注意，如果在局部作用域中忘記var，那么變量就被聲明為全局變量。

var scope="global";
function scopeTest(){
    console.log(scope);
    scope="local"  
}
scopeTest(); //global
var scope="global";
function scopeTest(){
    scope="local" 
    console.log(scope);
}
scopeTest(); //local

2.2沒有塊級作用域

和我們其他常用語言不同的是，js中沒有塊級作用域

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();    // 3
data[1]();    // 3
data[2]();    // 3

2.3作用域鏈

每個函數都有自己的執行上下文環境，當代碼在這個環境中執行時候，會創建變量對象的作用域鏈，

那什么是作用域鏈？作用域鏈式是一個對象列表。

作用域鏈的作用？他保證了變量對象的有序訪問。

作用域鏈開始的地方：當前代碼執行環境的變量對象，常被稱之為“活躍對象”（AO），變量的查找會從第一個鏈的對象開始，如果對象中包含變量屬性，那么就停止查找，如果沒有就會繼續向上級作用域查找，直到找到全局對象中，如果找不到就會報ReferenceError。

2.4閉包

function createClosure(){
    var name = "jack";
    return {
        setStr:function(){
            name = "rose";
        },
        getStr:function(){
            return name + ":hello";
        }
    }
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello

上面在函數中反悔了兩個閉包，這兩個閉包都維持著對外部作用域的引用，因此不管在哪調用都是能夠訪問外部函數中的變量。在一個函數內部定義的函數，閉包中會將外部函數的自由對象添加到自己的作用域中，所以可以通過內部函數訪問外部函數的屬性，這就是js模擬私有變量的一種方式。

注意：由于閉包會額外的附帶函數的作用域（內部匿名函數攜帶外部函數的作用域），因此，閉包會比其他函數多占用些內存空間，過度使用會導致內存占用增加。

三、閉包面試題解

由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起了一個副作用，如果內部函數在一個循環中，那么變量的值始終為最后一個值。

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();    // 3
data[1]();    // 3
data[2]();    // 3

如果想強制返回逾期結果，怎么整？

方法一：立即執行函數

for (var i = 0; i < 3; i++) {
    (function(num) {
        setTimeout(function() {
            console.log(num);
        }, 1000);
    })(i);
}
// 0
// 1
// 2

方法二：返回一個匿名函數賦值

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (num) {
      return function(){
          console.log(num);
      }
  })(i);
}

data[0]();    // 0
data[1]();    // 1
data[2]();    // 2

無論上是立即執行函數還是返回一個匿名函數賦值，原理上都是因為變量的按值傳遞，所以會將變量i的值賦值給實參num，在匿名函數的內部又創建了一個用于訪問num的匿名函數，這樣每一個函數都有一個num的副本，互不影響。

方法三：使用es6的let

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

解釋一下原理：

var data = [];// 創建一個數組data;

// 進入第一次循環
{

let i = 0; // 注意：因為使用let使得for循環為塊級作用域
           // 此次 let i = 0 在這個塊級作用域中，而不是在全局環境中
data[0] = function() {
    console.log(i);
};

}

循環時，let聲明了i，所以整個塊是塊級作用域，那么data[0]這個函數就成了一個閉包，這里用{}表述，只是希望通過它來說明let存在的時候，這個for循環塊是塊級作用域，而不是全局作用域。

上面的塊級作用域，就像函數作用域一樣，寒暑表執行完畢，其中的變量會被銷毀，但是因為這個代碼塊中存在一個閉包，閉包的作用域鏈中引用著塊級作用域，所以在閉包被調用之前，這個塊級作用域內部的變量不會被銷毀。

// 進入第二次循環
{

let i = 1; // 因為 let i = 1 和上面的 let i = 0     
           // 在不同的作用域中，所以不會相互影響
data[1] = function(){
     console.log(i);
};

}
當執行data[1]()時，進入下面的執行環境。

{

 let i = 1; 
 data[1] = function(){
      console.log(i);
 };

}

在上面這個執行環境中，它會首先尋找該執行環境中是否存在i，沒有找到，就沿著作用域鏈繼續向上找，在其所在的塊級作用域執行環境中，找到i=1，于是輸出1。



## 四、思考題

代碼1：

var scope = "global scope";
function checkscope(){

var scope = "local scope";
function f(){
    return scope;
}
return f;

}

checkscope()(); //local scope

代碼2：

var scope = "global scope";
function checkscope(){

var scope = "local scope";
function f(){
    return scope;
}
return f;

}

var foo = checkscope();
foo(); //local scope

## 四、參考

1、https://segmentfault.com/a/1190000000618597

2、https://www.cnblogs.com/zhuzhenwei918/p/6131345.html

GPU云服務器云服務器 javascript作用域鏈作用域鏈 javascript深入系列 javascript的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104232.html

【進階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...

alanoddsoff 2019-08-23 13:47 評論0 收藏0
【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
JavaScript中的閉包

摘要：閉包引起的內存泄漏總結從理論的角度將由于作用域鏈的特性中所有函數都是閉包但是從應用的角度來說只有當函數以返回值返回或者當函數以參數形式使用或者當函數中自由變量在函數外被引用時才能成為明確意義上的閉包。文章同步到github js的閉包概念幾乎是任何面試官都會問的問題,最近把閉包這塊的概念梳理了一下,記錄成以下文章。什么是閉包我先列出一些官方及經典書籍等書中給出的概念,這些概念雖然...

HmyBmny 2019-08-21 17:07 評論0 收藏0
【進階2-1期】深入淺出圖解作用域鏈和閉包

摘要：本期推薦文章從作用域鏈談閉包，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。推薦理由這是一篇譯文，深入淺出圖解作用域鏈，一步步深入介紹閉包。作用域鏈的頂端是全局對象，在全局環境中定義的變量就會綁定到全局對象中。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周開始前端進階的第二期，本周的主題是作用域閉包，今天是第6天。本...

levius 2019-08-23 13:47 評論0 收藏0
JS 閉包(closure)

摘要：對數組函數而言，相當于產生了個閉包。關于對象在閉包中使用對象也會導致一些問題。不過，匿名函數的執行環境具有全局性，因此其對象通常指向。由于聲明函數時與聲明函數時的值是不同的，因此閉包與閉包貌似將會表示各自不同的值。這幾天看到閉包一章，從工具書到各路大神博客，都各自有著不同的理解，以下我將選擇性的抄（咳咳，當然還是會附上自己理解的）一些大神們對閉包的原理及其使用文章，當作是自己初步理解...

nihao 2019-08-21 11:43 評論0 收藏0