preface

You must have been confused by the “this” reference in javaScript. Why is this like this, why is this like this?

Small head, big question.

Points to runtime decisions

JavaScript doesn’t know the current this point at first; it must know the current this point at runtime.

So we have the phrase, whoever calls points to whoever.

Such a sentence does not allow us to have a profound understanding of this pointing problem, so let’s take examples to understand.

HTML report

Print directly

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <button type="button" onclick="console.log(this)">Look at this</button>
  </body>
</html>
Copy the code

The button element is printed. The onclick event is called by the Button DOM element.

Print by function

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <button type="button" onclick="sayThis()">Look at this</button>
  </body>
  <script>
    function sayThis(){
      console.log(this)}</script>
</html>
Copy the code

The window object is printed.

Note: here onclick calls sayThis(), JS should be wrapped around function. So window.saythis () is actually executed. If you don’t understand, see the following example:

let temp = {
  test:function(){
    test()
  }
}
function test(){
  console.log(this)
}
temp.test()
Copy the code

The test function execution in Temp is performed through the current global environment (why not say Window, because the Node.js platform is also considered here).

Use DOM manipulation to print

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <button type="button">Look at this</button>
  </body>
  <script>
    var button = document.getElementsByTagName('button') [0]
    button.onclick = sayThis
    function sayThis(){
      console.log(this)}</script>
</html>
Copy the code

The button element is printed.

This is easy to understand, called by the Button DOM element.

Constructor section

Function Person(name) {this.name = name} let people = new Person(' 四') console.log(people.name)Copy the code

The print here is Li Si.

For the constructor, this will be bound to the object being instantiated.

Arrow function

Arrow functions do not have this, but are automatically bound to this based on the defined environment.

let a = 0
let temp = {
  a: 1.b: 2.test() {
    console.log(this.a)
  },
}
temp.test()
Copy the code

This prints 1 because of the test function called by temp.

let a = 0
let temp = {
  a: 1.b: 2.test: () = > {
    console.log(this.a)
  },
}
temp.test()
Copy the code

This is printed as 0 (note that this is only on the Web side, Node is undefined) because the arrow function does not create its own this, it only inherits this from the upper level of its scope chain.

Function callback chapter

When passing functions to some native methods, the this direction does not change as much as we expect. For example: setTimeout

var name='window'
function hello(){
  setTimeout(function(){
    console.log(this.name)
  }, 100);
}
let obj={
  name:'obj',
  hello
}
// widow
obj.hello()
Copy the code

Transfer function methods such as setTimeout are a special case where the this in setTimeout refers to the window (again, only on the Web side).

The same is true for arrays of maps, filters, etc.

The Node article

Just print this

/ / {}
console.log(this)
Copy the code

If we print this in Node, we’ll just get an empty object

Map, filter, and other functions callback

let arr = [1]
arr.filter(function(item){
  / / the global object
  console.log(this)})Copy the code

In particular, the object returned is the Global object

SetTimeout and setInterval

setTimeout(function(){
  / / the Timeout
  console.log(this)})Copy the code

More specifically, we return a Timeout object.

conclusion

On the Web side this refers to, in fact, we just need to pursue:

  1. Whoever calls this points to whoever
  2. Note the context binding of the arrow function
  3. Notice the this of the callback function in the JS method

On the Node side we need to note more:

  1. Whoever calls this points to whoever
  2. Note the context binding of the arrow function
  3. Notice the direct printing of this
  4. Note the JS callback function this (not including setTimeout, setInterval).
  5. Note setTimeout and setInterval