变量提升、执行上下文到闭包、this 的异曲同工之处

2023-09-23 22:17:04

变量提升：变量声明的提前

在 JavaScript 中，变量声明会被提升到代码块的顶部。这意味着变量可以在声明之前被使用，而不会报错。这在早期 JavaScript 中是一种常见的设计模式，也称为 hoisting，其目的是为了加快 JavaScript 引擎的执行速度。

执行上下文：代码执行的环境

执行上下文是指 JavaScript 代码执行时所处的环境。它包含了变量、函数和作用域等信息。JavaScript 执行上下文在每次函数被调用时都会被创建，并在函数返回时被销毁。

闭包：函数与它所创建的变量环境的组合

闭包是指一个函数及其所创建的变量环境的组合。闭包允许函数访问其创建时的变量环境，即使该函数已被返回并执行上下文已被销毁。这在 JavaScript 中是一种强大的技术，可以用来实现多种高级编程模式，如函数柯里化和模块化。

this：指向当前执行上下文的引用

this 指向当前执行上下文的实例。它可以用来访问当前执行上下文的变量、函数和作用域。this 关键字在 JavaScript 中有着广泛的应用，如对象的方法、事件处理程序和构造函数等。

四者的联系

变量提升、执行上下文、闭包和this看似不同的概念，但它们都与 JavaScript 执行环境息息相关。变量提升会影响变量在执行上下文中的可用性，执行上下文决定了变量和函数的作用域，闭包允许函数访问其创建时的执行上下文，而this则指向当前执行上下文。

理解这四者之间的关系对于理解 JavaScript 的运行机制非常重要。只有掌握了这些概念，才能真正理解 JavaScript 的本质。

举个例子

以下是一个例子，来说明变量提升、执行上下文、闭包和this之间的关系：

var a = 10; // 全局变量

function foo() {
  var b = 20; // 局部变量
  console.log(a); // 10
  console.log(b); // 20
  console.log(this); // Window 对象
  function bar() {
    var c = 30; // 局部变量
    console.log(a); // 10
    console.log(b); // 20
    console.log(c); // 30
    console.log(this); // foo 函数
  }
  bar();
}

foo();