Javascript变量的作用域和作用域链详解

下面是“Javascript变量的作用域和作用域链详解”的完整攻略：

1. 什么是作用域？

在JavaScript中，作用域指的是变量的可访问性。简单地说，一个变量在JavaScript中的作用域就是指这个变量在什么范围内可以被访问到。

2. 作用域的类型

JavaScript中主要有两种作用域类型：全局作用域和局部作用域。

2.1 全局作用域

所有在函数外定义的变量都有全局作用域，它们可以在代码的任何地方被访问到。

举个例子：

var myName = "Bob"; // 全局作用域

function greeting() {
  console.log("Hello " + myName);
}

greeting(); // 输出：Hello Bob

在上面的例子中，myName是在函数外定义的变量，所以它是拥有全局作用域的。因此，在greeting()函数中，我们可以轻松地访问myName变量。

2.2 局部作用域

所有在函数内部定义的变量都有局部作用域，它们只能在函数内部被访问到。

举个例子：

function greeting() {
  var myName = "Bob"; // 局部作用域
  console.log("Hello " + myName);
}

greeting(); // 输出：Hello Bob
console.log("Hello " + myName); // 报错：myName is not defined

在上面的例子中，myName是在函数内部定义的变量，所以它是拥有局部作用域的。因此，我们只能在greeting()函数内部访问myName变量。在函数外部访问myName变量会报错。

3. 作用域链

作用域链是指在JavaScript中所有可访问的变量的层次结构。当在一个函数内部访问一个变量时，JavaScript会先在当前函数的局部作用域中查找这个变量，如果找不到，就会向上一级作用域继续查找，直到找到为止。

举个例子：

var myName = "Bob"; // 全局作用域

function outer() {
  var myName = "Tom"; // 局部作用域
  console.log("Hello " + myName);

  function inner() {
    console.log("Hello " + myName);
  }

  inner();
}

outer(); // 输出：Hello Tom, Hello Tom

在上面的例子中，我们定义了全局变量myName和函数outer()，在函数内部我们定义了局部变量myName。在inner()函数内部，我们没有定义任何变量，所以当我们访问myName变量时，JavaScript会先在inner()函数的局部作用域中查找这个变量，由于没找到，它会继续向上一级作用域查找，这时会在outer()函数的局部作用域中找到，因此会输出Hello Tom。

总结

通过以上的内容我们可以知道，在JavaScript中，变量的作用域分为全局作用域和局部作用域，作用域链则是在JavaScript中所有可访问变量的层次结构。在进行变量访问时，JavaScript会先在当前的局部作用域中查找，如果找不到，就会向上一级作用域继续查找，直到找到为止。

示例2：

var x = 10;
console.log(x); // 输出：10

function add() {
  var x = 5;
  console.log(x); // 输出：5
}

add();
console.log(x); // 输出：10

上面的代码定义了全局变量x并给它赋值10。接着我们定义了一个名为add()的函数，在函数内部再定义了同名的变量x并赋值5。在函数内部的console.log()语句中，我们输出了x的值为5。但在函数外部，我们再次输出了x的值，这时会输出10，因为在函数内部的变量x只拥有局部作用域，不会影响到外部的全局变量x。