this and execution context implementation code_javascript skills

The execution context of a function is determined by the current running environment:
1. Global variables and global functions are attached to the global object (window), so using "var" or "this" to define global variables is equivalent.
2. Execution context and scope are different. The execution context is determined at runtime and may change at any time, while the scope is determined at definition time and never changes.
3. If the method of an object is currently executed, the execution context is the object to which this method is attached.
4. If the current process is to create an object or execute a method of an object, the execution context is the object being created.
5. If a method does not explicitly specify an attached object when executing, the context of this method is the global object.
6. Use call and apply to change the execution context of the object. " global variable"; //The global variable is attached to the object
//this.v1 = "global variable with this"; //When global variables are defined, the two methods var v1 and this.v1 are equivalent.
function func1(){

var v1 = "part variable"; writeHtml(v1); writeHtml(this.v1); } func1(); // part variable //global variable

Because there is a v1 variable in func1 with the same name as the global object, so the direct reference to v1 in func1 refers to the variable defined in func1. JavaScript also has the feature of local variables hiding global variables. But func1 does not explicitly specify the attached object, so its execution context is the global object, and the variable referenced using this is the global variable.
Look at a slightly more complicated example:




Copy the code


The code is as follows:

function ftest(){
var v = "v1v1v1";
this.this_v = "this_v";

return function(){ writeHtml(v); writeHtml(this.this_v ); } } var a = ftest(); var v = "v2v2v2";

writeHtml(this_v); // this_v

a(); // v1v1v1
//this_v


When ftest is executed as a function, the context is the global object. So the variables defined using this in ftest become global variables. So we directly use the variable name to access the value of this_v outside ftest. However, since the anonymous function returned in ftest is defined inside ftest, the scope of this anonymous function is inside ftest. Therefore, when there is a global variable v and a local variable v with the same name, this anonymous function accesses the variable v defined internally in ftest.
Next, treat ftest as a class and instantiate it using the new keyword:




Copy the code


The code is as follows:

function ftest(){
var v = "v1v1v1";
this.this_v = "this_v";

return function(){ writeHtml(v); writeHtml(this.this_v); } } var a = new ftest(); var v = "v2v2v2";

//writeHtml(this_v); // Error :this_v undefined

a(); //v1v1v1
//undefined


When instantiating ftest as an object, the context is created during the object creation process the object itself. Note that the object created at this time is an instance of ftest, and a function is returned after the creation is completed. This causes new ftest() to return a function after instantiation, rather than a reference to the object after instantiation of ftest(). Therefore, this instantiated object cannot be referenced. When we define the returned function, because the context of this function is not specified with this, the context of the returned function is a global object and the scope is inside the ftest() function. Therefore, when function a() is executed, the this_v variable is not defined in the context, resulting in an access error.
Note, the above code:




Copy the code


The code is as follows:

function ftest( ){
return function(){
}

} This form is not a static encapsulation environment. The static encapsulation environment should be: immediately after the definition of a function is completed Execute, and return an internal function in the function after execution is completed. Let’s look at the following example to observe the impact of scope and context on variable references.

Copy code


The code is as follows:

var v = "global variable";
function method(){
writeHtml(v);
writeHtml(this.v);
}
var Class1 = function(){
var v = "private variable";
this.v = "object variable";

var method2 = method;
this.method2 = method;

var method3 = function(){
writeHtml(v);
writeHtml(this.v);
}
this.method3 = function(){
writeHtml(v) ;
writeHtml(this.v);
}

method2(); //global variable
//global variable
this.method2(); //global variable
//object variable
method3(); //private variable
//global variable
this.method3();//private variable
//object variable
}
var obj = new Class1();

Since method is defined globally, the scope of method is determined to be global when it is defined. So when method2 is called inside Class1, its scope is global and the context is the global object. Therefore, variables accessed in functions are global variables.
Similarly, when this.method2 is called, its scope is global, but because the function uses the this keyword when it is defined to indicate the object whose context is Class1, the function accesses variables without context qualification. When accessing a global variable, accessing a context-limited variable accesses the corresponding variable in the current context.
When calling method3 and this.method3, local variables are accessed when accessing variables without context, because local variables hide global variables. When there is context limitation, it is the same as method 2, and the variables in the current context are accessed.
Using call and apply can change the execution context. Since call and apply only have different parameter types, call is used in the following examples to demonstrate.

Copy code The code is as follows:

var v = "global variable";
var method = function(){
writeHtml(this.v);
}
var Class2 = function(){
this.v = "object variable in instance of Class2";
this .method = function(){
writeHtml(this.v);
}
}
var Class3 = function(){
this.v = "object variable in instance of Class3" ;
this.method = function(){
writeHtml(this.v);
}
}

var obj2 = new Class2();
var obj3 = new Class3();

method(); //global variable
obj2.method(); //object variable in instance of Class2
obj3.method(); //object variable in instance of Class3

method.call(obj2); //object variable in instance of Class2
method.call(obj3); //object variable in instance of Class3
obj2.method.call (obj3); //object variable in instance of Class3
obj2.method.call(this); //global variable
obj3.method.call(obj2); //object variable in instance of Class2
obj3.method.call(this); //global variable

As you can see, you can use call or apply to bind the method to the specified context. In the global environment, the context pointed to by this is the global object.