This in the JavaScript language

This in the JavaScript language

Because of the nature of its run-time bindings, this meaning in JavaScript is much richer, and it can be a global object, the current object, or any object, depending on how the function is called. The invocation of a function in JavaScript has several ways: as an object method call, as a function call, as a constructor call, and with an apply or call invocation. Below we will discuss the meaning of this separately, depending on the invocation method.

Called as an object method

In JavaScript, a function is also an object, so a function can be a property of an object, at which point it is called a method of the object, which is naturally bound to the object when this invocation is used.

Listing 2. Point.js

12345678910

var point = { x : 0, y : 0, moveTo : function(x, y) {     this.x = this.x + x;     this.y = this.y + y;     } }; point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象

As a function call

The function can also be called directly, at which point this is bound to the global object. In the browser, window is the global object. For example, the following example: When a function is called, this is bound to a global object, and the next execution of an assignment statement is tantamount to implicitly declaring a global variable, which is clearly not what the caller wants.

Listing 3. Nonsense.js

123456

function makeNoSense(x) { this.x = x; } makeNoSense(5); x;// x 已经成为一个值为 5 的全局变量

For intrinsic functions, which are functions that are declared in the body of another function, this way of binding to a global object creates another problem. We still use the point object mentioned earlier as an example, this time we want to define two functions within the MoveTo method, translating the x, y coordinates, respectively. The result may be unexpected, not only the point object does not move, but more than two global variables x, Y.

Listing 4. Point.js

12345678910111213141516171819202122

var point = { x : 0, y : 0, moveTo : function(x, y) {     // 内部函数    var moveX = function(x) {     this.x = x;//this 绑定到了哪里？   };    // 内部函数   var moveY = function(y) {    this.y = y;//this 绑定到了哪里？   };    moveX(x);    moveY(y);    } }; point.moveTo(1, 1); point.x; //==>0 point.y; //==>0 x; //==>1 y; //==>1

This is a JavaScript design flaw, the correct design is that the internal function of this should be bound to its outer function corresponding to the object, in order to circumvent this design flaw, the clever JavaScript programmer came up with a variable substitution method, conventional, the variable is generally named that.

Listing 5. Point2.js

1234567891011121314151617181920

var point = { x : 0, y : 0, moveTo : function(x, y) {      var that = this;     // 内部函数    var moveX = function(x) {     that.x = x;     };     // 内部函数    var moveY = function(y) {     that.y = y;     }     moveX(x);     moveY(y);     } }; point.moveTo(1, 1); point.x; //==>1 point.y; //==>1

Called as a constructor function

JavaScript supports object-oriented programming, unlike mainstream object-oriented programming languages, where JavaScript does not have the concept of classes (class), but rather uses a prototype-based (prototype) approach to inheritance. Correspondingly, the constructors in JavaScript are also very special, as are normal functions if not called with new. As another rule of law, the constructor starts with an uppercase letter, reminding the caller to invoke it in the correct way. If called correctly, this binds to the newly created object.

Listing 6. Point.js

1234	function Point(x, y){    this.x = x;    this.y = y; }

Invoke with apply or call

Let us again reiterate that in JavaScript functions are objects, objects have methods, and apply and call are methods of function objects. These two methods are exceptionally powerful, and they allow the switch function to execute the context (contextual), which is the object of this binding. This method is used in many JavaScript techniques as well as in class libraries. Let's look at a specific example:

Listing 7. Point2.js

12345678910111213

function Point(x, y){    this.x = x;    this.y = y;    this.moveTo = function(x, y){        this.x = x;        this.y = y;    } } var p1 = new Point(0, 0); var p2 = {x: 0, y: 0}; p1.moveTo(1, 1); p1.moveTo.apply(p2, [10, 10]);

In the example above, we use the constructor to generate an object P1, which has a moveTo method, and another object is created using the object literal P2, and we see that using apply can apply the P1 method to P2, when this is also bound to the object P2. Another method call has the same function, the difference is that the last parameter is not uniformly passed in as an array, but separately passed in.

Reproduced!!!!!!!

This in the JavaScript language