javascript使用_用JavaScript吊装-CSDN博客

javascript使用

In the past month, I finally understood a really amazing behavior about Javascript’s architecture: the famous Hoisting! Let’s dive into this curious topic and understand more about var, let, const and JS scope.

在过去的一个月中，我终于了解了Javascript架构的一个令人惊奇的行为：著名的Hoisting ！让我们深入探讨这个有趣的主题，并进一步了解var ， let ， const和JS scope 。

Hoisting is the default behavior of Javascript that moves all the declarations (variables and functions) to the top of the scope. In a nutshell… it doesn’t matter where you declare it, they will be hoisted to the top of the code before the execution.

提升是Javascript的默认行为， 它将所有声明(变量和函数)移动到作用域的顶部 。简而言之，无论在哪里声明它，它们都将在执行之前被提升到代码的顶部。

First, let’s understand the Javascript lifecycle:

首先，让我们了解Javascript生命周期 ：

$ var magicNumber; //declaration
> undefined
$ a = 30; // initialisation/assignment
> 30
$ a + 20; // usage
> 50

When you declare a variable and before being assigned, its primitive value is undefined. After there is the assignment phase where we define a value to this variable and in the end, we can then use our variable.

声明变量时，在分配变量之前，其原始值是未定义的。 在分配阶段之后，我们为该变量定义一个值，最后，我们可以使用我们的变量。

There is an eccentric and dangerous behavior about hoisting, undeclared variables do not exist until the code executes. So, assigning a value to an undeclared variable creates a global variable! And global variables always cause double trouble: mutability everywhere! :(

吊装有一种古怪而危险的行为， 在代码执行之前 ， 未声明的变量不存在 。因此，将值分配给未声明的变量将创建全局变量 ！全局变量总是造成双重麻烦：到处都是可变性！ :(

$ function hoistBehavior () {
  firstName = 'Jennifer';
  var lastName = 'Takagi';
}
$ hoistBehavior();
$ console.log(firstName);
> 'Jennifer'
$ console.log(lastName);
> lastName: lastName is not defined

In the example, the variable firstName is undeclared. This variable jumped over the declaration step and went ahead to the assignment… becoming a global variable, because of that we can access it in all code! On the other hand, the variable lastName was declared as var, so it will be kept in the function scope.

在此示例中，未声明变量firstName 。这个变量跳过了声明步骤，继续进行赋值… 成为一个全局变量，因此我们可以在所有代码中访问它！另一方面，变量lastName被声明为var ，因此它将保留在函数scope中 。

ES5(变种) (ES5 (var))

In ES5 the only way to declare a variable is writing the keyword: var, and all the behaviors that were explained until this point occur with this kind of declaration.

在ES5中，声明变量的唯一方法是编写关键字var ，直到这一点为止被解释的所有行为都通过这种声明发生。

$ console.log(name);
> undefined
$ var name = 'Jennifer';

Under the hood, Javascript made these following steps: it hoisted the declaration of var name and executed all the code, row by row:

在后台，Javascript执行了以下步骤： 提升了var 名称 的声明并逐行执行了所有代码：

$ var name;
$ console.log(name);
> undefined
$ name = 'Jennifer';

ES6(let和const) (ES6 (let and const))

Using ES6 we have two ways to declare a variable: let and const. On this version, Javascript changed the declaration and initialization of the variables, let’s take a look…

使用ES6，我们有两种声明变量的方法： let和const。 在此版本上， Javascript更改了变量的声明和初始化 ，让我们看一下…

让 (let)

Maybe you already know this but when we declare a variable as let, it will belong to a block scope and not a function scope. Like the example below, because I declared lastName with let keyword, this variable only exists into the if scope!

也许您已经知道这一点，但是当我们将变量声明为let时 ，它将属于块作用域而不是函数作用域。像下面的示例一样，因为我使用let关键字声明了lastName ，所以此变量仅存在于if范围内 ！

$ if (name === 'Jennifer) {
    let lastName = 'Takagi;
  }
$ console.log(lastName);
> Uncaught ReferenceError: lastName is not defined

const (const)

To declare variables using const is the most elegant way because this keyword keeps the immutability of the variable once you declare it: 1) you have to assign the value straight away; 2) you won’t be able to change its value. (Why does this happen? :O I will write another post about this, I promise…)

使用const声明变量是最优雅的方法，因为一旦声明变量，此关键字将保持变量的不变性： 1)您必须立即分配值； 2)您将无法更改其值。 (为什么会这样？：我保证，OI将为此写另一篇文章……)

$ const name;
> Missing initializer in const declaration
$ const name = 'Jennifer';
> undefined
$ const name = 'Jenni';
> Uncaught SyntaxError: Identifier 'name' has already been declared

In conclusion, we can say the difference between ES5 and ES6+ is how JS initializes the variable: if it declared with let and const it remains uninitialized at the beginning of execution. Otherwise if declared with var it is initialized with a value of undefined.

总之，我们可以说ES5和ES6 +之间的区别在于JS初始化变量的方式：如果用let和const声明了它，在执行开始时仍未初始化 。否则，如果使用var声明，它将使用undefined值初始化。