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.