Write at the front: This is one I wrote about the JS series, an article will not just only speak a knowledge point, main hope you don’t feel like talking so many things suddenly, see will be upset, because I usually will have associated knowledge together, so, learn knowledge will make you feel very coherent, I also want to record their own learning through the series, While sharing their own learning, mutual encouragement! If possible, please also give me a like, your like can also make me work harder to update!

An overview of

  • Serving time: 7 minutes

  • Difficulty: Easy, don’t run, watch before you walk

  • Edible value: thoroughly understand the problem this points to.

  • Matting knowledge

    Understand JS series (10) thoroughly understand this point, understand the original intention of this design and the basic rules of this point.

preface

There are three cases in which this is a no-brainer because it is pointing to window

  • Immediately execute the function (IIFE ）
  • setTimeoutThe function passed in
  • setIntervalThe function passed in

Before we do that, let’s look at an example to prepare for the following example

var name = 'windowName'

var dog = {
  name: 'wangcai'.// Declare the location
  hello: function() {
    console.log(this.name)
  },
}

dog.hello() // wangcai
Copy the code

After the study in the last section, this question is really easy, the answer is Wangcai.

If you have not learned, you can first step to understand THE JS series (ten) thoroughly understand this point to study, first this point to have a general understanding and cognition.

Next, let’s look at each of the three special references to this.

Immediately execute the function (IIFE ）

A function that executes immediately is an anonymous function that is called immediately after it is defined. To prove this point, let’s rewrite the code above

var name = 'windowName'

var dog = {
  name: 'wangcai'.// Declare the location
  hello: function() {(function () {
      console.log(this.name)
    }())
  },
}

dog.hello() // windowName
Copy the code

As you can see, we have overridden the hello method, internally executing the function console.log(this.name) immediately, and the result is this.name.

Recall from the last video that we said:

When the method is called without an explicit object, this refers to the global object. In the browser, point to window; In Node, point to Global. (In strict mode, undefined)

An instant-execute function is an anonymous function that is called immediately after it is defined. It does not specify an object to call, so it refers to window, which is the windowName printed at the end. When we look at immediate execution functions, the first thing to think about is pointing to global objects.

setTimeoutAs well assetIntervalThe function passed in

SetTimeout also has the dark magic of pointing to Windows. Let’s take a look at this example:

var name = 'windowName'

var dog = {
  name: 'wangcai'.// Declare the location
  hello: function() {
    setTimeout(function () {
      console.log(this.name);
    },100)
  },
}

dog.hello() // windowName
Copy the code

As you can see, the output is also windowName.

To review what we did in the last section, this always refers to the object that last called it.

As we all know, setTimeout is a method belonging to window, from MDN description you can see.

So, for a function passed in setTimeout, the last object to call is always window

That said, the above code can be interpreted this way

var name = 'windowName'

var dog = {
  name: 'wangcai'.// Declare the location
  hello: function() {
    window.setTimeout(function () {
      console.log(this.name);
    },100)
  },
}

dog.hello() // windowName
Copy the code

So I’m going to do dog.hello() so at this point, the object is dog, and then I’m going to dog.hello(), and I’m going to do window.setTimeout, so finally, when I do console.log(this.name), This is already pointing to window. Which is the last output windowName.

Of course, the same is true for setInterval.

Finally, to sum up, that is:

thisAlways point to the object that last called it

When the method is called without an explicit object, this refers to the global object. In the browser, point to window; In Node, point to Global. (In strict mode, undefined)

Ok, so those are the three special points to this, and we’ll look at a few ways to change this in the next section. (Update asap)

Series directory

  • This article understands JS series (a) compilation principle, scope, scope chain, variable promotion, temporary dead zone

  • This article understands JS series (2) JS memory life cycle, stack memory and heap memory, depth copy

  • JS series (3) to understand the garbage collection mechanism, memory leaks, closures

  • Understand JS series (four) closure application – Currie, partial function

  • Understand JS series (five) closure application – tremble, throttling

  • JS series (6) micro task and macro task, Event Loop

  • JS series (7) constructor, new, instance object, prototype, prototype chain, ES6 class

  • JS series (8) easy to understand the Promise

  • Learn more elegant asynchronous solutions in JS series (9)

  • Understand JS series (10) thoroughly understand this point