[[403125]]

12.1 作用域

12.1.1 定義

作用域是指在程序中定義變量的區(qū)域，該位置決定了變量的生命周期。簡言之作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量和函數(shù)的可見性和生命周期。

12.1.2 分類

在ES6階段之前，作用域分為兩種：全局作用域和函數(shù)作用域;進行ES6之后，作用域分為：全局作用域、函數(shù)作用域和塊級作用域。

全局作用域

在該作用域中的對象在代碼的任何地方都能訪問，其生命周期伴隨著頁面的生命周期。例如以下內(nèi)容均在全局作用域中。

(1)window上的屬性(在瀏覽器中)

console.log(window.location.href); // 頁面地址 

(2)最外層的函數(shù)

function testFun() { 
    console.log('testFun'); 
} 
 
testFun(); 

(3)最外層定義的變量

let val1 = 10; 
const val2 = 20; 
var val3 = 30; 

(4)未定義直接賦值的變量

val4 = 40; 

(5)js規(guī)定的全局對象的屬性，三個值(Infinity、NaN、undefined)、九個函數(shù)(parseInt、parseFloat、decodeURI、encodeURI……)、一些構(gòu)造器(Date、Array等)、四個用于當做命名空間的對象(Atomics、JSON、Math、Reflect)。

Math.sin(Math.PI / 2);; 
const date = new Date(); 

函數(shù)作用域

在函數(shù)內(nèi)部定義的變量或者函數(shù)，并且定義的變量或者函數(shù)只能在函數(shù)內(nèi)部被訪問。在函數(shù)執(zhí)行結(jié)束之后，函數(shù)內(nèi)部定義的變量會被銷毀。

function test() { 
    var val1 = 10; 
    function fun1() { 
        console.log('fun1'); 
    } 
    console.log(val1); // 10 
    fun1(); // fun1 
} 
test(); 
// console.log(val1); // val1 is not defined 
// fun1(); // fun1 is not defined 

塊級作用域

在ES6階段，出現(xiàn)了塊的概念，新增了塊級作用域，同時新增了let、const命令。塊級作用域簡言之就是使用一對大括號{}包裹的一段代碼，通過單獨的大括號、if塊、while塊、for塊、try/catch/finallyd等都會產(chǎn)生塊級作用域。(對于let和const在塊級作用域的特征可見前端百題斬【002】)

// 單一括號包括的塊 
{} 
 
// if語句 
if (flag) { 
 
} 
 
// for語句 
for (let i = 0; i < 10; i++) { 
 
} 
 
// …… 

12.2 作用域鏈

12.2.1 定義

在每個執(zhí)行上下文的變量環(huán)境中，都包含一個外部引用(成為outer)，用來指向外部的指向上下文。當在查找一個變量的時候，如果在當前的變量環(huán)境中沒有找到，js引擎會繼續(xù)在outer所指向的執(zhí)行上下文中查找，把這個查找的鏈條稱為作用域鏈。(作用域鏈可以理解為一組對象列表，包含 父級和自身的變量對象，因此我們便能通過作用域鏈訪問到父級里聲明的變量或者函數(shù)。)

12.2.2 組成

作用域鏈由兩部分組成，分別是[[scope]]屬性和AO。

[[scope]]屬性：指向父級變量對象和作用域鏈，也就是包含了父級的[[scope]]和AO

AO：自身活動對象，也就是該執(zhí)行上下文中的變量對象。

擴展：如此 [[scope]]包含[[scope]]，便自上而下形成一條 鏈式作用域。

12.2.3 查找規(guī)則

• 從當前的執(zhí)行作用域開始查找變量;
• 如果在當前作用域中找不到該變量，則向上一級進行查找;
• 繼續(xù)向上一層查找，直到最外層的全局作用域。

12.2.4 實戰(zhàn)

下面用一個簡單的例子來演示該作用域鏈，以進一步理解作用域鏈。

var val1 = 10; 
function fun1() { 
    var val2 = 20; 
    function fun2() { 
        var val3 = 30; 
        console.log(val1 + val2 + val3); 
    } 
    fun2(); 
} 
 
fun1(); 

結(jié)合代碼和上述執(zhí)行上下文的流程圖，當執(zhí)行到console.log(val1 + val2 + val3);時會在fun2函數(shù)作用域中找到val3變量，在fun1函數(shù)作用域中找到變量val2，在全局作用域中找到變量val1，最終與該語句相關(guān)的三個變量均獲取到。其中fun2函數(shù)作用域、fun1函數(shù)作用域、全局作用域就構(gòu)成了一條作用域鏈。

本文轉(zhuǎn)載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系執(zhí)鳶者公眾號。