JavaScript in-depth analysis of the direction of this and how to modify the direction

this

As usual, let’s look at the code first:

Method

function test(){
    console.log(this);
}

In the object

Person={
  name:"Zhang San",
  eat:function(){
      console.log(this)
  }
}

In a method, this refers to the object to which the method belongs. Because the first one is a method on window, window is printed, and the eat method is a Person method, so the object Person is printed.

So it can be seen that using this alone in the console represents the global object.

Hidden this

In objects, you can declare them one by one in advance:

var Person1 = {
    name:"Zhang San",
    age:18
}
var Person2 = {
    name:"Li Si",
    age:19
}

This would be very troublesome to write, so you can learn from the concept of Java class, like this:

var Person = function (name, age) {
    this.name=name,
    this.age=age
       
}
var Person1=new Person("张三",18);
var Person2=new Person("Li Si",19);

In fact, there is a return this hidden in new. If you don’t use new, you will find that it does not return the newly created object.

Now let’s complete it:

var Person = function (name, age) {
    this.name=name,
    this.age=age
    return this;
}
var Person1=new Person("张三",18);
var Person2=new Person("Li Si",19);

In this way, you can even fake the effect of this:

var Person = function (name, age) {
    var that={};
    that.name=name,
    that.age=age
    return that;
}
var Person1=new Person("张三",18);
var Person2=new Person("Li Si",19);

Strict Mode

This has some magical behavior in strict mode and non-strict mode

function test() {
  return this;
}

# If "use strict" is added before js, it means strict mode "use strict";
function test() {
  return this;
}

This shows that in a function in non-strict mode, the owner of the function is bound to this by default. So the global value can be printed, but in strict mode the function is not bound to this, so this is undefined.

You can change this to point to

Look at the code first

var Person = function (name, age) {
    this.name=name,
    this.age=age,
    this.fun = function(){
         console.log("print",this.name);
        }
}
var Person1=new Person("张三",18);
var Person2=new Person("Li Si",19);

It can be seen that this points to the value of a in window rather than the value in method test, but some keywords can modify the pointer.

You can see who the object before the method is, and who the this in the call is, but it can be modified, such as using the keywords call, apply, and bind.

From the above, we can see that call and apply are very similar, but bind does not execute the function immediately and needs to be enclosed in ().

However, if you bring parameters, you will find that call and apply are still different, but both of them must contain objects. After all, this points to the object.

This concludes this article on in-depth analysis of the direction of this in JavaScript and how to modify the direction. For more relevant JavaScript this direction content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!