JavaScript作用域和作用域链

前端小巷子
189 阅读5分钟

在JavaScript中，作用域和作用域链是理解代码执行和变量访问的关键概念。它们决定了变量和函数在代码中的可见性和生命周期。

一、作用域（Scope）

（一）什么是作用域？

作用域是在运行时代码中的某些特定部分中变量、函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。

作用域的主要作用是隔离变量，防止不同作用域下的同名变量发生冲突。例如：

function outFun2() {
    var inVariable = "内层变量2";
}
outFun2();
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

在上面的例子中，变量inVariable在全局作用域中没有声明，因此在全局作用域下访问它会报错。

（二）全局作用域和函数作用域

1. 全局作用域

全局作用域是指在代码中任何地方都能访问到的对象。以下几种情形拥有全局作用域：

  • 最外层函数和在最外层函数外面定义的变量拥有全局作用域。
  • 所有未定义直接赋值的变量自动声明为拥有全局作用域。
  • 所有window对象的属性拥有全局作用域。
var outVariable = "我是最外层变量"; // 最外层变量
function outFun() { // 最外层函数
    var inVariable = "内层变量";
    function innerFun() { // 内层函数
        console.log(inVariable);
    }
    innerFun();
}
console.log(outVariable); // 我是最外层变量
outFun(); // 内层变量
console.log(inVariable); // inVariable is not defined

全局作用域的弊端是容易污染全局命名空间，引起命名冲突。因此，通常建议将代码封装在函数中，避免全局变量的滥用。

2. 函数作用域

函数作用域是指声明在函数内部的变量，这些变量只能在函数内部访问。例如：

function doSomething() {
    var stuName = "zhangsan";
    function innerSay() {
        console.log(stuName);
    }
    innerSay();
}
console.log(stuName); // 脚本错误
innerSay(); // 脚本错误

函数作用域的一个重要特点是内层作用域可以访问外层作用域的变量，但外层作用域不能访问内层作用域的变量。

（三）块级作用域

ES6引入了块级作用域，通过let和const关键字声明的变量具有块级作用域。块级作用域在以下情况被创建：

  1. 在一个函数内部。
  2. 在一个代码块（由一对花括号包裹）内部。

块级作用域的特点包括：

  • 声明变量不会提升到代码块顶部。
  • 禁止重复声明。
  • 循环中的绑定块作用域的妙用。
for (let i = 0; i < 10; i++) {
    console.log(i); // i 在循环内部有效
}
console.log(i); // ReferenceError: i is not defined

二、作用域链

（一）什么是自由变量？

自由变量是指在当前作用域中没有定义的变量。例如：

var a = 100;
function fn() {
    var b = 200;
    console.log(a); // 这里的 a 是一个自由变量
    console.log(b);
}
fn();

在fn函数中，a是一个自由变量，因为它在fn函数的作用域中没有定义。

（二）什么是作用域链？

作用域链是指当访问一个变量时，编译器会从当前作用域开始，逐层向上查找，直到找到该变量或到达全局作用域。例如：

var a = 100;
function f1() {
    var b = 200;
    function f2() {
        var c = 300;
        console.log(a); // 100
        console.log(b); // 200
        console.log(c); // 300
    }
    f2();
}
f1();

在f2函数中，a和b是自由变量，它们的值通过作用域链从外层作用域中获取。

（三）关于自由变量的取值

自由变量的值是在函数定义时确定的，而不是在函数调用时确定的。例如：

var x = 10;
function fn() {
    console.log(x);
}
function show(f) {
    var x = 20;
    (function () {
        f(); // 输出 10，而不是 20
    })();
}
show(fn);

在fn函数中，x的值是在fn函数定义时确定的，因此输出的是全局作用域中的x，而不是show函数中的x。

三、作用域与执行上下文

许多开发人员经常混淆作用域和执行上下文的概念。虽然它们都与变量的访问和函数的执行有关，但它们是不同的概念。

  • 作用域：作用域是在函数定义时确定的，它决定了变量的可见性和生命周期。
  • 执行上下文：执行上下文是在函数执行时创建的，它包括变量对象、作用域链和this的指向。

（一）执行上下文的生命周期

执行上下文的生命周期分为两个阶段：

  1. 创建阶段：当代码执行进入一个环境时，会创建一个执行上下文。在这个阶段，执行上下文会进行以下操作：

    • 创建变量对象（Variable Object，VO）：包括函数的形参、arguments对象、函数声明和变量声明。
    • 确定this的指向。
    • 确定作用域链。

  2. 执行阶段：在执行阶段，代码开始执行，变量被赋值，函数被调用，其他代码按顺序执行。

四、总结

理解作用域和作用域链的工作原理和实际应用，可以帮助你更好地理解代码的执行流程和变量的访问机制。如果你对本文的内容有任何疑问或补充，欢迎在评论区留言讨论。

avatar
文章
阅读
粉丝