JavaScript programming time can not always avoid declaring variables and functions, but the interpreter is how and where to find these variables and function? Next, and then continue on a "JavaScript execution context of the series and the execution stack" , through the introduction of variable object (Variable Object) in the context of a deeper understanding of the execution.
The article also mentioned, an execution context of the life cycle can be divided into three stages:
Learn more about execution context is extremely important for beginners, because it involves a variable object, scope chain, this and many other JavaScript is not complete beginners get to know, and very important concept, it relates to that we can not really understand JavaScript, can really understand more easily qualified for follow-up, in a later article we will be 11 in detail, here we focus first look at variable objects .
Variable object
Variable object (Variable Object) is performed with a scope contextual data, stored in a defined context variables and function declarations , look at a sample code:
function foo(){
var a = 10;
function b(){}
(function c(){});
console.log(a); // 10
console.log(b); // function b(){}
console.log(c); // Uncaught ReferenceError: c is not defined
}
foo();
复制代码In the above example, the foo（）variable object function contains variables aand function b（）declarations . The point to note here is that a function expression is not the same as the function declarations contained in the variable object, as seen in the example, access to c () function can lead to incorrect. Because the variable objects are abstract and specific, and it can not be accessed in the code, but will be handled by the JavaScript engine.
Using the variable object above is a function explanatory variables context object stores nothing but variable object exist in the global context, the next variable object to talk to each of the global context and context it functions.
Global context
To the browser, for example, as a global object window. The global context has a special place, it's variable object is windowthe global object. And this special, the thissame applies on the point, thisalso pointing window.
// 以浏览器中为例，全局对象为window
// 全局上下文创建阶段
// VO 为变量对象（Variable Object）的缩写
windowEC = {
VO: Window,
scopeChain: {},
this: Window
}
复制代码In addition, the global context of the life cycle, consistent with the lifetime of the program, as long as the program does not run over, for example, close your browser window, the global context will always exist. All other contexts, have direct access to the global context attributes.
Function context
Already mentioned above, the variable object stores variables and function declarations execution contexts, but in the context of the function, more than one arguments(函数参数列表), a dummy array object.
At this time of the variable object creation phase will include:
- Creating
argumentsan object . Check the current context parameters, attributes and attribute values established in the object. - Check the function declaration for the current context, that is, use the function keyword to declare the function . Property to build a function name in the variable object, attribute value point to reference the function where the memory address. If the variable object properties of the same name already exists, the complete replacement of the property.
- Check the current context variable declaration (
varvariable declarations), defaultundefined; if already stated the form of the variable name with the same parameters or a function, the function to prevent the same name is modifiedundefined, it will skip variable declaration, the original attribute value It will be modified.
For the first 3:00 of the "skip" the word surely we have a trace of doubt? Now under the case in accordance with the above rules, variables declared fooencounter function declaration foowill be skipped, but why the final foooutput result is still to be covered?
function foo() { console.log('I am function foo') }
var foo = 10;
console.log(foo); // 10
复制代码The reason is very simple, because the above three rules only apply to variable object creation process , that is, the implementation of the process of creating context. And foo = 10in the execution context of execution running, the output 10 will naturally. Compare the following example:
console.log(foo); // ƒ foo() { console.log('I am function foo') }
function foo() { console.log('I am function foo') }
var foo = 10;
console.log(foo); // 10
复制代码Why is not the same result? In fact, its execution order:
// 首先将所有函数声明放入变量对象中，函数声明变量提升
function foo() { console.log('I am function foo') }
// 其次将所有变量声明放入变量对象中，但是因为foo已经存在同名函数，因此此时会跳过变量声明默认undefined的赋值
// var foo = undefined;
// 然后开始执行阶段代码的执行
console.log(foo); // ƒ foo() { console.log('I am function foo') }
// 在执行上下文的执行过程中运行
foo = 10;
console.log(foo); // 10
复制代码According to the above rules, to enhance the understanding of the variables becomes very simple, we can also see that functionstatement than vara statement that a higher priority . To help you better understand the variable object, we combined a simple example to discuss.
function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();
/* 结果为：
undefined
2
*/
复制代码According to the rules, it is understood that the order of execution may be variable lift understood as:
function test() {
function foo() {
return 2;
}
var a;
console.log(a);
console.log(foo());
a = 1;
}
test();
复制代码This is not a glance of it?
Of course, also be noted that, before the function did not enter the implementation phase, variable object attributes can access! But after entering the implementation phase, variable object (VO) To change the active object (AO), and then begin the implementation phase of the operation.
The implementation phase
The current implementation stage, variable object (VO) activated to active objects (AO), which can be accessed attribute, the execution code sequence function will change the attribute value of the variable object, this stage is divided into two code execution context stage process:
- Into the execution context
- Code execution
Into the execution context
When entering an execution context, this time not executing code. Let's look at an example:
function foo(a, b) {
var c = 10;
function d() {}
var e = function _e() {};
(function x() {});
}
foo(10);
复制代码When entering the parameter 10 with fooa function context, AO expressed as follows:
AO = {
arguments: {
0: 10,
1: undefined,
length: 1
}
a: 10,
b: undefined,
c: undefined,
d: <function reference to d>,
e: undefined,
}
复制代码xIs a function of expression, so the variable object is not among the evalue of the variable is referenced function expression, the variable eitself is declared, so the variable object which.
Code execution
This phase will be executed sequentially code, modify the variable object attribute values, the immediately above example, after completion of execution AO follows:
AO = {
arguments: {
0: 10,
1: undefined,
length: 1
}
a: 10,
b: undefined,
c: 10,
d: <reference to function declaration d>,
e: <reference to Function expression to _e>,
}
复制代码Here the process of creating variable objects on the introduction is over, let us briefly summarize:
- Variable object of the global context of the global object is initialized
- The object initialization function context variables include only
Argumentsobjects - In turn to the variable object entering the execution context add parameter , a function declaration , the variable declaration initial property values, etc.
- Before the function did not enter the implementation phase, variable object attributes can access
- In the code execution stage, will modify the property value of the variable object again, and give that some attribute value
If you think the article to help you slightly, welcome in my GitHub blog points praise and attention, very grateful!
Reproduced in: https: //juejin.im/post/5d0a1dac518825431f5e5e8d