JavaScript this in-depth understanding_javascript skills

I have read a lot of JavaScript library source code recently, such as prototype, Ext core, etc. This concept is heavily used in these libraries. It wasn't until I read the book "The Return of the JavaScript King" yesterday that I had a deep understanding of this.
To sum it up:
1. Function caller and owner
There are two concepts of caller and owner for functions in JavaScript. The caller refers to the object that calls the function, usually A reference to the function that called the current function. If it is a top-level call, then caller=null. The JavaScript implementation of most browsers can be obtained using the caller attribute (this is not part of the ECMAScript specification, so use it with caution). This can be well understood from the following code:

Copy the code The code is as follows:

function a(){
alert('fun a caller=' a.caller);
}
function b(){
a();
}
a() ;
b();

----------
You can see two dialog boxes as a result of the operation:
1.
fun a caller=null;
2.
fun a caller=function b(){
a();
}
-------------- ------------
As for the owner, it refers to the object that calls the function (a dynamic concept). This in the function body points to the owner of the function. This here is two completely different concepts from the this pointer in Java and C. Many people ignore this, which is one of the reasons why this in JavaScript cannot be well understood. Take a look at the following example:

Copy the code The code is as follows:

var oa = {
x:1,
y:2
}
var ob = {
x:11,
y:12
}
function a(w){
alert(w "=" this.x "," this.y)
}
a("?");
oa.fun = a;
oa.fun("a" );
ob.fun = a;
ob.fun("b");

---------
The initial call a( ) At this time, the owner is not specified. Generally, this points to the top-level element window of the browser, and the x and y attributes are not defined in the window.
So the result is displayed as: ?=undefined,undefined
oa.fun = a; oa.fun("a"); Assign the function reference to the attribute fun of object a, and then call all the functions becomes a, then the result is displayed as: a=1,2
Similarly, ob.fun("b") displays: b=11,12.
The way to change the owner (this) of a function in JavaScript is to assign the function reference to a property of an object.
The Function object also provides two prototype functions to implement this function: apply, call. The first parameter of these two functions is the owner object to be specified. The only difference between them is apply Encapsulate the subsequent formal parameters to be passed to the function into an array, or use the arguments object directly. And call directly follows the formal parameters.
So the above oa.fun=a; oa.fun("a") can be rewritten as a.apply(oa, ["a"]) or a.call(oa, "a");
ob.fun=b; ob.fun("b") can be rewritten as a.apply(ob, ["b"]) or b.call(ob, "b");
After knowing the above, It is easy to understand the scope and use of this.

Here are some reference documents
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 detailed explanation object-oriented
http://www.jb51.net/article/17584.htm

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

Detailed explanation of 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