This is a detailed description of javascript Running Mechanism _ basic knowledge

This article mainly introduces the javascript running mechanism this. If you need it, you can refer to this as an important keyword in object-oriented language, understanding and understanding the use of this keyword is critical to the robustness and beauty of our code. This in javascript is different from pure object-oriented languages such as Java and C #, which makes this even more confusing and confusing.

This usage:
1. Pure Functions
2. Object method call
3. Use new to call the constructor
4. Internal functions
5. Use call/apply
6. Event binding

1. Pure Functions

The Code is as follows:

Var name = 'this is Windows'; // defines the name attribute of the window.
Function getName (){
Console. log (this); // console output: Window // this points to the Global Object -- window object
Console. log (this. name); // console output: this is window/
}


GetName ();

Running result analysis: this in pure functions all points to the global object, that is, window.

2. Object method call

The Code is as follows:

Var name = 'this is Windows'; // defines the name attribute of the window to see if this. name is called
Var testObj = {
Name: 'This is testObj ',
GetName: function (){
Console. log (this); // console output: testObj // this indicates the testObj object.
Console. log (this. name); // console output: this is testObj
}
}

TestObj. getName ();

Running result analysis: In the called method, this points to the object that calls this method.

3. Use new to call the constructor

The Code is as follows:

Function getObj (){
Console. log (this); // console output: getObj {} // the newly created getObj object pointed to by this
}

New getObj ();

Running result analysis: this in the new constructor points to the newly generated object.

4. Internal functions

The Code is as follows:

Var name = "this is window"; // defines the name attribute of the window to see if this. name is called
Var testObj = {
Name: "this is testObj ",
GetName: function (){
// Var self = this; // save this object temporarily
Var handle = function (){
Console. log (this); // console output: Window // this points to the Global Object -- window object
Console. log (this. name); // console output: this is window
// Console. log (self); // in this way, this can be obtained to point to the testObj object.
}
Handle ();
}
}

TestObj. getName ();

Run Result Analysis: this in the internal function still points to the global object, that is, window. This is generally considered a JavaScript design error because no one wants to point this in internal functions to a global object. The general processing method is to save this as a variable, which is generally agreed to be that or self, as shown in the above Code.

5. Use call/apply

The Code is as follows:

Var name = 'this is Windows'; // defines the name attribute of the window to see if this. name is called
Var testObj1 = {
Name: 'This is testobj1 ',
GetName: function (){
Console. log (this); // console output: testObj2 // this indicates the testObj2 object.
Console. log (this. name); // console output: this is testObj2
}
}

Var testObj2 = {
Name: 'This is testObj2'
}

TestObj1.getName. apply (testObj2 );
TestObj1.getName. call (testObj2 );

Note: apply is similar to call, but the 2nd parameters of the two are different:
[1] call (thisArg [, arg1, arg2 ,... ]); // List of 2nd parameters used: arg1, arg2 ,...
[2] apply (thisArg [, argArray]); // use the array of parameters for the first 2nd parameters: argArray
Analysis of running results: use this in the call/apply function to point to the bound object.

6. Event binding
This in the event method should be the most confusing place, and most errors are caused by this.

The Code is as follows:

// Bind the page Element