Precompiled
Although JavaScript is a single-threaded, interpreted language, it also has a pre-compilation process. During pre-compilation, related declarations will be upgraded and some basic syntax errors will be checked. First of all, we need to understand some knowledge points in order to better understand pre-compilation.
The use of undeclared variables is equivalent to the definition of global variables (even if used in functions)
b = 100 //相当于定义全局变量 var b = 100
Function precompilation
Let's start with function precompilation. Precompilation happens before the function starts. He will do the following steps to mediate our definition of the same name.
- Create an AO object, which is Activation Object (scope context)
- Find the function parameter and variable declaration, use it as the AO attribute name, and the value is undefined.
- The actual parameter value and the formal parameter are unified and assigned to AO.
- Find the function declaration in the function body, use it as the AO attribute name, and the value of the corresponding function body.
(The definition of the same name cannot appear in the object, so according to the rules and order coverage, the weight of the function body is the highest.)
Global precompilation
Similar to the above steps, the global pre-compilation occurs at the moment before the global run. Since the global has no formal parameters, the third step of the function pre-compilation can be omitted. Secondly, the global generation is called GO, that is, Global Object , we are here You can understand GO as window, so global variables can also be called by window. variable names .
Practice questions
function test() {
console.log(b);
if(a){
var b = 100;
}
console.log(b);
c = 234;
console.log(c);
}
var a;
test();
a = 10;
console.log(c)
According to our above steps to understand this exercise, the result should be:
undefined
undefined
234
234
Scope
Every JavaScript function is an object. Some properties of the object are not accessible to us, and are provided for use by the js engine, such as [[scope]], which is what we call scope , which stores a collection of runtime contexts. .
Scope chain : the collection of
execution context objects stored in [[scope]] The executor context is created before the function starts, and is automatically destroyed when the function runs. When a function needs to find a value, it searches from top to bottom in the scope chain. That is, only inner functions can call outer variables, and outer functions cannot call inner variables.
Closure
When the function defined inside the function is stored outside the function, which leads to the leakage of function resources, we can call it a closure. Shown in the following form:
function a() {
var num = 10;
function b() {
num++;
console.log(num)
}
return b;
}
var dome = b;
dome();
We use the dome variable outside the a function to receive the b function, so that we can directly abandon the a to adjust the b, thereby modifying the value of the variable in the a function. According to the knowledge of our understanding of the scope, when the use of a function is completed, it will The scope context generated by the current function is automatically destroyed, but the child function defined inside the function will continue to be retained. The parent function scope context relationship obtained through inheritance, so even if the num variable cannot be accessed through function a, we can still use the external The reserved function b accesses the num variable.
In some programming designs, if we cleverly use closures, it will bring us many benefits, such as accumulating sums, or making caches.
But if we inadvertently misuse the closure, it may be counterproductive and it is difficult to troubleshoot the error.
function a() {
arr[];
for(var i = 0;i < 5;i++){
arr[i] = function b() {
console.log(i+" ");
}
}
return arr[];
}
var demo = a();
for(j = 0;j < 5;j++){
document.write(arr[j]);
}
function a() {
arr[];
for(var i = 0;i < 5;i++){
(function (j) {
arr[j] = function b() {
console.log(j+" ");
}
}(i))
return arr[];
}
var demo = a();
for(j = 0;j < 5;j++){
document.write(arr[j]);
}
Understand these two questions. Although the codes are almost the same, the results of the two programs are completely different. The first output is "5 5 5 5 5", and the second output is "0 1 2 3 4" ", very clever use of scope, closure, and immediate execution of the knowledge of the function to analyze these two questions, you can find the correct answer.