为什么require echarts 没有变量_JS变量生命周期:为什么 let 没有被提升

最新推荐文章于 2024-04-22 14:22:33 发布

weixin_40004659

最新推荐文章于 2024-04-22 14:22:33 发布

阅读量88

点赞数

文章标签：为什么require echarts 没有变量

本文链接：https://blog.csdn.net/weixin_40004659/article/details/113371046

版权

译者：前端小智

原文：https://dmitripavlutin.com/variables-lifecycle-and-why-let-is-not-hoisted/

为了保证的可读性，本文采用意译而非直译。

提升是将变量或函数定义移动到作用域头部的过程，通常是 var 声明的变量和函数声明 functionfun(){...}。

当 ES6 引入 let(以及与 let类似声明的 const和 class)声明时，许多开发人员都使用提升定义来描述如何访问变量。但是在对这个问题进行了更多的探讨之后，令我惊讶的是提升并不是描述 let变量的初始化和可用性的正确术语。

ES6 为 let提供了一个不同的和改进的机制。它要求更严格的变量声明,在定义之前不能使用，从而提高代码质量。

1. 容易出错的 var 提升

有时候我们会在zuo内作用域内看到一个奇怪的变量 varvarname和函数函数function funName(){...} 声明：

// var hoisting

num; // => undefined

var num;

num = 10;

num; // => 10

// function hoisting

getPi; // => function getPi() {...}

getPi(); // => 3.14

function getPi() {

return 3.14;

}

变量 num在声明 varnum之前被访问，因此它被赋值为 undefined。 fucntion getPi(){…}在文件末尾定义。但是，可以在声明 getPi()之前调用该函数，因为它被提升到作用域的顶部。

事实证明，先使用然后声明变量或函数的可能性会造成混淆。假设您滚动一个大文件，突然看到一个未声明的变量，它到底是如何出现在这里的，以及它在哪里定义的？

当然，一个熟练的JavaScript开发人员不会这样编写代码。但是在成千上万的JavaScript中，GitHub repos是很有可能处理这样的代码的。

即使查看上面给出的代码示例，也很难理解代码中的声明流。

当然，首先要声明再使用。 let 鼓励咱们使用这种方法处理变量。

2. 理解背后原理：变量生命周期

当引擎处理变量时，它们的生命周期由以下阶段组成：

声明阶段(Declaration phase)是在作用域中注册一个变量。
初始化阶段(Initialization phase)是分配内存并为作用域中的变量创建绑定。在此步骤中，变量将使用 undefined自动初始化。
赋值阶段(Assignment phase)是为初始化的变量赋值。

变量在通过声明阶段时尚未初始化状态，但未达到初始化状态。

请注意，就变量生命周期而言，声明阶段与变量声明是不同的概念。简而言之，JS引擎在3个阶段处理变量声明：声明阶段，初始化阶段和赋值阶段。

3.var 变量的生命周期

熟悉生命周期阶段之后，让我们使用它们来描述JS引擎如何处理 var变量。

假设JS遇到一个函数作用域，其中包含 var变量语句。变量在执行任何语句之前通过声明阶段，并立即通过作用域开始处的初始化阶段(步骤1)。函数作用域中 var变量语句的位置不影响声明和初始化阶段。

在声明和初始化之后，但在赋值阶段之前，变量具有 undefined 的值，并且已经可以使用。

在赋值阶段 variable='value' 时，变量接收它的初值(步骤2)。

严格意义的提升是指在函数作用域的开始处声明并初始化一个变量。声明阶段和初始化阶段之间没有差别。

让我们来研究一个例子。下面的代码创建了一个包含 var语句的函数作用域

function multiplyByTen(number) {

console.log(ten); // => undefined

var ten;

ten = 10;

console.log(ten); // => 10

return number * ten;

}

multiplyByTen(4); // => 40

开始执行 multipleByTen(4)并进入函数作用域时，变量 ten在第一个语句之前通过声明和初始化步骤。因此，当调用 console.log(ten)时，打印 undefined。语句 ten=10指定一个初值。赋值之后， console.log(ten) 将正确地打印 10。

4. 函数声明生命周期

在函数声明语句 functionfunName(){...}的情况下，它比变量声明生命周期更简单。

声明、初始化和赋值阶段同时发生在封闭函数作用域的开头(只有一步)。可以在作用域的任何位置调用 funName()，而不依赖于声明语句的位置(甚至可以在末尾调用)。

下面的代码示例演示了函数提升：

function sumArray(array) {

return array.reduce(sum);

function sum(a, b) {

return a + b;

}

sumArray([5, 10, 8]); // => 23

当执行 sumArray([5,10,8])时，它进入 sumArray函数作用域。在这个作用域内，在任何语句执行之前， sum都会通过所有三个阶段:声明、初始化和赋值。这样， array.reduce(sum)甚至可以在它的声明语句 sum(a,b){…}之前使用 sum。