JS运行九大概念搞懂，从此编程一劳永逸！

前端

2023-12-07 20:51:03

初学者和老程序员必备：JS运行的九大概念

JavaScript（JS）因其灵活性、易用性和无所不在而备受推崇。然而，它的运行机制可能会让初学者挠头，甚至让老练的程序员感到困惑。掌握JS运行的九大基本概念至关重要，它们构成了这门语言的核心，并为其独特的功能奠定了基础。

1. 变量提升

想象一下JS中的变量就像一群争先恐后的孩子。无论你在代码块的何处声明它们，它们都会迫不及待地冲到顶部。虽然它们提前到位了，但它们的手中什么都没有，值为空undefined。直到你用一个值给它们赋值，它们才算真正长大。

2. 执行上下文

JS程序执行就像舞台剧，每个场景都有自己的执行上下文。全局执行上下文是整个程序的主舞台，而函数执行上下文则是各个独立的表演空间。每个执行上下文都有自己的一套变量和函数，就像不同的演员阵容和道具。

3. 调用栈

调用栈就像一个演员走位图。当一个函数被调用时，它会推上舞台（调用栈），并开始它的表演。当表演结束时，它就会离开舞台（调用栈），为下一个函数腾出空间。这个过程不断循环，确保程序按照正确的顺序执行。

4. 作用域

作用域是变量和函数的游乐场。它定义了它们可以被哪些代码块访问。全局作用域是整个舞台，所有演员都可以自由活动。函数作用域就像一个个后台，只有在这个函数中创建的变量和函数才能进入。而块状作用域更像是一个临时小房间，只对特定代码块内的变量和函数开放。

5. 作用域链

当你需要找人时，你会沿着人际关系网寻找。同样，JS也会沿着作用域链查找变量。如果一个函数需要一个变量，它会先在自己的作用域中寻找，如果没有，它会往上沿着作用域链寻找，直到找到变量或到达全局作用域。

6. 块状作用域

块状作用域是JS的秘密武器，它允许你在代码块内创建局部变量。就像一个私密的派对，这些变量只邀请了该代码块内的成员。一旦派对结束，它们就会消失，留下没有痕迹。

7. 词法作用域

词法作用域建立在函数之上的，就像一个函数的专属领地。即使你离开函数，你仍然可以访问其词法作用域内的变量。这就像一个忠诚的仆人，无论你走到哪里，它都紧随其后。

8. 闭包

闭包是JS中令人惊叹的工具，它可以让你创建自己的迷你世界。想象一个函数内部的另一个函数，它可以访问外部函数的作用域。就像一个套娃，它封装了变量和函数，创造了一个私密的空间。

9. 事件循环

JS不是一个急于求成的程序。它有一个称为事件循环的内置机制，它协调代码的执行。事件循环就像一个谨慎的调酒师，在恰当的时机分配任务。它确保代码以高效、有序的方式运行，避免混乱。

示例代码：

// 变量提升
var x; // 提升到顶部，值为空
console.log(x); // undefined
x = 10; // 赋值

// 执行上下文
function myFunction() {
  console.log(y); // 访问全局变量y
  var y = 20; // 在函数作用域中创建变量y
}

myFunction(); // 输出：undefined

// 作用域链
var z = 30; // 全局变量

function outerFunction() {
  var z = 40; // 函数作用域变量

  function innerFunction() {
    console.log(z); // 输出：40
  }

  innerFunction();
}

outerFunction();

// 闭包
function createCounter() {
  var count = 0;

  return function() {
    return count++;
  };
}

var counter = createCounter();
console.log(counter()); // 输出：0
console.log(counter()); // 输出：1