Javascript学习笔记3 作用域

在Javascript中，作用域是指变量能够被访问到的范围。掌握作用域是编写高质量代码的关键。本文将讲解Javascript中的作用域，帮助读者更好地理解Javascript的变量作用范围。

全局作用域

在Javascript中，没有在任何函数内部定义的变量都属于全局作用域，它们可以在代码中的任何地方被访问到。

var myVar = "global";
function myFunction() {
  console.log(myVar);
}
myFunction(); // 输出 "global"

在上面的代码中，变量myVar定义在函数之外，所以它是全局作用域的，可以被函数myFunction内部的代码所访问。

在Javascript代码中，全局作用域是默认存在的，而且无法被删除。全局变量在整个应用程序中都是可访问的，这很容易导致变量名的重复或意外修改，因此应该尽可能避免使用全局变量。

函数作用域

在Javascript中，函数内定义的变量都具有函数作用域，它们只在函数内部可见。

function myFunction() {
  var myVar = "local";
  console.log(myVar);
}
myFunction(); // 输出 "local"
console.log(myVar); // 报错，myVar未定义

在上面的代码中，变量myVar是在函数内部定义的，因此它只在函数内部可见。在函数外部无法访问该变量，会导致未定义的错误。

函数作用域使得变量名可以在不同的函数中被重复使用，同时也可以使代码更加可读。

块级作用域

在ES6以前，Javascript中没有块级作用域。在块内部定义的变量在块外部仍然可见。

if (true) {
  var myVar = "hello";
}
console.log(myVar); // 输出 "hello"

在上面的代码中，变量myVar的定义在if语句块中，但是仍然能在if语句块外部使用。这可能会导致一些意外的行为，因此应该尽可能避免在块内定义函数或变量。

在ES6中，引入了块级作用域的概念，通过使用let和const来声明变量和常量可以创建一个块级作用域。

if (true) {
  let myVar = "hello";
  console.log(myVar); // 输出 "hello"
}
console.log(myVar); // 报错，myVar未定义

在上面的代码中，变量myVar使用let声明，因此只在if语句块内部可见，不会在if语句块外部被访问到。

示例

示例1

var a = 1;
function foo() {
  var b = 2;
  function bar() {
    var c = 3;
    console.log(a, b, c); // 输出1, 2, 3
  }
  bar();
  console.log(a, b); // 输出1, 2
}
foo();
console.log(a); // 输出1

在上面的代码中，变量a是全局变量，在函数内外都可以访问到。变量b是foo函数的局部变量，在foo内部和bar函数都可以访问到。变量c是bar函数的局部变量，只能在bar函数内部访问。因此，在输出语句中可以看到每个变量的值。

示例2

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

在上面的代码中，希望每隔1秒输出1到5的数字。但是实际输出的是5个6，而不是1到5。原因是在循环中使用了var定义的计数变量i，它有函数作用域，因此在setTimeout执行时，循环已经结束，变量i的值已经是5。因此每个setTimeout都会输出5。要解决这个问题，需要使用let定义i，它有块级作用域。

for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

在上面的代码中，变量i使用let定义，因此每个循环都创建一个新的块级作用域，保证了每个setTimeout访问的是不同的变量。