JavaScript you don't know (scopes and closures)

Scopes and closures

? scope

Engine: Responsible for the entire JavaScript compilation and execution process from beginning to end.

Compiler: Responsible for parsing and code generation.

Scope: Collects and maintains a series of queries consisting of all declared identifiers (variables), and implements a very strict set of rules that determine the access rights of the currently executing code to these identifiers.

Scopes are a set of rules that determine where and how to find variables (identifiers).

If the purpose of the lookup is to assign a value to a variable, then the LHS query is used;

If the purpose is to get the value of a variable, the RHS query is used.

? Lexical scopes

Regardless of where the function is called, and no matter how it is called, its lexical scope is determined only by the position where the function is declared.

Deceptive lexical: two mechanisms. Deceptive lexical scopes can cause performance degradation.

Eval ():

function foo (str, a) {

eval (str);

Console.log (A, b);

}

var B = 2;

Foo ("var b = 3;", 1);

1, 3

With ():

function foo (obj) {

With (obj) {

A = 2;

}

}

var O1 = {A:3};

var O2 = {B:3};

Foo (O1);

Console.log (o1.a); 2

Foo (O2);

Console.log (o2.a); Undefined

Console.log (a); 2

? function scope and block scope

Hide internal implementations: You can wrap variables and functions in the scope of a function, and then use that scope to hide them.

Least privilege principle (minimum authorization or minimum exposure principle): Minimize the need to expose the necessary content and hide everything else.

Circumvent conflicts: Hide variables and functions in scopes to avoid collisions between identifiers of the same name.

Wrapper function:

(function foo () {

var a = 3;

Console.log (a);

})();

Anonymous functions:

SetTimeout (function () {...}, 1000);

Disadvantages:

Anonymous functions do not display meaningful function names in stack tracking, making debugging difficult;

If you do not have a function name, you can only use an expired Arguments.callee reference when you need to refer to itself;

Anonymous functions omit function names that are important for code readability/accessibility.

Assigning a function name to a function expression effectively solves these problems:

SetTimeout (function Timeouthandler () {...}, 1000);

Block scope:

The Let keyword binds a variable to any scope in which it resides;

Claims made with let are not promoted in the block scope;

Improve:

Only the declaration itself will be promoted, and the assignment or other running logic will remain in place.

If the promotion changes the order of code execution, it can cause very serious damage;

Both the function declaration and the variable declaration are promoted, but the function is promoted first;

Foo (); 1

var foo;

function foo () {

Console.log (1);

}

foo = function () {

Console.log (2);

}

? Scope closures

As long as the callback function is used, the closure is actually used;

Two prerequisites for module mode:

Must have an external enclosing function, which must be called at least once;

The enclosing function must return at least one intrinsic function in order for the inner function to form a closure in the private scope and to access or modify the private state;

function Coolmodule () {

var something = "cool";

var another = [1, 2, 3];

function dosomething () {

Console.log (something);

}

function Doanother () {

Console.log (Another.join ("!"));

}

return {

Dosomething:dosomething,

Doanother:doanother

};

}

var foo = coolmodule ();

Foo.dosomething ();

JavaScript you don't know (scopes and closures)