作用域那點事

作用域

用來宣告，訪問和修改變數的背景關系，定義了變數的訪問權限和查找機制，

作用域分類：

• 全域作用域 (整個JS運行環境，最頂層作用域，其宣告的函式、變數等都是全域的)
• 函式作用域 (函式執行時會創建作用域)
• 塊級作用域 ({ }大括號在 let、const關鍵字特性產生的作用域)

JS屬于編譯語言，逐行執行；編譯的程序分為三部分：

• 分詞/詞法分析，
• 決議/把詞法分析轉換成AST(抽象語法樹)，
• 代碼生成/把AST轉成可執行代碼，

示例：

var a = 1; 

編譯程序：

• 分成var a、a=1；兩部分進行分析，
• 查看當前作用域是否有a，如果有就忽略，如果沒有就創建變數a，
  (var、function宣告的變數會在當前作用域下進行變數提升)
• 賦值操作，首先查看當前作用域下是否有變數a，要是不存在變數a就會報錯，要是存在進行賦值；其次如果是作用域嵌套的情況，當前作用域下不存在變數a，就會向外層作用域查找，直到全域作用域，如果不存在變數a就會報錯，

執行程序：

• 執行var a陳述句進行查找a變數，這個程序叫做LHS(左側為查找目標)，
• 執行a = 1賦值操作，程序叫做RHS(右側為目標查找的目的)，
• 進行RHS必然會進行LHS，

注意：取值和賦值都是RHS，變數宣告和形參是LHS；RHS和LHS發生在執行程序中，

示例：

function foo(a) {
    var b = a;
    return a + b
}
var c = foo(2)

3處LHS查詢：

• var c 宣告
• var b 宣告
• 形參 a 宣告

4處RHS查詢：

• foo(2) 取值foo并執行
• var b = a陳述句，取值a
• a + b陳述句，取值a
• a + b陳述句，取值b

作用域嵌套：

當一個塊或函式嵌套在另一個塊或函式里，就發生了作用域嵌套，

作用域嵌套下變數的查找規則：

查找變數時如果當前作用域里沒有找到，就會向外層作用域查找，直到找到該變數或到全域作用域為止，如果沒找到就會報錯，

作用域嵌套查找變數的特點：

從內往外，LHS和RHS都會在當前作用域進行，LHS只有當前作用域下沒有找到所需變數，才會向外層作用域查找，

變數提升：

在編譯階段會對所有的var、function關鍵字宣告的變數進收集，把收集的變數移動到當前作用域的最頂層，這個程序叫做變數提升，

特點：

• 只有宣告本身會被提升，而賦值或其他運行邏輯會留在原地，
• 每個作用域都會對var、function關鍵字宣告的變數進行提升，
• 函式宣告賦值給var宣告的變數，這樣的函式運算式只有var變數會提升，函式宣告不會提升，
• 變數提升發生在編譯階段，賦值、取值等其他運行邏輯發生在執行階段，
• 函式和變數重名，提升之后函式優先，會以函式為主，

提示：

1. var、function關鍵字在全域作用域下宣告的變數是全域變數，同時還是全域作用域的屬性；而不用var宣告的變數只是全域作用域下的屬性，

2.var在函式作用域下宣告的變數只是當前作用域的私有變數，并不是函式的屬性，

/**
 * var fn進行提升，值為undefined，
 * function boo 不會進行提升，因為boo成為了賦值操作運算式的一部分，
 */
console.log(fn) //undefined
console.log(fun) //ReferenceError: boo is not defined
var fn = function fun() {
    console.log(1)
}

變數提升對LHS的影響：

• 變數提升發生在編譯程序，一個沒有用var宣告的變數不會進行變數提升，在該變數之前進行RHS，會報ReferenceError例外is not defined，
• 用var宣告的變數會進行變數提升，提升到當前作用域的最頂部，其值是undefined，因此在變數前進行取值不會報錯，
• 非嚴格模式下對沒有用var關鍵字宣告的變數陳述句之前進行RHS，報ReferenceError例外，如果是之后進行RHS，會先進行LHS，如果當前作用域還是全域作用域下都沒有找到，會自動創建一個全域變數并回傳，嚴格模式下LHR查詢失敗時，并不會創建一個全域變數并回傳，報ReferenceError例外，
• 變數提升發生在編譯程序，賦值/取值發生在執行程序，

示例：

/**
 * 通常認為代碼是逐行執行，而下面的代碼輸出的結果是2，造成這個原因有兩方面：
 * 1. var宣告的變數會進行變數提升，變數a被提升到當前作用域最頂部，其值是undefined，
 * 2. 當代碼從上至下執行時，執行a=1陳述句，a進行了RHS會觸發LHS，此時a因變數提升被初始化，
 * LHS就查找到了變數a并進行了賦值，下一個陳述句var a;已經進行過了初始化和賦值，
 * 因此最終得到結果是2，
 */

a = 1;
var a;
console.log(a) //2

變數的訪問權限問題：

• 塊級作用域里的變數外層作用域是無法訪問，變數是指由let，const，
• 函式的形參和變數，內部函式是外層作用域無法訪問，屬于區域變數，變數是指由let，const，var，function宣告的，

詞法作用域

簡單的說就是撰寫代碼時變數、函式、塊級作用域書寫代碼時的樣子，代碼寫成什么樣就是什么樣，

示例：

/**
 * 箭頭函式自身沒有this，那么this如何查找？
 * 箭頭函式里的this其實是定義時所在的上層作用域的this，
 */
 
<-- 此次是全域作用域，瀏覽器下全域作用域的this指的是全域物件window -->

setTimeout(() => {
    console.log('這里的this是::', this) //window
}, 0)

/**
 * 作用域嵌套，foo bar執行后會創建函式作用域，
 * a、b、c的RHS依據作用域嵌套規則進行查找，console.log列印出結果，
 * 函式無論在哪里呼叫，如何被呼叫，函式作用域都只由函式被宣告時所處位置決定，
 */

function foo(a) {
    var b = a * 2
    function bar(c) {
        console.log(a, b, c) // 2 4 12
    }
    bar(b * 3)
}
foo(2)

提示：示例體現出了作用域的定義就是變數的查找機制，

理解詞法作用域的作用：

更加直觀的理解代碼的結構及執行，結合各個API的語法特點，減少開發時的錯誤，

修改詞法作用域：

示例：

/**
 * eval把傳入的str當成代碼執行，修改了當前的詞法作用域，導致編譯器誤以為var b = 2好像就是在那個位置一樣，
 * console.log(b,a)執行對b進行RHS查找，發現了foo作用域里有b的宣告就直接取值；參考了錯誤，
 * 其實應該參考全域的b；因此eval并不安全，
 */
var b = 1
function foo(str, a) {
    eval(str)
    console.log(b, a) //2，3 
}
foo('var b = 2', 3)

//嚴格模式下無效
var b = 1
function foo(str, a) {
    "use strict"
    eval(str)
    console.log(b, a)//1，3
}
foo('var b = 2', 3)

/**
 * with決議引數obj，在新創建的作用域下進行obj.a=2的操作，
 */
function foo(obj) {
    with (obj) {
        a = 2
    }
}

var obj = {
    a: 1
}

foo(obj)
console.log(obj.a) //2

/**
 * with決議引數obj，obj沒有a屬性，獲取一個物件不存在的屬性得到的是undefined，
 * a=2進行RHS，觸發LHS查找，給全域物件添加了a屬性，
 */
function foo(obj) {
    with (obj) {
        a = 2
    }
}

var obj = {}

foo(obj)
console.log(obj.a) //undefined
console.log(a) //2

/**
 * with決議引數obj，var a是當前新作用域下的私有變數，無法進行obj.a的賦值操作，同時外界無法訪問，
 */
function foo(obj) {
    with (obj) {
        var a = 2
    }
}

var obj = {
    a: 1
}

foo(obj)
console.log(obj.a) //1

提示：eval、with陳述句應該避免使用，會破壞詞法作用域同時得不到編譯器的性能優化，

函式作用域

當宣告一個函式時都會為其自身創建詞法作用域，屬于這個函式里的全部變數只能在自身函式作用域范圍及其嵌套作用域內使用、復用，外界無法訪問，

示例：

/**
 * 函式里宣告的變數只能在自身函式作用域范圍及其嵌套作用域內里使用、復用，外界無法訪問，
 */

function fun() {
    var a = 1;
    function funs() {
        let b = 2
        console.log(++a)
        if (a > 1) {
            console.log(b)
        }
    }
    funs()
    console.log(b)
}
fun()

提示：示例體現出作用域對變數的HSL是從里往外查找，私有變數的可視范圍；同時說明了函式具有封裝性，

函式封裝性的意義：

可以根據需求向外界暴露API，同時避免私有變數與外界同名變數沖突，

示例：

var b = 5
function fun(a) {
    var b = funs(a * 3);
    function funs(b) {
        return b - 1
    }
    console.log(b)
}
function funs(b) {
    return b + 1
}
fun(2)
funs(b)
console.log(b)

函式宣告與函式運算式的區別：

函式運算式可以是匿名的，函式宣告則不可以省略函式名，

匿名函式的缺點：

• 匿名函式在堆疊追蹤中不會顯示有意義的函式名，不利于除錯，
• 匿名函式參考自身時只能通過arguments.callee參考，

立即執行函式：

/**
 * 立即執行函式 IIFE，把一個函式包括在()大括號里的函式運算式，
 * IIFE可以是匿名的，如果有函式名，只能在當前立即執行函式體里使用函式名，
 * @ globel 給IIFE傳遞引數(可選)
 */

(function (globel) {
    var a = 1;
    console.log(globel)
})(window)

提示：通常在第三方庫中更多使用匿名函式對代碼進行模塊化，充分利用了函式的封裝特性，

閉包特點：

• 函式作用域才會產生閉包，
• 一個函式的內部函式被被外界參考，導致當前作用域無法銷毀，當前作用域可以重復使用，

提示：閉包核心其實就是不會被銷毀的作用域

塊級作用域：
let、 const宣告的變數會產生暫存性死區系結到當前的{...}或for回圈條件塊里，從而產生塊作用域；const表示常量不可修改，如果要試圖修改一個基本型別的const宣告的變數值會引發報錯，而Object型別的值是修改其參考地址會報錯，

本篇文章當前版本：

v 1.2.0 新增函式作用域
v 1.1.0 新增詞法作用域
v 1.0.0 作用域概念

部分概念參考：

《你不知道的JavaScript》

標籤：JavaScript

上一篇：前端面試題整理——VUE雙向系結原理

下一篇：前端面試題整理——手寫AJAX