js 执行上下文和作用域的相关总结

JS执行上下文和作用域相关总结

在JavaScript中，代码执行的上下文和作用域是非常重要的概念。正确理解和应用它们可以帮助我们更好地编写和调试JavaScript代码。下面是一个总结：

执行上下文

执行上下文是JavaScript代码执行的环境，其中包括当前执行的代码、变量和对象等，JS 中有三种不同类型的执行上下文：全局上下文，函数上下文，eval上下文。

全局上下文

当JS代码在全局范围内执行（在脚本文件或全局函数中）时，将创建一个全局执行上下文。全局执行上下文会被赋值一个全局对象，可以用关键字this来引用全局执行上下文中的变量和函数。

函数上下文

当调用函数时，将创建一个新的函数执行上下文。函数执行上下文包括函数的参数，局部变量和内部函数。每当调用一个新的函数时，就会创建一个新的函数执行上下文，并将其添加到调用堆栈(Call Stack)。

eval上下文

eval函数也会创建一个新的执行上下文。但是，由于eval函数具有安全隐患，因此在大多数情况下不推荐使用eval。

作用域

在JavaScript中，作用域指的是代码中变量和函数被声明后的可访问范围。

全局作用域

在全局范围内声明的变量和函数具有全局作用域，因此它们可以在代码的任何位置访问。

函数作用域

在一个函数内声明的变量和函数具有函数作用域。这意味着它们只能在函数内部访问。

块级作用域

在ES6中，引入了块级作用域，这为我们提供了新的变量声明方式let和const。块级作用域允许变量在限定范围内声明，而不是在函数或全局作用域中。

示例说明

示例一

var x = 10;

function foo() {
  var y = 20;
  console.log(x);  // 输出：10
}

foo();
console.log(y);  // 抛出异常：Uncaught ReferenceError: y is not defined

在上面的示例中，x具有全局作用域，因此可以从函数内部访问。而变量y则在函数内部声明，具有函数作用域，只能从函数内部访问，因此在函数外部访问y会抛出一个引用错误。

示例二

function bar() {
  var x = 10;

  function baz() {
    var y = 20;
    console.log(x + y);  // 输出：30
  }

  baz();
}

bar();

在这个示例中，函数baz嵌套在函数bar中，并且可以访问在外部函数中声明的变量。当调用外部函数bar时，将创建一个函数上下文，并将其添加到调用堆栈中。然后当调用函数baz时，将创建一个嵌套的函数执行上下文，并将其添加到调用堆栈中。在baz内部，它可以访问外部函数bar中声明的变量，因为它们在同一个作用域中。