Recently, I have read a lot of JavaScript library source codes, such as prototype, Ext core, etc. This concept is widely used in these libraries. It was not until yesterday that I read the book "The Return of the King of JavaScript" that I had a deep understanding of this.
To sum it up:
1. Function caller and owner
There are two concepts of function (function) in JavaScript: caller and owner. Caller refers to the object that calls the function, usually a reference to the function that calls the current function. If it is a top-level call, then caller=null. Most browser JavaScript implementations can be obtained using the caller property (this is not part of the ECMAScript specification, please use it with caution). This is a good understanding of the following code:
function a(){
alert('fun a caller=' + );
}
function b(){
a();
}
a();
b();
-----------
You can see two dialog boxes when running the results:
1.
fun a caller=null;
2.
fun a caller=function b(){
a();
}
--------------------------
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 a completely different concept from this pointer in Java and C++, and many people ignore this pointer, which is one of the reasons why this in JavaScript is not well understood. Take a look at the following example:
var oa = {
x:1,
y:2
}
var ob = {
x:11,
y:12
}
function a(w){
alert(w + "=" + + "," + )
}
a("?");
= a;
("a");
= a;
("b");
---------
The initial call a() is not specified at this time. Generally, this refers to the top-level element of the browser window, and the x and y attributes are not defined in the window.
So the result is shown as: ?=undefined,undefined
= a; ("a"); Assign the function reference to the attribute fun of the object a, and then the owner of the call function becomes a, and the result is displayed as: a=1,2
Similarly ("b") shows: b=11,12.
In JavaScript, the method to change the owner of a function (this) is to assign a function reference to an object's attribute.
Both Function objects provide 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 that apply encapsulates the subsequent parameters to be passed to the function into an array, or directly uses the arguments object. The call directly follows the formal parameters.
So the above =a; ("a") can be rewritten to (oa, ["a"]) or (oa, "a");
=b; ("b") can be rewritten to (ob, ["b"]) or (ob, "b");
Knowing the above, it is easy to understand the scope and use of this.
Below are some reference documents
Javascript this usage summary
https:///article/
JavaScript this in-depth understanding
https:///article/
JAVASCRIPT THIS Detailed explanation Object-oriented
https:///article/
Javascript this pointer
https:///article/
Detailed explanation of how to use this keyword in JavaScript
https:///article/
Javascript this keyword usage analysis
https:///article/