This

Understanding of this object

this is an attribute in the execution context that points to the object that last called this method. In actual development, the direction of this can be determined by four call modes.

• the first is function call mode when a function is not an object property and is called directly as a function, this point to the global object.
• the second is method call mode , if a function is called as a method of an object, this point to the object.
• the third is constructor call mode , if a function is called with new, a new object is created before the function is executed. this point points to the newly created object.
• the fourth is apply, call, and bind call modes , all three methods can display this direction of the specified calling function. The apply Method receives two parameters: an object bound to this parameter and an array of parameters. The parameters received by the call method. The first parameter is the object bound to this method, and the other parameters are the parameters passed into the function execution. In other words, when using the call() method, the parameters passed to the function must be listed one by one. The bind method returns a new function that is bound to the input object by passing in an object. this direction of this function will be changed except when new is used.
• the fifth is arrow function, arrow function is different from traditional JavaScript function, arrow function does not belong to its own this, its so-called this is to capture the this value of its context, as its own this value, and because there is no own this, so it will not be called by new or changed by methods like apply. this so-called this will not be changed.

Among these four methods, the constructor call mode has the highest priority, followed by the apply, call, and bind call modes, followed by the method call mode, followed by the function call mode.

After understanding the binding rules of this, let's try to do an exercise.

The question comes from bigfrontend.dev/quiz/this

const obj = {
  a: 1,
  b: function() {
    console.log(this.a)
  },
  c() {
    console.log(this.a)
  },
  d: () => {
    console.log(this.a)
  },
  e: (function() {
    return () => {
      console.log(this.a);
    }
  })(),
  f: function() {
    return () => {
      console.log(this.a);
    }
  }
}

console.log(obj.a)
obj.b()
;(obj.b)()
const b = obj.b
b()
obj.b.apply({a: 2})
obj.c()
obj.d()
;(obj.d)()
obj.d.apply({a:2})
obj.e()
;(obj.e)()
obj.e.call({a:2})
obj.f()()
;(obj.f())()
obj.f().call({a:2})

What will the console print after executing the above code? You can try to write your answer, and we will explain it below.

Base on the above rules, let's try to analyze what each this actually equal to.

const obj = {
  a: 1,
  b: function() {
    console.log(this.a)
  },
  c() {
    console.log(this.a)
  },
  d: () => {
    console.log(this.a)
  },
  e: (function() {
    return () => {
      console.log(this.a);
    }
  })(),
  f: function() {
    return () => {
      console.log(this.a);
    }
  }
}

console.log(obj.a) //1, normal access to object property
obj.b() // 1, according to rule 2,this is the obj
;(obj.b)() // 1, same as above,this is the obj
const b = obj.b
b() // undefined, according to rule 1,this is the window
obj.b.apply({a: 2}) // 2, according to rule 4,this is the {a: 2} 
obj.c() // 1, according to rule 2,this is the obj
obj.d() // undefined, according to rule 5,this is the window
;(obj.d)() // undefined, according to rule 5,this is the window
obj.d.apply({a:2}) // undefined, according to rule 5,this is the window
obj.e() // undefined, according to rule 1 and 5,this is the window
;(obj.e)() // undefined, according to rule 1 and 5,this is the window
obj.e.call({a:2}) // undefined, according to rule 1 and 5,this is the window
obj.f()() // 1, according to rule 2 and 5,this is the obj
;(obj.f())() // 1, according to rule 2 and 5,this is the obj
obj.f().call({a:2}) // 1, according to rule 2 and 5,this is the obj

So, this is the answer of this exercise, did you answer correctly?

Anyway, i hope it helps for you, see you next time, bye bye.