Detailed explanation of this pointing problem in JavaScript

Preface

Believe me, as long as you remember the 7️⃣ steps in this article, you can thoroughly master the this reference in JS.

First recite the formula: arrow function, new, bind, apply and call, obj., direct call, not in function.

According to the order of the formula, as long as one of the previous scenarios is met, you can determine where this points to.

Next, we will explain them in detail in the order of the formulas. The sample codes in the article are all run in the Chrome Console.

There are carefully prepared exercises at the end of the article to test your learning results. Don’t forget to try them~

1. Arrow Functions

The arrow function is ranked first because its this will not be changed, so as long as the current function is an arrow function, there is no need to look at other rules.

The this of an arrow function is the reference of the outer this when it is created. There are two key points here:

1. When an arrow function is created, its this pointer is determined.
2. This inside the arrow function refers to the outer this.

Therefore, to know the this of the arrow function, you must first know the direction of the outer this, and you need to continue to apply the seven-step formula in the outer layer.

2. new

When a function is called using the new keyword, the this in the function must be a new object created by JS.

Readers may wonder, "If the arrow function is called using the new keyword, will the this of the arrow function be modified?"

Let's try it on the console.

func = () => {}
new func() // throw error

As can be seen from the console, arrow functions cannot be used as constructors, so they cannot be executed with new.

3. bind

bind refers to Function.prototype.bind().

When binding multiple times, only the value of the first bind is recognized

Error-prone points

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

func.bind(1).bind(2)() // 1

This will not be modified in arrow functions

bind and new

Error-prone points

function func() {
  console.log(this, this.__proto__ === func.prototype)
}

boundFunc = func.bind(1)
new boundFunc() // Object true, formula 2 takes precedence

4. apply and call

The first parameter of apply() and call() is this. The difference is that when calling apply, the actual parameters are placed in an array, while when calling call, the actual parameters are comma-separated.

This will not be modified in arrow functions

Error-prone points

func = () => {
  // Here this points to the outer this, refer to formula 7 "not in the function"
  console.log(this)
}

func.apply(1) // Window, formula 1 takes priority

This will not be modified in the bind function

Error-prone points

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

boundFunc = func.bind(1)
boundFunc.apply(2) // 1, formula 3 takes precedence

5. Obi point (obj.)

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

obj = { x: 1 }
obj.func = func
obj.func() // 1

There is no need to use code here to illustrate that arrow functions and bind functions have higher priority. If you are interested, you can try it yourself.

6. Direct call

When the function does not meet the previous scenario and is called directly, this will point to the global object. In the browser environment, the global object is Window, and in the Node.js environment, it is Global.

Let’s start with a simple example.

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

func() // Window

Let's take a complicated example, where the outerFunc in the outer layer serves a confusing purpose.

function outerFunc() {
  console.log(this) // { x: 1 }

  function func() {
    console.log(this) // Window
  }

  func()
}

outerFunc.bind({ x: 1 })()

7. Not in a function

Scenarios that are not in functions can be divided into browser <script /> tags or Node.js module files.

1. In the <script /> tag, this refers to Window.
2. In a Node.js module file, this refers to the default export object of the Module, which is module.exports.

Non-strict mode

Strict mode was introduced in ES5. Before the ES5 specification, that is, in non-strict mode, this cannot be undefined or null. So **In non-strict mode, through the above seven steps, if it is concluded that this points to undefined or null, then this will point to the global object. **In the browser environment, the global object is Window, and in the Node.js environment it is Global.

For example, in the following code, in non-strict mode, this refers to the global object.

function a() {
  console.log("function a:", this)
  ;(() => {
    console.log("arrow function: ", this)
  })()
}

a()

a.bind(null)()

a.bind(undefined)()

a.bind().bind(2)()

a.apply()

The result of execution in non-strict mode is:

In strict mode, execute the same code for comparison. Remember to copy and paste all the code into the console at once to run it in strict mode (because the first line "use strict" will take effect on the following code).

"use strict"

function a() {
  console.log("function a:", this)
  ;(() => {
    console.log("arrow function: ", this)
  })()
}

a()

a.bind(null)()

a.bind(undefined)()

a.bind().bind(2)()

a.apply()

The result of execution in strict mode is:

The seven-step formula is complete in both strict mode and non-strict mode, except that in non-strict mode null or undefined will be converted to the global object. So I didn’t include this in the tips.

Review questions

Recite the formula first and then do the questions, "arrow function, new, bind, apply and call, obj., direct call, not in function".

1. After the following code is executed, what is the value of func.count?

function func(num) {
  this.count++
}

func.count = 0
func(1)

Answer

func.count is 0.

According to the formula, when func() is called, it belongs to the 6th category "direct call". In non-strict mode, this refers to the global object. this has nothing to do with func, so func.count remains unchanged. so easy.

2. Who does this point to in the following arrow function?

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()()

func = obj.func
func()()

obj.func.bind({ _name: "newObj" })()()

obj.func.bind()()()

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()

Answer

// obj
// undefined
//newObj
// undefined
// bindObj

It’s very simple, isn’t it? Have you given up on learning it?

Summarize

This is the end of this article about the this pointing problem in JavaScript. For more relevant content about this pointing in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!