Catalog

* A special case
 * Begin to judge
    * Rule 1: this in the object method points to the object itself (except in the form of arrow functions)
    * Rule 2: This in a multi-level nested function points to the same function as the last one containing this function.
    * Rule 3: this points to window in the case of arrow function and function in non-pointing object method
 * exercise set
    * this in ordinary functions
    * When a function is executed, it returns this (in a normal function) from another function.
    * this (Timer-Arrow Function) 1 in Multilayer Nested Functions
    * this (Timer-Arrow Function) 2 in Multilayer Nested Functions

A special case

Before we begin, let's start with a special case.

// Constructor
function Student(name) {
  this.name = name
}
// Create two examples of Xiaoming and Xiaohong
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// Output information
console.log(XM)  // Student {name: "xiaoming"}
console.log(XH)  // Student {name: "xiaohong"}

In the constructor, the value on this is bound to the newly created instance when it is created. It is not applicable to the following judgment method, so it is hereby explained.

Begin to judge

Here is a typical example. Our analysis begins here.

var x = {
  name: 'bw2',
  getName1: function() {
    console.log(this)
  },
  getName2: function() {
    setTimeout(() => {
      console.log(this)
    },0)
  },
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName1()  // {name: "bw2", getName1: ƒ}
x.getName2()  // {name: "bw2", getName1: ƒ}
x.getName31()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, ...}
x.getName32()()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, ...}

Rule 1: this in the object method points to the object itself (except in the form of arrow functions)

var x = {
  name: 'bw2',
  getName1: function() {
    console.log(this)
  }
}
x.getName1()  // {name: "bw2", getName1: ƒ}

Rule 2: This in a multi-level nested function points to the same function as the last one containing this function.

The arrow function has no independent this scope, so go on to the outer layer and go to getName: function(){}. So that's him. This point is the same as this point inside this function. According to rule 1, this points to the object itself.

var x = {
  name: 'bw2',
  getName2: function() {
    console.log(this)  // Equivalent to this here
    setTimeout(() => {
      console.log(this)  // The original this position
    },0)
  }
}
x.getName2()  // {name: 'bw2', getName1: ƒ}

We can try to run in the browser and see the results.

Rule 3: this points to window in the case of arrow function and function in non-pointing object method

According to rule 2, this refers to the nearest function, so this here is equivalent to this in the returned function, not this in the object method, so it points to the global.

Does it feel a little strange? But practice has proved that this is true.

var x = {
  name: 'bw2',
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName31()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, ...}
x.getName32()()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, ...}

Exercise set

You are welcome to judge, guess and test the results in the browser according to the rule one to three. The test results can also be answered. Let's discuss it together.

Because of my limited ability, this series of rules may fail in some cases. Welcome to discuss it together.

Here is the time to do the problem.

this in ordinary functions

function x() {
  console.log(this)
}
x()

When a function is executed, it returns this (in a normal function) from another function.

function xx(){
  return function() {
    console.log(this)
  }
}
xx()()

this (Timer-Arrow Function) 1 in Multilayer Nested Functions

var x = {
  name: 'bw2',
  getName: () => {
    setTimeout(() => {
      console.log(this)
    },0)
  }
}
x.getName()

this (Timer-Arrow Function) 2 in Multilayer Nested Functions

var x = {
  name: 'bw2',
  getName: () => {
    setTimeout(function() {
      console.log(this)
    },0)
  }
}
x.getName()

Again, this rule is experimental and does not guarantee consistent results in all cases without extensive testing. If you find a rule to judge failure, please leave a message and discuss it together.

Welcome to the Wechat Public Number of the Front End Advanced Guidelines:

In addition, I also created a corresponding QQ group: 660112451, welcome to exchange.