Understanding javascript in depth this

Understanding javascript in depth this

This in javascript has rich meanings. It can be a global object, the current object or any object, depending on the function call method. A function can be called in the following ways: as an object method call, as a function call, as a constructor call, apply, or call.

 

Object method call

 

When called as an object method, this will be bound to this object.

 

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 is bound to the current object, that is, the point object.

 

Function call

 

The function can also be called directly. At this time, this is bound to a global object.

　var x = 1;　　function test(){　　　　this.x = 0;　　}　　test();　　alert(x); //0

But there will be some problems, that is, the function defined inside the function, its this will also point to the global, and it is exactly the opposite of what we want. The Code is as follows:

Var point = {x: 0, y: 0, moveTo: function (x, y) {// internal function var moveX = function (x) {this. x = x; // this bound to the global}; // internal function var moveY = function (y) {this. y = y; // this is bound to the global}; moveX (x); moveY (y) ;}}; point. moveTo (1, 1); point. x; // => 0 point. y; // => 0 x; // => 1 y; // => 1

We will find that not only the movement we want is not completed, but there will be two more global variables. How can this problem be solved? You only need to save this to a variable when entering the function, and then use this variable. The Code is as follows:

Var point = {x: 0, y: 0, moveTo: function (x, y) {var that = this; // internal function var moveX = function (x) {that. x = x ;}; // internal function var moveY = function (y) {that. y = y ;}movex (x); moveY (y) ;}}; point. moveTo (1, 1); point. x; // => 1 point. y; // => 1

Constructor call

 

You can use this to point to the newly created object when creating a constructor in javascript. In this way, this in the function can be avoided pointing to the global.

 

　var x = 2;　　function test(){　　　　this.x = 1;　　}　　var o = new test();　　alert(x); //2

 

Apply or call

 

The two methods can switch the Context Environment of the function execution, that is, change the object bound to this. The difference between apply and call is that an array is required when a parameter is input, and an application is passed in separately. So we use apply as an example:

var name = "window"; var someone = { name: "Bob", showName: function(){ alert(this.name); } }; var other = { name: "Tom" }; someone.showName(); //Bob someone.showName.apply(); //window someone.showName.apply(other); //Tom 

As you can see, this points to the object when the method in the normal access object is used. When the apply parameter is used and no parameter is set, the current object of this is global. When the apply parameter is set, the current object of this is this parameter.

 

Arrow function call

Here, we need to add that this of the arrow function in the Next Generation javascript standard ES6 always points to this when the function is defined, rather than when it is executed. Let's take an example to understand:

var o = {    x : 1,    func : function() { console.log(this.x) },    test : function() {        setTimeout(function() {            this.func();        }, 100);    }};o.test(); // TypeError : this.func is not a function

The above code will cause an error because the point of this is changed from o to global. We need to modify the above Code as follows:

var o = {    x : 1,    func : function() { console.log(this.x) },    test : function() {        var _this = this;        setTimeout(function() {            _this.func();         }, 100);    }};o.test();

You can save this by using an external file. The arrow function can be used here. As we have just said, this of the arrow function always points to this when the function is defined, rather than when it is executed. So we can modify the above Code as follows:

var o = {    x : 1,    func : function() { console.log(this.x) },    test : function() {        setTimeout(() => { this.func() }, 100);    }};o.test();

This point points to o. We also need to note that this will not change to the object. We know that call and apply can change the point of this, however, it is invalid in the arrow function.

Var x = 1, o = {x: 10, test: () => this. x}; o. test (); // 1o. test. call (o); // still 1

In this way, you can understand the differences between this bound objects in various cases.