Javascript this in-depth understanding

Recently I have read a lot of JavaScript Library source code, such as prototype and ext core. These libraries are widely applied to this concept. It was not until yesterday that the book "Return of the Javascript King" had a profound understanding of this.
It comes down to the following:
1. Function callers and owners
In JavaScript, functions have the concepts of callers and owners. Callers refer to the objects that call functions. They are usually references to the functions that call the current function. If they are top-level calls, so caller = NULL, most browser JavaScript implementations can be obtained using the caller attribute (this is not part of the ecmascript specification, and should be used with caution ). From the followingCodeThis can be well understood:

Copy code The Code is as follows: function (){
Alert ('fun a caller = '+ A. Caller );
}
Function B (){
A ();
}
A ();
B ();

-----------
two dialog boxes are displayed:
1.
fun a caller = NULL;
2.
fun a caller = function B () {
A ();
}< br> ------------------------
for the owner, this refers to the object that calls the function (a dynamic concept). In the function body, this refers to the function owner. Here, this is totally different from Java and C ++'s this pointer. Many people ignore this, which is one of the reasons that this in Javascript cannot be well understood. Take a look at the following example: copy Code the code is as follows: var OA ={< br> X: 1,
Y: 2
}< br> var ob ={< br> X: 11,
Y: 12
}< br> function a (W) {
alert (W + "=" + this. X + "," + this. y)
}< br> ("? ");
OA. fun = A;
OA. fun ("A");
ob. fun = A;
ob. fun ("B");

---------
The owner is not specified when a () is called at the beginning. Generally, this indicates the top-level elements of the browser window, and the properties of X and Y are not defined in the window.
So the result is :? = Undefined, undefined
Oa. fun = A; OA. fun ("A"); assign the function reference value to the property fun for image A. Then, the owner of the called function becomes a, and the result is displayed as: a =.
Similarly, ob. Fun ("B") is displayed as follows: B = 11,12.
In JavaScript, the method to change the owner (this) of a function is to assign the function reference to the attribute of an object.
Two prototype functions are also provided in the function object to implement this function: Apply and call. The first parameter of the two functions is the owner object to be specified, the only difference between them is that apply encapsulates the form parameters to be passed to the function into an array or directly uses the arguments object. The call directly follows the parameter.
Therefore, the above OA. fun = A; OA. fun ("A") can be rewritten to. apply (OA, ["A"]) or. call (OA, "");
OB. fun = B; ob. fun ("B") can be rewritten to. apply (OB, ["B"]) or B. call (OB, "B ");
Knowing the above, we can understand the scope of this and its usage.

Below are some references
Javascript this usage Summary
Http://www.jb51.net/article/16863.htm

Javascript this in-depth understanding
Http://www.jb51.net/article/19425.htm

Javascript This details object-oriented
Http://www.jb51.net/article/17584.htm

Javascript this pointer
Http://www.jb51.net/article/19434.htm

How to use this keyword in Javascript
Http://www.jb51.net/article/7954.htm

Javascript this keyword Usage Analysis
Http://www.jb51.net/article/16235.htm