Home > Web Front-end > JS Tutorial > Detailed interpretation of JS pre-interpretation

Detailed interpretation of JS pre-interpretation

亚连
Release: 2018-05-21 09:19:05
Original
1387 people have browsed it

Below I will bring you a related understanding of JS pre-interpretation. Let me share it with you now and give it as a reference for everyone.

1. The memory space in JS is divided into two types: stack memory and heap memory

Stack memory: provides an environment for JS code execution; stores basic data types Value; ->Global scope or private scope are actually stack memory

Heap memory: stores values ​​of reference data types (objects store attribute names and attribute values ​​in them, functions store the function body in The code is stored as a string)

2. When the browser loads our HTML page, it will first provide an environment for JS code execution -> global scope (global-> window)

3. Before the JS code is executed, the browser needs to do something on its own: declare or define all the keywords with var/function in advance -> "pre-interpretation" (Variable sound)

Declaration (declare) -> Tell the browser that I have such a thing, such as var num1; function fn;

Definition (defined) -> Give us Declared variables or function assignments, such as num1=12; fn=function(){}

[Important] Variables are only declared but not defined, and the default value is undefined

4. Var and function are processed differently in the pre-interpretation stage

var -> This variable is only declared in advance during pre-interpretation, and will only be declared when the code is executed. Complete the assignment operation

function -> During pre-interpretation, the declaration and definition will be completed in advance (when the code is executed, the defined code will be skipped directly)

[Important] At the beginning, only the pre-interpretation is performed under window. Currently, all strings stored in the fn function are strings, so var total has no practical meaning, so no pre-interpretation is performed -> "Pre-interpretation occurs in the current function "

console.log(obj);//->undefined
 var obj = {name: "张珊珊", age: 10};
 function fn(num1, num2) {//代码执行到这一行的时候直接的跳过,因为在预解释的时候我们已经完成了声明加定义
var total = num1 + num2;
 console.log(total);
 }
 var num1 = 12;

 fn(num1, 100);//执行fn,把全局变量num1的值赋值给形参num1,把100赋值给形参num2
Copy after login

#5. Variables declared in the global scope are global variables

Variables declared in the private scope are private variables; functions Formal parameters are also private variables;

How to tell whether a variable appearing in a function is private or global?

First check whether it is a formal parameter, and then check whether it has been declared in a private scope (Have you ever used var?) One of the two is a private variable, so no matter where it appears in the current function, it is private, and has nothing to do with the global one; if there is neither, it means it is not private. , then search in its upper-level scope...

6. When the function is executed, a new private scope (stack memory) will be formed for the code in the function body Execution;

1) Assign values ​​to formal parameters
2) Pre-interpretation under private scope
3) Execution of code under private scope

formed new The private scope also protects the private variables inside from the outside world. We use this protection mechanism of the function ->"closure

Difference: those with var can be declared before the code is executed. , cannot be declared in advance without var

1. Pre-interpretation must be performed regardless of whether the condition is true

window预解释:var a; -> window.a;
 if (!("a" in window)) {//"a" in window -> true
 var a = "我们";
 }
console.log(a);//->undefined
Copy after login

2. Pre-interpretation only occurs in On the left side of "=", only the left side is pre-interpreted, and the value on the right side is not pre-interpreted.

Function expression of anonymous function: assign the part defined by the function as a value to a Events of variables or elements

When pre-interpreted: var fn; ->The default value of fn is undefined

fn();//->undefined() Uncaught TypeError: fn is not a function JS中只有函数可以执行 && JS上面的代码如果报错了,在不进行任何的特殊处理情况下我们下面的代码都不在执行了
var fn = function () {
 console.log("ok");
 };
 fn();

预解释的时候:fn=xxxfff000
 fn();//->"ok"
 function fn() {
 console.log("ok");
 }
 fn();//->"ok"
Copy after login

3. The code below return in the function body is no longer executed, but The following code needs to participate in pre-interpretation; and the things after return need to be processed, but because it is returned as a value, it is not pre-interpreted;

var total = 300;
 function fn() {
 console.log(total);
 return function sum() {};//return是把函数中的值返回到函数的外面,这里是把function对应的内存地址返回的到函数的外面,例如:return xxxfff111;函数体中return下面的代码都不在执行了
var total = 10;
 }
 fn();
Copy after login

4. The function of the anonymous function has a global effect There is no pre-interpretation under the domain

Self-executing function of anonymous function: definition and execution are completed together

(function(num){})(100);

5. During pre-interpretation, if you encounter a duplicate name, declare it only once, without repeated declarations, but the assignment must still be repeated.

If the name of the variable and the name of the function in JS The same is counted as duplicate

Pre-explanation:

var fn; 声明
fn = xxxfff000; [声明]不要了+定义
fn = xxxfff111; [声明]不要了+定义
->fn=xxxfff111
 var fn = 12;//window.fn=12
 function fn() {//window.fn=function(){}
 }
 function fn() {
 }
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using Js to implement several methods of deleting one or more items in an array

Details Talk about the properties and methods of the built-in object Math in js (clear at a glance)

JSON object (graphic tutorial, simple and crude)

The above is the detailed content of Detailed interpretation of JS pre-interpretation. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template