A brief note of my own understanding of the this reference in javascript.

In my opinion, the reference to this can be divided into two categories, ‘static’ and ‘dynamic’. ‘static’ refers to the function whose reference to this is known when it is defined. ‘dynamic’ means that the function is executed knowing what this refers to;

“Dynamic”

This points to when called independently

If the function is called independently, that is, in non-strict mode, this refers to the Window

function  aba() {
   console.log(this)      
}
aba();          // Prints the Window
Copy the code

Let’s do another example

let obj = {
   name: 'yan'.say(){
       console.log(this)}}let objSay = obj.say;
objSay();        // Prints the Window

obj.say();    / / {name: "yan", say: ƒ}
Copy the code

In the example above, the say method is defined on the object, and when it is executed in a separate function, this refers to the Window instead of obj.

Implicit binding

Implicit binding, which means who calls this function and to whom this refers. In the example above, obj calls its say method and prints this as obj itself. Here’s another example.

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

let obj = {
   a: 1.foo: foo
}
obj.foo();   / / {a: 1, foo: ƒ}
// As you can see, obj calls foo. This refers to obj
Copy the code

Explicitly call

Use the call, apply, and bind methods to specify this explicitly. All this points to the value of the explicit binding.

var person = {
    fullName: function() {
        return this.firstName 
    }
}
var person1 = {
    firstName:"yan"
}
var person2 = {
    firstName:"shao"
}
person.fullName.call(person1);  // Will return yan
Copy the code

The new binding

New is used to instantiate an object in the constructor, in which case this refers to the constructed instance object.

function Person(name, age) {
    this.name = name;
    this.age = age;
    say() {
        console.log(this.name, this.age); }}let p1 = new Person('yan'.19);
p1.say();    // output 'yan', 19
Copy the code

“Static”

‘Static’ means that the reference to this is not determined by the execution of the function, but by the definition of the function; The four binding rules mentioned in the previous section are invalid: direct calls, implicit binding, and display binding. Arrow functions cannot be used as constructors.

In the arrow function, there’s no this, so this points to this in the parent environment.

let obj = {
    name: 2.say: () = >{
        console.log(this);
    }
}

obj.say();   / / this point to the window
Copy the code

In the example above, obj calls the say method. If we follow the implicit binding rule in the previous section: who calls to whom, this should point to OBj, but since say is an arrow function, this is determined by obj’s parent, which is the window.

conclusion

A quick summary of the this direction

Categories: Small class instructions
dynamic Default binding rules Default points to window
Implicit binding Who calls who
Explicitly bound Call, apply, and bind explicitly specify that this points to
The new binding Points to the constructor instance itself
static Arrow function The arrow function does not have this itself, as determined by the this pointer in its parent’s environment