JavaScript静态作用域和动态作用域实例详解

静态作用域（词法作用域）

静态作用域是指在代码编写阶段就确定了变量的作用域，不会受到函数的调用位置的影响。JavaScript使用词法作用域来实现静态作用域。

示例1：

var name = \"John\";

function greet() {
  console.log(\"Hello, \" + name + \"!\");
}

function changeName() {
  var name = \"Alice\";
  greet();
}

changeName(); // 输出：Hello, John!

在上面的示例中，greet函数在定义时就捕获了外部的name变量，即使在changeName函数内部重新定义了一个同名的变量，greet函数仍然使用的是外部的name变量。

示例2：

var name = \"John\";

function greet() {
  console.log(\"Hello, \" + name + \"!\");
}

function changeName() {
  name = \"Alice\";
  greet();
}

changeName(); // 输出：Hello, Alice!

在这个示例中，changeName函数修改了外部的name变量的值，因此在调用greet函数时，输出的是修改后的值。

动态作用域

动态作用域是指变量的作用域是根据函数的调用位置来确定的，而不是根据代码的定义位置。JavaScript并没有直接支持动态作用域，但可以通过一些技巧来模拟。

示例3：

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

function changeName() {
  var name = \"Alice\";
  greet.call(this);
}

var name = \"John\";
changeName(); // 输出：Hello, John!

在这个示例中，通过使用call方法来改变greet函数内部的this指向，从而实现了动态作用域的效果。this指向的是调用changeName函数的对象，因此在调用greet函数时，输出的是外部的name变量。

示例4：

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

function changeName() {
  this.name = \"Alice\";
  greet.call(this);
}

var name = \"John\";
changeName(); // 输出：Hello, Alice!

在这个示例中，changeName函数修改了this对象的name属性的值，因此在调用greet函数时，输出的是修改后的值。

以上就是JavaScript静态作用域和动态作用域的实例详解。静态作用域是在代码编写阶段确定的，而动态作用域是根据函数的调用位置来确定的。