6. Execution Environment and scope
(1) Execution Environment (execution context): All JavaScript code runs in an execution environment, and when control is transferred to JavaScript executable code, it enters an execution environment. The execution environment of the activity logically forms a stack, the global execution environment is always the stack bottom element of the stack, and the top element of the stack is the execution environment that is currently running. Each function has its own execution environment, when the execution stream enters a function, the execution environment of the function is pressed onto the top of the stack, the function is finished, then the execution environment is ejected, and control is returned to the previous execution environment.
(2) Variable object (variable object): Each execution environment has a corresponding variable object, and all variables and functions defined in the execution environment are stored in this variable object. This variable object is an object in a background implementation that we can't access in code, but it helps us understand the execution environment and scope-related concepts.
(3) Scope chain: Contemporary code when run in an execution environment, creates a scope chain consisting of variable objects. The front-end of this chain is the variable object of the current code environment, the end of the chain, the variable object of the global environment. When parsing an identifier in one execution environment, it searches for the variable object in the current execution environment, finds it, returns it, and fails to find a variable object that searches up to the global environment at the level of the scope chain and throws a reference exception if it has not been found.
(4) Active object (Activation object): If an execution environment is a function execution environment, the variable object is also called the active object. The active object contains only one variable at the beginning, that is, the arguments object (this object does not exist in the global environment's variable object).
These four concepts, although somewhat abstract, are relatively natural, and can be combined with an example from the JavaScript Advanced Programming (3rd Edition) to understand:
Copy Code code as follows:
Go to global scope, create global variable Object
var color = "Blue";
function ChangeColor () {
Go to ChangeColor scope, create changecolor corresponding variable object
var anothercolor = "Red";
function Swapcolors (Color1, Color2) {
Go to swapcolors scope, create swapcolors corresponding variable object
var tempcolor = Anothercolor;
Anothercolor = color;
color = Tempcolor;
/*
* The objects that can be accessed within the swapcolors scope are:
* Color,changecolor of global variable objects
* ChangeColor function of the corresponding variable object Anothercolor, Swapcolors
* Swapcolors function of the corresponding variable object Tempcolor
*/
}
Swapcolors (' white ');
/*
* The objects that can be accessed within the ChangeColor scope are:
* Color,changecolor of global variable objects
* ChangeColor function of the corresponding variable object Anothercolor, Swapcolors
*/
}
ChangeColor ();
/*
* The objects that can be accessed within the global scope are:
* Color,changecolor of global variable objects
*/
the whole process here is:
(1) Enter the global environment, create a global variable object, the global environment into the top of the stack (this is also the bottom of the stack). According to the previous conclusion about the elevation of the Declaration, a possible process for creating a global variable object is to create a global variable object first, then handle the function declaration setting property changecolor to the corresponding function, and then process the variable declaration setting property color to undefined.
(2) Executing code in the Global environment. First executes the color variable initialization, assigns a value of ' blue ', and then calls the ChangeColor () function.
(3) Call the ChangeColor () function, enter into the ChangeColor function execution environment, create the corresponding variable object (i.e. active object) of this environment, press the environment into the stack top. One possible procedure for creating an active object is to create the active object, handle the internal function declaration set property swapcolors to the corresponding function, and handle the function arguments to create the properties arguments object of the active object, Handle internal Variable Declaration settings property anothercolor to undefined.
(4) Execute ChangeColor () function code. First perform anothercolor initialization to ' red ', and then call the Swapcolors () function.
(5) Call the Swapcolors () function, enter into the swapcolors function execution environment, create the corresponding variable object (active object), push the swapcolors execution environment into the stack top. A possible procedure for creating an active object here is to create the active object, handle the function arguments, take the formal argument as the property of the active object and assign the value to undefined, and create the property arguments object for the active object. And based on the actual parameter initialization form parameters and arguments corresponding values and attributes (attributes Color1 and arguments[0] initialized to ' white ', because there is no second actual parameter, so the Color2 value is undefined, And the length of the arguments is only 1, after the function parameter is processed, the function internal variable declaration is processed, and the tempcolor is used as the property of the active object and assigned to undefined.
(6) Execute swapcolors () function code. Initialize the assignment to the Tempcolor, and then implement the value Exchange function (where both the color and the Anothercolor values are read along the scope chain).
(7) After the execution of the Swapcolors () function code, return to the undefined, the corresponding execution environment pop-up stack and destroy (note, this will destroy the execution environment, but the corresponding activity of the execution environment is not necessarily destroyed), the current execution environment reverts to the ChangeColor () The execution environment for the function. As the Swapcolor () function finishes and returns, ChangeColor () is also executed, returning undefined, and ejecting the execution environment of the ChangeColor () function and destroying it, and the current execution environment reverts to the global environment. The entire processing process is complete, and the global environment will be destroyed until the page exits.
The scope chain also explains why a function can recursively call itself itself: The function name is an attribute of the corresponding variable object in the execution environment of the function definition, and then within the function execution environment, it is possible to follow the scope chain to the outside of the function object that the function name points to. If you point the function name to a new function inside the function, the recursive call is incorrect:
Copy Code code as follows:
function fn (num) {
if (1 = num) {
return 1;
}else{
fn = function () {
return 0;
};
Return num * FN (NUM-1);
}
}
Console.info (FN (5));//0
For scope and declaration elevation, look at one more example:
Copy Code code as follows:
var name = ' Linjisong ';
function fn () {
Console.info (name);//undefined
var name = ' Oulinhai ';
Console.info (name);//oulinhai
}
FN ();
Console.info (name);//linjisong
The least intuitive of this may be the 3rd line of output undefined, since name is already defined in the global, but it is possible to get the correct result by parsing the steps above. In addition, in ECMAScript, only the global execution environment and function execution environment, the corresponding only global scope and function scope, there is no block scope--although there are block statements.
Copy Code code as follows:
function fn () {
var fnscope = ' a ';
{
var blockscope = ' B ';
Blockscope + = Fnscope;
}
Console.info (Blockscope);//no block scope, so you can access the entire function scope Blockscope
Console.info (Fnscope);
}
fn ();//ba,a
Console.info (Blockscope);//referenceerror, function extraterritorial, cannot access internally defined variables
Console.info (fnscope);//referenceerror
For scope chains, you can also use the catch blocks of the with, Try-catch statements to extend:
• Adds an Obj object to the front end of the current scope chain when using the with (obj) {} statement.
• Adds an Error object to the front of the current scope chain using the Try{}catch (error) {} statement.
Inserted a more abstract concept, hope not to affect the entire reading fluency, in fact, I also quietly around a so-called "closure" concept, about functions and closures, in the next article detailed description.
7. Function internal objects and this
For users of Object-oriented languages, this is really familiar, not just the newly created object to the constructor! However, in ECMAScript, and don't take it lightly, it's not that simple, although in the case of calling a function with the new operator, this does point to the newly created object, but this is just one way to specify the value of this object, and there are more ways to specify the value of this object. In other words, this is dynamic and can be specified by ourselves freely.
(1) This in the Global environment
In the global environment, this points to the global object itself, in the browser, window, where you can also interpret this as the variable object for the global execution environment, and the variables and functions defined in the global environment are the properties of this variable object:
Copy Code code as follows:
var vo = ' a ';
VO2 = ' B ';
function fn () {
Return ' FN ';
}
Console.info (this = = window);//true
Console.info (THIS.VO);//a
Console.info (THIS.VO2);//b
Console.info (This.fn ());//fn
If you want to refer to a global object in a custom function, although you can use Windows directly, a better way is to pass the global object as a parameter to the function, which is a very common way in the JS library:
Copy Code code as follows:
(function (Global) {
Console.info (Global = = window);//internal can use global instead of window
}) (this);
This is a better way to be compatible (global objects are not necessarily windows in the ECMAScript implementation), and you can simplify the global to G when you compress, instead of using Windows.
(2) function Internal Properties This
In a functional environment, this is an internal Property object that can be understood as a property of the active object that corresponds to the function, and the value of the intrinsic property is dynamic. How is this value dynamically determined?
• When called with new, the function is also called a constructor, and this time inside the function is specified as the newly created object.
Copy Code code as follows:
function fn () {
The property of the active object for var name = ' Oulinhai ';//function
this.name = ' Linjisong '; when calling a function with new, specify this as the newly created object, which is to add attributes to the newly created object
}
var person = new FN ();
Console.info (person.name);//linjisong
var arr = [FN];
Console.info (Arr[0] ())//undefined
You need to be aware of the attributes that are defined in the function execution environment (that is, the properties of the active object) and the This object, and when you call the function using the array element, the function inside this point points to the array itself, so the last example outputs undefined.
• When called as a generic function, this points to the global object.
• When called as a method of an object, this points to the object that calls this method.
Look at the following example:
Copy Code code as follows:
var name = ' Oulinhai ';
var person = {
Name: ' Linjisong ',
Getname:function () {
return this.name;
}
};
Console.info (Person.getname ());//linjisong
var getName = Person.getname;
Console.info (GetName ());//oulinhai
Here the function object itself is anonymous and is an attribute of the person object, when called as an object property, this points to the object, which is called as a generic function when the function is assigned to another function and then called, which points to the global object. This example fully illustrates the "internal properties of the function as a method call to an object", which points to the calling object, and the function as a general function call internal property This points to the global object, and also indicates that the specified for this is dynamic and is specified at the time of the call. Regardless of whether the function is defined individually or as an object method. It is also because the function, as the method call of the object, points to the calling object, so that the next method of invoking the object-that is, a chain operation (a feature of jquery)-can be continued when this is returned within the function.
• When calling a function using apply (), call (), or bind (), this points to the first parameter object. If there are no incoming parameters or null and Undefined,this to the global object (set to NULL in the strict mode of ES5). If the first argument passed is a simple type, this is set to the appropriate simple type wrapper object.
Copy Code code as follows:
var name = ' Linjisong ';
function fn () {
return this.name;
}
var person = {
Name: ' Oulinhai ',
Getname:fn
};
var Person2 = {name: ' hujinxing '};
var Person3 = {name: ' Huanglanxue '};
Console.info (FN ());//linjisong, general function call, internal property This points to the global object, so THIS.name returns Linjisong
Console.info (Person.getname ()),//oulinhai, as an object method call, this points to this object, so this returns Person.name
Console.info (Fn.apply (Person2))//hujinxing, calling functions using apply, call, or bind to execute the first parameter object passed in, so return person2.name
Console.info (Fn.call (Person2));//hujinxing
var newfn = Fn.bind (Person3); The new method in//ES5 creates a newly returned function instance, and the internal this value is specified as the passed-in parameter object
Console.info (NEWFN ());//huanglanxue
The examples listed above are common cases where the first parameter is null or undefined, and interested friends can test themselves. As for the determination of this value, there is an example in the original book:
Copy Code code as follows:
var name = ' The Window ';
var object = {
Name: ' My Object ',
Getname:function () {
return this.name;
},
Getnamefunc:function () {
return function () {
return this.name;
}
}
};
Console.info (Object.getname ());//my Object
Console.info ((Object.getname) ());//my Object
Console.info ((object.getname = Object.getname) ());//the Window
Console.info (Object.getnamefunc () ());//the Window
The 1th is normal output, and the 2nd (object.getname) effect is the same as the Object.getname, and the 3rd (object.getname=object.getname) Returns the function object itself. That is, the 3rd one is called as a generic function, and the 4th one invokes the Getnamefunc method, returns a function, and then calls the function as a general function.
8. Function Properties and Methods
A function is an object, so you can also have its own properties and methods. However, function properties and methods are easily confused with the internal properties of functions, since it is easy to confuse, put them together to see, just like a pair of twins, do not control the look, unfamiliar people can not distinguish.
First, the concept of the distinction:
(1) Function Internal properties: Can be understood as the function of the corresponding active object properties, can only be accessed from within the function body of the property, the function is called every time, will be redefined, dynamic.
(2) Function properties and methods: This is the property of a function as an object, so long as the function is defined, the function object is created, the corresponding properties and methods are accessible, and unless you explicitly assign another value in your code, their values do not change and therefore are static. There is an exception property caller, which indicates that the function called the current function is dynamically specified when the function is invoked, and therefore the caller property and function internal properties arguments, this is also explained in the JavaScript Advanced Programming (3rd edition), in fact, In the strict mode of ES5, you cannot assign a value to a function property that has a dynamic attribute caller.
The concept of light is very abstract, it is not so easy to understand, and then the attributes are listed together (not included in some non-standard attributes, such as name):
| Category |
Name |
Inheritance of |
Description |
Note |
| Function Internal Properties |
This |
- |
The environment object to which the function is executed |
is very different from the general object-oriented language. |
| Arguments |
- |
Class Array object representing the actual parameter of the function The arguments itself also has its own attributes: Length, callee, and caller |
1, the Length property represents the actual number of parameters received 2. The callee attribute points to the function object itself, that is: Fn.arguments.callee = = fn 3, caller property mainly and function of the caller, the value is always undefined |
| function properties |
Caller |
Whether |
Functions that call the current function |
Although the function definition is accessible, it is never null when accessed in the function body, and returns the function that calls the current function when it is accessed in the function body, calling the function in the global scope returns null |
| Length |
Whether |
The length of the function form argument |
is the number of parameters that are named when the function is defined |
| Prototype |
Whether |
Function Prototype Object |
Prototype object is the foundation of ECMAScript implementation inheritance |
| Constructor |
Is |
Inherits from object, representing functions that create instances of a function, that is, function () |
Value is always a function, that is, the built-in functional functions () |
| Function method |
Apply |
Whether |
Call the function itself to accept parameters in the (Class) array |
These three methods are mainly used to dynamically bind functions inside properties this 1, apply and call will be executed immediately after the binding 2, bind after binding can be called when needed to execute |
| Call |
Whether |
Call the function itself to enumerate the parameters |
| Bind |
Whether |
binding function scope, new in ES5 |
| Tolocalstring |
Covered |
Overrides the method in the object type, returning the function body Different browser implementations may be different, return the original code, or you can return the code after the annotation is removed |
| Tostring |
Covered |
| valueof |
Covered |
| hasOwnProperty |
Is |
Directly inherits from the object type method, uses the same object |
| propertyIsEnumerable |
Is |
| Ispropertyof |
Is |
function properties and methods, in addition to the properties and methods inherited from object, as well as the properties and methods peculiar to the function itself, the most common method is naturally the apply (), call () in the previous section, both of which are used to set the function's internal property this to extend the scope of the function. While the Apply () extension function is scoped to accept the parameters of the function in the (Class) array, the call () extension function scopes need to enumerate the function arguments to pass, looking at the following example:
Copy Code code as follows:
function sum () {
var total = 0,
L = arguments.length;
for (; l; l--) {
Total + = Arguments[l-1];
}
return total;
}
Console.info (Sum.apply (null,[1,2,3,4));//10
Console.info (Sum.call (null,1,2,3,4));//10
However, it is important to emphasize that the main function of apply and call is to extend the scope of the function. Apply and call invoke the function immediately when extending the scope, which makes the application very restrictive, so a new bind () function is added to the ES5, which is also used to extend the scope, but you can not execute the function immediately, it returns a function instance, The first argument passed into it is scoped to the original function. One possible implementation of it is as follows:
Copy Code code as follows:
function bind (scope) {
var that = this;
return function () {
That.apply (scope, arguments);
}
}
Function.prototype.bind = bind;
This involves a concept of closure, which will continue tomorrow.
