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

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.

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.

2.

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

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

This is not allowed in arrow functions Will be modified

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

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

bind and new

Error-prone points

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

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

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 优先

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 优先

5. Obijian point (obj.)

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

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

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

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 })()

7. Not in the function

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

<script></script> tag of the browser, or# In the module file of ##Node.js. 1. In the

<script></script>

tag, this points to Window. 2. In the module file of

Node.js

, this points to the default export object of Module, which is module. exports. Non-strict mode

Strict mode was proposed 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 this points to undefined or null, then this will point to the global object. **The global object is Window in the browser environment and Global in the Node.js environment. For example, in the following code, in non-strict mode,

this

all points to the global object. <pre class='brush:php;toolbar:false;'>function a() { console.log(&quot;function a:&quot;, this) ;(() =&gt; { console.log(&quot;arrow function: &quot;, this) })() } a() a.bind(null)() a.bind(undefined)() a.bind().bind(2)() a.apply()</pre>The execution result in non-strict mode is:

在严格模式下，执行同样的代码进行对比。记住要一次性将所有代码复制粘贴到控制台中，才能运行在严格模式下（因为第一行 "use strict" 才会对后面的代码生效）。

"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()

严格模式下执行结果为：

七步口诀在严格模式下和非严格模式下都是完备的，只是在非严格模式下null或undefined会被转换为全局对象。所以我没有将这点列入口诀中。

做题复习

先背诵口诀再做题，“箭头函数、new、bind、apply和call、欧比届点（obj.）、直接调用、不在函数里”。

1. 下面代码执行后，func.count 值为多少？

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

func.count = 0
func(1)

答案

func.count值为 0。

按照口诀，func()调用时属于第 6 类「直接调用」。在非严格模式下，this指向全局对象。this跟func 一点关系都没有，所以 func.count保持不变so easy。

2. 以下箭头函数中 this 指向谁呢？

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" })()

答案

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

是不是很简单，你学废了吗？

推荐学习：JS视频教程

The above is the detailed content of An article explaining the problem of this pointing in js (with code). For more information, please follow other related articles on the PHP Chinese website!