JavaScript作用域的定义、原理及示例

为感谢大家的支持，特发福利红包（支F宝口令红包），点击前往领取：Gitee

JavaScript中的作用域指的是变量和函数的可访问范围。在JavaScript中，作用域有两种类型：词法作用域和动态作用域。

词法作用域 定义：词法作用域是指在代码编写的时候就确定了变量和函数的作用域。在JavaScript中，每个函数都会形成一个新的作用域，称为函数作用域。在函数作用域中声明的变量和函数只能在该作用域内访问。

原理：词法作用域的原理是在函数定义的时候就确定了函数内的变量和函数的作用域。JavaScript在查找变量时，会先在当前函数的作用域中查找，如果找不到，就会在上层作用域中继续查找，直到找到为止。

代码示例：

var a = 10;
function foo() {
  var b = 20;
  console.log(a); // 输出10
  console.log(b); // 输出20
}
foo();

在上面的示例中，变量a的作用域是全局作用域，变量b的作用域是函数作用域。

动态作用域 定义：动态作用域是指在函数调用的时候才确定变量和函数的作用域。在JavaScript中，没有动态作用域的概念，但是可以通过函数作用域和闭包来实现，也可以通过使用eval函数和with语句来实现类似于动态作用域的效果。

原理：动态作用域的原理是在函数调用时，会将当前作用域压入一个作用域栈中，然后在函数内部查找变量时，会先从栈顶查找，如果找不到，就会继续向下查找，直到找到为止。

代码示例：

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

function baz() {
  var bar = "hello";
  foo();
}

baz(); // 输出 "hello"

在这个示例中，函数 foo() 引用了变量 bar，但是它没有在 foo() 中定义。相反，变量 bar 是在调用 foo() 的函数 baz() 中定义的。在词法作用域中， foo() 应该在自己的作用域中查找变量 bar，但是在动态作用域中，它会在调用它的函数 baz() 的作用域中查找变量 bar，所以它可以访问到 baz() 中的变量 bar。

这个示例中，foo() 是在全局作用域中定义的，但是它访问了 baz() 中的变量 bar，这是因为 foo() 采用了动态作用域。当 foo() 执行时，它会在调用它的函数 baz() 的作用域中查找变量 bar，而不是在自己的作用域中查找。

动态作用域的实现是通过在函数内部保存它们被调用时的作用域链。在这个示例中，当 foo() 在 baz() 中调用时，它会使用 baz() 的作用域链，其中包含了 baz() 中定义的变量 bar。

总结：

JavaScript中的作用域分为词法作用域和动态作用域。词法作用域是指在代码编写的时候就确定了变量和函数的作用域，动态作用域是指在函数调用的时候才确定变量和函数的作用域。在JavaScript中，只有词法作用域，但是可以通过使用eval函数和with语句来实现类似于动态作用域的效果。建议在编写JavaScript代码时，尽量避免使用eval函数和with语句。

为方便广大前端技术爱好者，整合了前端技术相关知识和资源，且有很多福利可以领取：Gitee

如有转载需求，请联系：Gitee