js声明提升与作用域全方位剖析，手把手带你成为js高手

前端

2023-04-29 16:11:30

JavaScript中的作用域：揭开JavaScript世界的幕后机制

JavaScript，作为一种强大的语言，以其动态特性和广泛的应用而闻名。在JavaScript的世界中，作用域是决定变量和函数可访问性和使用范围的关键概念。

作用域：变量和函数的藏身之处

作用域是一个范围，用于确定变量和函数可以在哪里访问和使用。JavaScript中有两种主要的作用域：

全局作用域： 这是脚本中最顶层的作用域，可以在程序的任何地方访问和使用。
局部作用域： 由函数创建，只能在函数内部访问和使用。

声明提升：变量和函数的惊喜出场

声明提升是一个独特的特性，它允许你在使用变量或函数之前声明它们。当你声明变量或函数时，它们会被提升到脚本的顶部，但它们的实际值保持不变。这种特性非常有用，因为它允许你在函数内部使用变量，即使它们尚未定义。

作用域链：变量和函数的寻宝之旅

作用域链是一个概念，用于JavaScript如何在不同的作用域中查找变量和函数。当JavaScript解释器在运行时遇到变量或函数时，它首先在当前作用域中查找它。如果没有找到，它会沿着作用域链向上查找，直到找到所需内容或到达全局作用域。

闭包：跨越作用域的变量守护者

闭包是一个函数，即使在离开其定义作用域之后，也可以访问其内部变量和函数。这非常有用，因为它允许你在函数内部使用变量，即使该变量在函数外部已经不存在。

JavaScript作用域实战

以下代码示例将帮助你更好地理解这些概念：

// 全局变量
var globalVar = "Global Variable";

// 函数内部声明的变量
function myFunction() {
  // 局部变量
  var localVar = "Local Variable";

  // 使用全局变量
  console.log(globalVar);

  // 使用局部变量
  console.log(localVar);
}

// 调用函数
myFunction();

在上面的示例中，全局变量globalVar可以在函数内部访问和使用，而局部变量localVar只能在函数内部访问和使用。

// 声明提升
function myFunction() {
  // 变量声明
  var a;
  var b;

  // 使用变量
  console.log(a); // undefined
  console.log(b); // undefined

  // 赋值
  a = 10;
  b = 20;

  // 使用变量
  console.log(a); // 10
  console.log(b); // 20
}

// 调用函数
myFunction();

在上面的示例中，变量a和b被提升到函数的顶部，但它们的实际值保持不变。在使用它们之前，它们的值为undefined。

// 闭包
function createCounter() {
  // 私有变量
  var counter = 0;

  // 返回函数
  return function() {
    // 使用私有变量
    counter++;
    console.log(counter);
  };
}

// 创建计数器
var counter1 = createCounter();
var counter2 = createCounter();

// 调用计数器
counter1(); // 1
counter1(); // 2
counter2(); // 1
counter2(); // 2