An article explaining the problem of this pointing in js (with code)-JS Tutorial-php.cn

In the previous article "Mid-Autumn Festival Tips: How to Use CSS to Realize the Revolution of the Earth and the Moon (Collection)", I introduced you to how to use CSS to realize the rotation of the Earth and the Moon. The following article will help you understand the this pointing problem in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

An article explaining the problem of this pointing in js (with code)

This points to the problem in JS

Believe me, as long as you remember the 7 steps in this article, you can completely master the ## in JS #this points to.

Read the formula first: arrow function, new, bind, apply and call, obj., direct call, not in a function.

According to the order of the formula, as long as one of the previous scenarios is met, you can be sure that

this points to it.

Next, they will be explained in detail in the order of formulas. The example codes in this article are all run in the

Console console of Chrome.

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

1. Arrow function

The arrow function ranks first is Because its

this will not be changed, as long as the current function is an arrow function, there is no need to look at other rules.

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

1. When creating an arrow function, its

this direction has been determined.

this in the arrow function points to this in the outer layer.

So to know the

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

2. new

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

Readers may have questions, "If the

new key is used to call the arrow function, will this of the arrow function be modified?".

Let’s try it on the console.

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

Copy after login

An article explaining the problem of this pointing in js (with code)

As can be seen from the console, the arrow function cannot be used as a constructor, so it cannot be executed together with

new.

3. bind

bind refers to Function.prototype.bind() Detailed address: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript /Reference/Global_Objects/Function/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

Copy after login

This is not allowed in arrow functions Will be modified

func = () => {
  // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」
  console.log(this)
}

func.bind(1)() // Window，口诀 1 优先

Copy after login

bind and new

Error-prone points

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

boundFunc = func.bind(1)
new boundFunc() // Object true，口诀 2 优先

Copy after login

4. apply and call

apply()and The first parameter of call() is both this. The difference is that when calling through apply, the actual parameters are placed in the array, while through callThe actual parameters are separated by commas when called.

This will not be modified in the arrow function

Error prone point

func = () => {
  // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」
  console.log(this)
}

func.apply(1) // Window，口诀 1 优先

Copy after login

This will not be modified in the bind function

Error prone point

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

boundFunc = func.bind(1)
boundFunc.apply(2) // 1，口诀 3 优先

Copy after login

5. Obijian point (obj.)

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

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

Copy after login

There is no need for code examples here. 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. The global object is Window in the browser environment and Global in the Node.js environment.

Let’s take a simple example first.

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

func() // Window

Copy after login

Let’s take a complicated example. The outer

outerFunc serves the purpose of confusion.

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

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

  func()
}

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

Copy after login

7. Not in the function

The scenario of not being in the function can be divided into the

An article explaining the problem of this pointing in js (with code)

This points to the problem in JS

func = () => { // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」 console.log(this) } func.bind(1)() // Window，口诀 1 优先
Copy after login

function func() { console.log(this.x) } obj = { x: 1 } obj.func = func obj.func() // 1
Copy after login

An article explaining the problem of this pointing in js (with code)

This points to the problem in JS

func = () => { // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」 console.log(this) } func.bind(1)() // Window，口诀 1 优先Copy after login

function func() { console.log(this.x) } obj = { x: 1 } obj.func = func obj.func() // 1Copy after login

func = () => { // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」 console.log(this) } func.bind(1)() // Window，口诀 1 优先
Copy after login

function func() { console.log(this.x) } obj = { x: 1 } obj.func = func obj.func() // 1
Copy after login