The scope of the pre-analytic javascript

Pre-parsing of js

Before talking about the pre-parsing of js, look for some c ++ program

#include <iostream>
using namespace std;

void useGreet(){
    greet();
}

void greet(){
    cout << "hello" <<endl;
}

int main() {
    useGreet();
    return 0;
}
复制代码

As long as there is a c ++ you will know the basis of the above procedure is not compile because useGreet () function call to a function that is not declared, even greet () function in its statement. This is the c ++ compiler itself decide the order. Let's look at a piece of code written by js

function useGreet(){
	greet();
}

function greet(){
	console.log('hello');
}

useGreet();
复制代码

The above code is the normal operation

These two examples Although the relationship with pre-parsing of js is not great, but also reflects the contents of the js preresolved

Let's look at this js code

let a = 1;
let fun = function(){
	console.log(a);
	let a = 2;
	console.log(a);
}
fun();
复制代码

The code for the operating results

undefined
2
复制代码

Look at the following code

let a = 1;
let fun = function(){
	console.log(a);
	a = 2;
	console.log(a);
}
fun();
复制代码

The code for the operating results

1
2
复制代码

The results seem to run two very minor code differences are poles other. Before explaining operating results, we need to know js functions and variables in the model stored in memory, pre-parsing of js, js scope chain.

Functions and variables stored in memory model

js data fall into two categories

basic type

Reference type (object type) wherein the stack base type is stored in memory, and the object is stored in the heap memory.

var person = {
	name: "Jack",
	sex: "man"
}
复制代码

The example first declares a variable person, then be assigned. Wherein the value of person {name: "Jack", sex: "man"}stored in the heap memory, and stores person that a literal address value of the address is the address of the person stored in the heap memory

Pre-parsed

Js refers to the pre-parsed, before the scope, JavaScript code execution current, default browser will first of all the variables with the var and function declarations were premature declaration or definition. That is the first implementation of variable declarations and function declarations and statements of assignment, and then execute other statements in the order. Note that the pre-analytical variables and functions are different, pre-analytical variables were only statement without executing the assignment, and pre-analytic function declaration with the assignment will be executed.

E.g

fun();
function fun(){
	console.log("hello");
}
复制代码

This code can be normal output hello, its execution order, the first to fun()function declarations and assignments, and then execute fun()the call

Look at the following piece of code

fun(str);
function fun(str){
	console.log(str);
}
let str = "hello";
复制代码

The above code can be output as a result undefined, their execution order, the first to fun()function declarations and assignments, making stra statement, and then execute fun()the calling function, and then execute the assignment str, because before the assignment on the use of str, so output the initial value of str undefined.

The scope chain

The scope chain is: When a scope to be used in a variable, first find out if there is the scope of this variable, if the variable stop to find and obtain, if not then find higher scope of this scope, repeat the above process until you find the variables so far. If the global role did not find the error.

Now you can make interpretation of the results of two pieces of code to run very beginning of

The first paragraph

let a = 1;
let fun = function(){
	console.log(a);
	let a = 2;
	console.log(a);
}
fun();
复制代码

This code has two scopes, a global scope, as well as a fun () anonymous function scope

First implementation of the global scope of the code

let a
=> let fun = function
=> fun()
=> a=1
复制代码

And then perform the function scope of the code, the implementation of fun () function call execution

let a // 预解析
=> console.log(a)
=> a=2
=> console.log(a)
复制代码

Second paragraph

let a = 1;
let fun = function(){
	console.log(a);
	let a = 2;
	console.log(a);
}
fun();
复制代码

This code also has two scopes, a global scope, as well as a fun () anonymous function scope, the only difference is that an anonymous function does not let a scope or var statement

Execution of the global scope of the code is the same as with the first paragraph

let a 
=> let fun = function 
=> fun() 
=> a=1
复制代码

But fun () function call execution process is different

console.log(a) 
=> a=2 
=> console.log(a)
复制代码

fun()The scope did not declare any variable or function, so the fun()scope is no pre-resolving process, the first sentence of execution console.log(a), as ain fun()there is no definition of scope, so the fun()scope on a scope to find, the stage ahas been declared and a value of 1, the first output 1; performed a=2, assignment of a is 2, then perform console.log(a), when a = 2, the output 2

Reproduced in: https: //juejin.im/post/5cf9cb2df265da1bc8541a5c