Understand the compilation principles, scope, scope chain, variable promotion, and temporary Zenless Zone Zero of JS series (1) in one paper

Write at the front: This is the javascript column I am about to start writing a series, Mainly in the era when frameworks are rampant, although you use frameworks for work, for interviews and technical advancement, the foundation of basic JS knowledge is the icing on the cake, and it is also a piece of knowledge that you have to learn. Although you don’t need to know a lot about cars to drive a car, Just master the common functions of the car. But if you know cars, you can drive better, and by the same token. Of course, an article will not just talk about one knowledge point. Generally, related knowledge points will be connected in series. While recording your own learning, you will share your own learning and encourage each other! If you can, please give me a like. Your like will also make me work harder to update!

Overview

• Difficulty:
Easy
• , don’t run, walk after reading

JS compilation principleLet’s look at a line of code first

var name='jack';复制代码

Copy after login

var name;    //编译阶段处理name='jack';    //执行阶段处理复制代码

• Compilation phase

  The protagonist of this stage is the so-called compiler , the compiler will search the current scope to see if a variable named name already exists. If it already exists, then do nothing, just ignore the statement var name and continue compiling; if not, add a new variable called name in the current scope. . Then, the compiler will generate the code required for the engine to run, and the program will enter the execution phase

• Execution phase

  The protagonist of this stage is the familiar JS engine. When the JS engine is running, it will also search the current scope first. See if there is a variable called name. If there is, then it is just right and assign the value directly. If not, it means that the current scope does not exist. What should I do? Then consider sticking your head out. , go outside (parent scope) to see if there is one. If not, go outside and search, layer after layer (of course, if there is a parent layer). If it is still not found in the end, then the JS engine will also If it means you are powerless, then throw an exception and show it to others to show that you have tried your best.

  The above-mentioned search outside, layer after layer, from the current scope to the parent scope, to the parent's parent scope, and so on, is the so-called scope Chained, just like a chain, each link goes up one by one. The description can be said to be very appropriate. To sum up, scopes within scopes, there is the so-called scope chain

作用域

• 定义

  大家都知道，变量最基本的能力就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改，而对于变量存储，访问的一套规则,就是所谓的作用域

• 分类

  • 全局作用域

  在任何函数外或者代码块之外的顶层作用域就是全局作用域，而里面的变量就是全局变量

  var name='jack';   //全局作用域function showName(){    //函数作用域  console.log(name);}{  name='test';    //块级作用域}showName();    //test复制代码

  Copy after login

  可以看到全局变量，无论是在全局作用域，函数作用，还是块级作用域中都可以正常访问

  • 函数作用域

  在函数内的作用域就是函数作用域

  function showName(){  var name='jack';    //函数作用域}showName();   //方法调用{  console.log(name);  //块级作用域,Uncaught ReferenceError: name is not defined}console.log(name);  //全局作用域,Uncaught ReferenceError: name is not defined复制代码

  Copy after login

  可以看到函数内部变量，在全局作用域以及块级作用域中，都无法访问，只有在函数内部，才能访问的到，所以函数内的变量也被称为局部变量

  • 块作用域

  在 ES6 中新出的两个新关键字 let和 const中，自带块级作用域，块级作用域相当于是只在这块代码块中生效，如果它被大括号 {} 所包围，那么大括号中就是一段代码块，代码块中使用 let 和 const 声明的变量也被称为局部变量

   {   let name='jack'; } console.log(name);    //Uncaught ReferenceError: name is not defined function showName{   console.log(name); } showName();    //Uncaught ReferenceError: name is not defined复制代码

  Copy after login

  可以看到块级作用域中的变量，出了那个代码块，就找不到了

其实上面的三种情况，结合JS编译原理和作用域链向外不向内查找，思考一下，也不难理解

作用域链

回到作用域链，其实在上面已经解释的差不多了，作用域和作用域的嵌套，就产生了作用域链，另外要记住的一个特性就是作用域链的查找，向外不向内，想想探出头去，而不是看着锅里，就可以了

变量提升

先来看一段代码

name='jack';console.log(name);    //jackvar name;复制代码

你会发现，这段代码不会发生报错，并且能正常地运行，结合上面所说的JS编译原理，你就能想到，在JS的眼中，它的代码实际上是这样子的，这就是所谓的变量提升，说白了那就是代码的声明提到代码的最前面

var name;name='jack';console.log(name);    //jack复制代码

其实这个变量提升应该是照道理接着编译原理写下来的，为什么放到了最后呢，因为如果你忘了，正好往上翻一下，重新回温一遍JS编译原理

紧接着上面，让我们来看下不吃变量提升这一套的 let 和 const ，先来看一段代码

name='jack';console.log(name)    //Uncaught ReferenceError: Cannot access 'name' before initializationlet name;复制代码

黑人问号 ？？？ ，说好的变量提升呢，记住 let 和 const 的一个特点，禁用变量提升，这也是 ES6 故意为之的，将生命前不可用做到了强约束，总结而言，** var 存在变量提升， let 和 const 不存在变量提升**

既然已经提到了 const ，顺带提一下它声明了以后必须赋值的操作

const name;    //Uncaught SyntaxError: Missing initializer in const declaration复制代码

暂时性死区

紧接着上面，让我们来看下什么叫做暂时性死区，先来看一段代码

var name='jack';{  name='bob';  let name;    //Uncaught ReferenceError: Cannot access 'name' before initialization}复制代码

记住 ES6 中的一个特性，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。因为JS清楚地感知到了 name 是用 let 声明在当前这个代码块内的，所以会给这个变量 name 加上了暂时性死区的限制，它就不往外探出头了。

那么，如果我们把上面的let name;去掉，程序也将正常运行， name 的值也被成功修改为了bob，就是正常地按照作用域链的规则，向外探出头去了。