Summary of learning JavaScript Ninja Secrets (Second Edition) (3) -- closure and scope

Preface

The electronic version of this book I've been studying and summarizing. The first one has a download link , You can check it out
In retrospect , Know the new chapter 《JavaScript Ninja Secret （ The second edition ） Learning summary （ One ）—— Function part

Where do you use self-discipline , Where will make you . Remember when you can't stand it , I can't stand the ordeal .

Come on! , brothers

Let's start with an auto increasing function

var addnum= function(){
var num=0; // In closure Parameter privatization
return function(){
return num++
}
}
const Addnum= addnum()
Addnum()
console.log(Addnum()) // 1
console.log(Addnum()) // 2

Encapsulate private variables

function Ninja() {
var feints = 0;
this.getFeints = function() {
return feints;
};
this.feint = function() {
feints++;
};
}
var ninja1 = new Ninja();
ninja1.feint();

Tracking code through execution context

There are two types of code , So there are two execution contexts ： Global execution context and function execution context . The most important difference between them is ：

There is only one global execution context , When JavaScript The global context is created when the program starts executing ;
The function execution context is every time the function is called , I'm going to create a new one .

Define the keywords and Lexical Environment of variables

keyword var

var globalNinja = "Yoshi"; //⇽--- Use keywords var Define global variables
function reportActivity() {
var functionActivity = "jumping"; //⇽--- Use keywords var Define local variables within a function
for (var i = 1; i < 3; i++) {
var forMessage = globalNinja + " " + functionActivity; //⇽--- Use keywords var stay for Two variables are defined in the loop
console.log(forMessage === "Yoshi jumping",
"Yoshi is jumping within the for block"); //⇽--- stay for Block level variables can be accessed in loops , Local variables and global variables within a function
console.log(i, "Current loop counter:" + i);
}
console.log(i === 3 && forMessage === "Yoshi jumping",
"Loop variables accessible outside of the loop"); //⇽--- But in for Outside of the loop , Still have access to for Variables defined in the loop
}
reportActivity();
console.log(typeof functionActivity === "undefined"
&& typeof i === "undefined" && typeof forMessage === "undefined",
"We cannot see function variables outside of a function"); //⇽--- Local variables inside the function cannot be accessed outside the function ”

This comes from the fact that var Declared variables are actually always registered in the nearest function or global lexical environment , No focus on block level scopes .

Use let And const Define variables with block level scope

const GLOBAL_NINJA = "Yoshi"; //⇽--- Use const Define global variables , Global static variables are usually expressed in uppercase
function reportActivity() {
const functionActivity = "jumping"; //⇽--- Use const Define local variables within a function
for (let i = 1; i < 3; i++) {
let forMessage = GLOBAL_NINJA + " " + functionActivity; //⇽--- Use let stay for Two variables are defined in the loop
console.log(forMessage === "Yoshi jumping",
"Yoshi is jumping within the for block");
console.log(i, "Current loop counter:" + i); //⇽--- stay for In circulation , It's no surprise that we can access block level variables 、 Function variables and global variables
}
console.log(typeof i === "undefined" && typeof forMessage === "undefined",
"Loop variables not accessible outside the loop"); //⇽--- Now? , stay for The loop cannot be accessed outside for Variables in the loop
}
reportActivity();
console.log(typeof functionActivity === "undefined"
&& typeof i === "undefined" && typeof forMessage === "undefined",
"We cannot see function variables outside of a function"); //⇽--- Naturally , You cannot access any variables inside a function outside of a function

And var The difference is ,let and const More direct .let and const Define variables directly in the nearest lexical environment （ It can be in block level scope 、 Within the loop 、 Within a function or in the global environment ）. We can use let and const Define the block level 、 Function level 、 Global level variables .

Register identifier in Lexical Environment

const firstRonin = "Kiyokawa";
check(firstRonin);
function check(ronin) {
assert(ronin === "Kiyokawa", "The ronin was checked! ");
}

First executed. check function , Post statement . But no mistake , For what ？
JavaScript Code execution is actually in two phases .

In the first phase , No execution code , however JavaScript The engine accesses and registers variables and functions declared in the current lexical environment .JavaScript After the first phase
Start the second phase , How to execute depends on the type of variable （let、var、const And function declaration ） And the type of environment （ Global environment 、 Function environment or block level scope ）.

JavaScript A typical feature of ease of use , It doesn't matter the order in which the functions are declared .

function overloading

console.log(fun); // function
var fun =3;
function fun(){
}
console.log(fun); // 3

It's the function variable that improves , But we need a deeper understanding of the whole process through the Lexical Environment .
JavaScript This behavior is directly caused by the result of identifier registration .

At the end of the process 2 In step , Functions defined by function declaration create functions before code execution , And assign it to the corresponding identifier ;
In the 3 Step , Handle the declaration of variables , Variables that are not declared in the current environment , Will be assigned to undefined.
Example , In the 2 Step —— When registering function declarations , Because of the identifier fun Already exist , Has not been assigned to undefined. This is the first 1 One test fun Whether it is the reason that the assertion execution of the function passed . after , Execute assignment statement var fun = 3, The digital 3 Assign to identifier fun. After executing the assignment statement ,fun It doesn't point to functions anymore , It's pointing to numbers 3.

Summary

Closures allow access to all variables in the environment in which the closure was created . Closures are functions and variables in the scope in which the function was created , establish “ Safety bubble ”. In this way , Even if the scope in which the function was created has disappeared , But the function can still get everything it needs to execute .
We can use these advanced features of closures ：

Through the variables in the constructor and the constructor to simulate the private properties of the object .
Handling callback functions , Simplify the code .

JavaScript The engine uses the execution context stack （ The call stack ） Tracking function execution . Every time a function is called , Will create a new function execution context , And push it to the top of the call stack . When the function is finished , The corresponding execution context will be pushed out of the call stack .
JavaScript The engine tracks the identifier through the lexical context （ It's called scope ）.
stay JavaScript in , We can define the global level 、 Function level or even block level variables .
Keywords can be used var、let And const Defining variables ：

keyword var Define the nearest function level variable or global variable .
keyword let And const Define a variable that can only be assigned once .

Closure is JavaScript Side effects of scope rules . When the scope where the function was created disappears , The function can still be called .”

Excerpt from : [ beautiful ] John Resig Bear Bibeault Josip Maras. “JavaScript Ninja Secret （ The first 2 edition ）.” iBooks.