A brief introduction to the parsing order and scope of JS and strict mode

1. The parsing order of javascript

We all understand that the execution order of the code is from top to bottom, but in fact it is not like this. Let's take a look at the code below.

alert(a);
var a = 1;

If the execution order is from top to bottom, and an a pops up above, the browser will think that it is executed from top to bottom, then when it alert(a) When, he will find that there is no such thing, then he will report an error, but in fact the result he pops up is undefined. The return value is undefined, indicating that a is not defined, that is, it is not assigned a value. Now let me explain the parsing order of javascript.

1. The keywords with declarative meaning in ES5

var will have variable promotion

function and also have the effect of declaring variables.

2. Parsing order

1. Find the declaration var, function declaration: only declare variables, not including assignment.

2. Execution

Note: The above two steps are followed from top to bottom. When you encounter an equal sign during execution, look to the right side of the equal sign first.

Note: When a variable declared by function has the same name as a variable declared by var, the variable weight of function will be higher than that declared by var.

A few more examples will make it much clearer, but before looking at the examples, you need to know what scope is.

2. Scope

The scope is: the effective scope is divided into the following two types

1. Global Scope

2. Function scope

The difference between the two of them is analyzed carefully in the following example.

3. Let’s look at a few examples to analyze the steps of the execution sequence

1. First example:

var x = 5;
 a();
 function a(){
  alert(x);
  var x = 10;
 }
alert(x);

Parsing process

1. Find the declaration (see global scope)

var x;

function a(){}

2. Execute

x = 5;

a() ------------->Execute to this function During the process, re-do the above two steps

1, look for the statement var x; (function scope)

2. Execute

alert(x); This x is in Exists in the function scope, and the step of assignment has not been executed, then the pop-up thing is undefined;

x = 10;

alert(x) The pop-up window here is global variable 5 ;

So the content of the browser pop-up window is undefined 5

2. The second example

 a()
 function a(){
  alert(x);
  var x = 10;
 }
alert(x);

The parsing process is as above Analyze the same as the example

1. Find the statement

　function a(){}

2. Execute

　a()------- ------------------>Function

1. Find statement

var x;

2.Execute

alert(x) pops up undefined

x = 10;

alert(x); The x here will look for x from the global world, but it is found that there is no x, so The browser will report an error x is not defined Now that you have a clear understanding, if you still don’t understand it well, I suggest you watch it again.

The following introduces a few things that need attention. Let’s go directly to the example

3. The third example

As mentioned earlier, when the variables declared by function and the variables declared by var overlap When named, the variable weight of function will be higher than that declared by var. Let’s take an example to prove it

alert(a)

function a() {
 alert("函数")
}

var a = 1; 
alert(a)

Parsing process

1. Find the statement

　function a(){}

　var a;

2. Execute

alert(a) As mentioned earlier, the function declaration has a higher weight than the var declaration, so when this is executed, the function block will pop up (Function body)

a = 1;

alert(a); What pops up here is 1

So the final result is function block 1;

4. The fourth example

The child scope can look for variables from the parent scope until the global scope, but not vice versa. If the child scope has the same variable, then he will use his own and will not ask his father for it.

var a = 5;

function fn() {
 alert(a)
}

fn()

Parsing process

1. Find the statement

var a;

function fn(){}

2. Execute

a = 5;

fn()----------------------- ---------------> Function

1. Find the statement

2. Execute

alert(a); Here he is There was no a, so I went to my dad to ask for it. a = 5; So the pop-up window is 5

, so the final result is pop-up window 5

Let’s see if the father will go to his son to ask for something

function fn(){
  var b = 5; 
  return b;  
}
fn();
alert(b);

1. Find the declaration

function fn(){}

2. Execute

fn() ---------- ----------------------------------> Function

1. Find declaration

1 .var b;

2.Execute

return b;

alert(b); //Let’s see what the return value is b is not defined He said b is not is defined, indicating that the parent scope cannot look for variables from the self scope.

5. The fifth example

When a variable comes out of nowhere, no matter which scope it comes from, it will all be returned to the window. Let’s look at two examples

fn();
 alert(a);
 var a = 0;
 alert(a);
 function fn(){
  var a = 1;
 }

This example should be able to be analyzed by yourself. The final result is undefined 0

Let’s take a look at the following one and you will be surprised

 fn()
 alert(a)
 var a = 0;
 alert(a);
 function fn(){
   a = 1;
 }

明明都一样，我吃惊什么 返回值不是还是 undefined 和 0 吗

但是你有没有发现倒数第二行 上面的声明了 下面的没有声明，来解析一波

1.寻找变量

var a;

function fn(){}

2.fn()---------------------------->函数

a = 1; 这个时候就说到了那一点，无中生有的变量，统统归到window下面

所以下面的执行过程

alert(a) 这里的弹窗就是 1 了

a = 0;

　alert(a) 弹出 0

所以最后的结果是 1 0

四、严格模式

严格模式下的代码执行时，非常严格

变量不允许无中生有

意义：规范代码开发的流畅，逻辑

"use strict"
a = 1；
alert(a);

当我们写后面两句代码的时候不会报错和出现问题，但是当我们加上第一句代码的时候，我们在这样写的时候就会报错了。所以我们还是按照规范的标准来,提高自己的能力

五、可能好多人做了上面的例子感觉不太过瘾，下面我再给出几个例子，可以自己去分析分析，我会在最后面给出答案。

1.　第一个例子　 // 10 报错

var a = 10;
alert(a);
a()
function a(){
 alert(20);
}

2.第二个例子 undefined 1 0

var a = 0;
 function fn(){
  alert(a);
  var a = 1;
  alert(a);
 }
 fn();
 alert(a);

3.第三个例子 当同样的声明同样的名字重复时，后面写的会覆盖前面写的 //2 1 1 3

a()
 var a = function(){
  alert(1)
 }
 a();
 function a(){
  alert(2);
 }
 a();
 var a = function(){
  alert(3);
 }
 a()

如果你看到我的文章可以收获一些知识，那么我会非常高兴的。

The above is the detailed content of A brief introduction to the parsing order and scope of JS and strict mode. For more information, please follow other related articles on the PHP Chinese website!