JS `Context` (V8) 概念：理解全局对象、作用域链与执行环境

各位观众，大家好！我是今天的主讲人，很高兴和大家一起聊聊JavaScript中一个非常核心，但有时候又让人觉得有点玄乎的概念——Context (V8引擎中的执行上下文)。别被这个名字吓到，其实它就像你在一个剧组里扮演的角色和所处的场景，理解了它，你就明白代码为什么这样跑，变量为什么这样用，以及this为什么有时候指向这个，有时候又指向那个。

1. 什么是Context？剧组里的你，和你的戏服、台词本

想象一下，你是一个演员，要在一个剧组里演戏。Context就像你在剧组里的身份，包括：

全局对象 (Global Object): 整个剧组的大环境，比如道具、场景、公共休息区。在浏览器里，通常是window；在Node.js里，通常是global。
词法环境 (Lexical Environment): 你的个人专属化妆间，里面有你的戏服（变量声明）、台词本（函数声明），以及剧本标注（作用域链）。
变量环境 (Variable Environment): 类似于词法环境，但是它只存储var声明的变量和函数声明。
This绑定 (This Binding): 你在这个场景里扮演的角色，决定了你和其他演员（对象）之间的关系。
作用域链 (Scope Chain): 如果你找不到你的台词本，你可以问你的化妆师（内部词法环境），如果化妆师也不知道，可以问导演（外部词法环境），直到找到为止。

简而言之，Context就是JavaScript代码执行的环境信息，它包含了代码执行所需要的各种东西，变量、函数、this，以及决定了它们之间如何相互作用的所有规则。V8引擎在执行代码之前，会创建一个Context，然后根据这个Context来执行代码。

2. 全局对象：剧组的“大本营”

全局对象是所有JavaScript代码都能访问到的一个对象。它提供了一些内置的属性和方法，比如console、setTimeout、Math等等。

浏览器环境:

console.log(window.innerWidth); // 获取浏览器窗口的宽度
window.alert("Hello, world!"); // 弹出一个警告框

Node.js环境:

console.log(global.process.version); // 获取Node.js的版本
global.setTimeout(() => {
  console.log("Hello after 1 second!");
}, 1000);

注意，在严格模式下，全局作用域中的this会是undefined，而不是全局对象。

"use strict";
console.log(this); // undefined (在浏览器里非严格模式下是window)

3. 词法环境和变量环境：你的专属化妆间

词法环境和变量环境都是用来存储变量和函数声明的地方，它们之间的区别在于：

特性	词法环境 (Lexical Environment)	变量环境 (Variable Environment)
存储内容	`let`、`const`声明的变量和函数声明	`var`声明的变量和函数声明
创建时间	代码执行阶段	代码编译阶段
初始化	`let`和`const`声明的变量不会被初始化，直到声明语句被执行	`var`声明的变量会被初始化为`undefined`
是否允许重复声明	同一个作用域内不允许重复声明	同一个作用域内允许重复声明，后面的声明会覆盖前面的声明

让我们看几个例子：

function example() {
  var a = 1;
  let b = 2;
  const c = 3;

  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3

  if (true) {
    var a = 10; // 函数作用域，覆盖了外部的a
    let b = 20; // 块级作用域，只在if语句块内有效
    const c = 30; // 块级作用域，只在if语句块内有效

    console.log(a); // 10
    console.log(b); // 20
    console.log(c); // 30
  }

  console.log(a); // 10 (因为var声明的a在函数作用域内被覆盖了)
  console.log(b); // 2 (let声明的b在if语句块之外仍然是2)
  console.log(c); // 3 (const声明的c在if语句块之外仍然是3)
}

example();

在这个例子中，var声明的变量a具有函数作用域，所以在if语句块内重新赋值会影响到函数外部的a。而let和const声明的变量b和c具有块级作用域，所以在if语句块内重新赋值不会影响到函数外部的b和c。

再看一个关于提升的例子：

console.log(x); // undefined (var声明的变量会被提升到作用域顶部，但值为undefined)
console.log(y); // ReferenceError: Cannot access 'y' before initialization (let声明的变量不会被提升)

var x = 5;
let y = 10;

var声明的变量x会被提升到作用域顶部，所以在声明之前访问它不会报错，但它的值是undefined。而let声明的变量y不会被提升，所以在声明之前访问它会报错。

4. This绑定：你在剧中的角色

this关键字指向的是函数执行时的上下文对象。它的值取决于函数是如何被调用的，而不是函数是如何被定义的。这是JavaScript中最容易让人困惑的地方之一。

默认绑定 (Default Binding): 在非严格模式下，如果函数是独立调用的，那么this会指向全局对象（浏览器中是window，Node.js中是global）。在严格模式下，this会是undefined。

function foo() {
  console.log(this);
}

foo(); // 在浏览器中，非严格模式下是window，严格模式下是undefined

隐式绑定 (Implicit Binding): 如果函数是作为某个对象的方法调用的，那么this会指向这个对象。

const obj = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

obj.greet(); // Hello, Alice! (this指向obj)

显式绑定 (Explicit Binding): 可以使用call、apply或bind方法来显式地指定this的值。

function greet(greeting) {
  console.log(greeting + ", " + this.name + "!");
}

const obj = {
  name: "Bob"
};

greet.call(obj, "Hi"); // Hi, Bob! (this指向obj)
greet.apply(obj, ["Hey"]); // Hey, Bob! (this指向obj)

const greetBob = greet.bind(obj);
greetBob("Hello"); // Hello, Bob! (this指向obj)

New绑定 (New Binding): 如果函数是作为构造函数调用的（使用new关键字），那么this会指向新创建的对象。

function Person(name) {
  this.name = name;
}

const person = new Person("Charlie");
console.log(person.name); // Charlie (this指向新创建的person对象)

箭头函数: 箭头函数没有自己的this，它会继承父作用域的this。

const obj = {
  name: "David",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, " + this.name + "!");
    }, 1000);
  }
};

obj.greet(); // Hello, David! (this指向obj，因为箭头函数继承了obj.greet的this)

理解this绑定的规则是编写JavaScript代码的关键。记住，this的值取决于函数是如何被调用的，而不是函数是如何被定义的。

5. 作用域链：找不到台词本？问问你的化妆师和导演

作用域链是一个指向父作用域的指针列表。当JavaScript引擎在当前作用域中找不到某个变量时，它会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。

let globalVar = "Global";

function outerFunction() {
  let outerVar = "Outer";

  function innerFunction() {
    let innerVar = "Inner";

    console.log(innerVar);    // Inner (在innerFunction作用域中找到)
    console.log(outerVar);    // Outer (在outerFunction作用域中找到)
    console.log(globalVar);   // Global (在全局作用域中找到)
  }

  innerFunction();
}

outerFunction();

在这个例子中，innerFunction的作用域链包含了innerFunction的词法环境、outerFunction的词法环境和全局词法环境。当innerFunction访问outerVar时，它首先在自己的作用域中查找，找不到，然后沿着作用域链向上查找，在outerFunction的作用域中找到了outerVar。

6. 执行上下文的生命周期

执行上下文的生命周期包括三个阶段：

创建阶段 (Creation Phase):
- 创建词法环境和变量环境。
- 创建作用域链。
- 确定this的值。
执行阶段 (Execution Phase):
- 执行代码，变量赋值，函数调用等。
销毁阶段 (Garbage Collection Phase):
- 当执行上下文不再被需要时，V8引擎会将其销毁，回收内存。

7. 总结：Context，你代码的“剧本”

Context是JavaScript代码执行的基石。它包含了全局对象、词法环境、变量环境、this绑定和作用域链等重要信息。理解Context，你就能够更好地理解JavaScript代码的执行过程，避免一些常见的错误，并编写更高效、更可靠的代码。

概念	描述	示例
全局对象	所有代码都能访问的对象，浏览器中是`window`，Node.js中是`global`。	`console.log(window.innerWidth);` (浏览器) , `console.log(global.process.version);` (Node.js)
词法环境	存储`let`、`const`声明的变量和函数声明。	`let x = 10;`
变量环境	存储`var`声明的变量和函数声明。	`var y = 20;`
`this`绑定	函数执行时的上下文对象，取决于函数是如何被调用的。	`obj.method();` (this指向obj) , `func.call(obj);` (this指向obj) , `new Func();` (this指向新创建的对象) , `() => { console.log(this); }` (继承父作用域的this)
作用域链	指向父作用域的指针列表，用于查找变量。	如果在当前函数找不到某个变量，会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。
执行上下文生命周期	创建阶段（创建环境、作用域链、this），执行阶段（执行代码），销毁阶段（垃圾回收）。	代码执行的整个过程，从创建到销毁。

希望今天的讲座能够帮助大家更好地理解JavaScript中的Context概念。记住，理解这些底层概念是成为一名优秀的JavaScript开发者的关键。谢谢大家！

发表回复 取消回复

发表回复取消回复