JavaScript 的作用域決定變量可訪問(wèn)範(fàn)圍，分為全局、函數(shù)和塊級(jí)作用域；上下文決定this 的指向，依賴(lài)函數(shù)調(diào)用方式。 1. 作用域包括全局作用域（任何地方可訪問(wèn)）、函數(shù)作用域（僅函數(shù)內(nèi)有效）、塊級(jí)作用域（let 和const 在{} 內(nèi)有效）。 2. 執(zhí)行上下文包含變量對(duì)象、作用域鍊和this 的值，this 在普通函數(shù)指向全局或undefined，在方法調(diào)用指向調(diào)用對(duì)象，在構(gòu)造函數(shù)指向新對(duì)象，也可用call/apply/bind 顯式指定。 3. 閉包是指函數(shù)訪問(wèn)並記住外部作用域變量，常用於封裝和緩存，但可能引發(fā)內(nèi)存洩漏。 4. 上下文丟失常見(jiàn)於回調(diào)函數(shù)，解決方式包括bind、構(gòu)造函數(shù)綁定或使用箭頭函數(shù)。

JavaScript 的作用域和上下文是理解這門(mén)語(yǔ)言行為的關(guān)鍵，但它們經(jīng)常被混淆。作用域決定了變量的可訪問(wèn)性，而上下文則決定了this的指向。掌握這兩者之間的區(qū)別和機(jī)制，有助於寫(xiě)出更清晰、更穩(wěn)定的代碼。

作用域：變量能被訪問(wèn)的範(fàn)圍

在JavaScript 中，作用域決定了一個(gè)變量是否可以被訪問(wèn)到。最常見(jiàn)的三種作用域是：

• 全局作用域：在任何地方都能訪問(wèn)。
• 函數(shù)作用域（局部作用域） ：只在定義它的函數(shù)內(nèi)部有效。
• 塊級(jí)作用域（ES6 引入） ：由let和const定義，在{}內(nèi)部有效。

舉個(gè)例子：

 if (true) {
  let blockVar = 'I am block scoped';
}
console.log(blockVar); // 報(bào)錯(cuò)：blockVar is not defined

這裡用的是let ，所以變量只在if塊內(nèi)存在。如果換成var ，它會(huì)提升到函數(shù)或全局作用域中。

作用域鏈就是當(dāng)你在一個(gè)函數(shù)里訪問(wèn)一個(gè)變量時(shí)，JavaScript 會(huì)先看當(dāng)前作用域有沒(méi)有這個(gè)變量，沒(méi)有就往上找，直到全局作用域?yàn)橹埂?

執(zhí)行上下文與this：函數(shù)運(yùn)行時(shí)的“環(huán)境”

執(zhí)行上下文是JavaScript 執(zhí)行代碼時(shí)的一個(gè)內(nèi)部環(huán)境。每次函數(shù)被調(diào)用時(shí)都會(huì)創(chuàng)建一個(gè)新的執(zhí)行上下文。它包含三個(gè)部分：

1. 變量對(duì)象（VO）
2. 作用域鏈（Scope Chain）
3. this的值

重點(diǎn)在於this ，它的值不是寫(xiě)死的，而是取決於函數(shù)如何被調(diào)用。

常見(jiàn)的幾種情況：

• 普通函數(shù)調(diào)用： this指向全局對(duì)象（瀏覽器中是window ，嚴(yán)格模式下為undefined ）
• 方法調(diào)用： this指向調(diào)用它的對(duì)象
• 構(gòu)造函數(shù)調(diào)用： this指向新創(chuàng)建的對(duì)象
• 使用call / apply / bind ： this被顯式指定

例如：

 const user = {
  name: 'Tom',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // 輸出Hello, Tom，this 指向user 對(duì)象

閉包：記住它所誕生的作用域

閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。簡(jiǎn)單說(shuō)，就是一個(gè)函數(shù)記住了它定義時(shí)所在的環(huán)境。

比如：

 function outer() {
  let count = 0;
  return function inner() {
    count ;
    console.log(count);
  };
}

const counter = outer();
counter(); // 輸出1
counter(); // 輸出2

inner函數(shù)形成了一個(gè)閉包，保留了對(duì)count變量的引用。即使outer已經(jīng)執(zhí)行完畢， count也不會(huì)被垃圾回收機(jī)制清除。

閉包常用於封裝數(shù)據(jù)、緩存、模塊化等場(chǎng)景，但也容易造成內(nèi)存洩漏，使用時(shí)要注意清理無(wú)用引用。

上下文丟失問(wèn)題：常見(jiàn)坑點(diǎn)

在實(shí)際開(kāi)發(fā)中， this的上下文很容易“丟失”，尤其是在回調(diào)函數(shù)中或者事件處理中。

例如：

 const button = document.querySelector('button');
button.addEventListener('click', user.greet); // 報(bào)錯(cuò)，this.name 是undefined

這時(shí)候， greet方法作為回調(diào)傳入， this不再指向user 。解決辦法是綁定上下文：

• 使用.bind(this)
• 在構(gòu)造函數(shù)中綁定
• 使用箭頭函數(shù)（因?yàn)榧^函數(shù)不綁定自己的this ）

 button.addEventListener('click', user.greet.bind(user));

基本上就這些。作用域和上下文雖然概念抽象，但只要結(jié)合具體調(diào)用方式去理解，其實(shí)並不難。關(guān)鍵是要多觀察函數(shù)是怎麼被調(diào)用的，以及變量在哪一層被定義。

以上是高級(jí)JavaScript範(fàn)圍和上下文的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！