How to determine where this points in JavaScript

It is said that JavaScript is a very flexible language. In fact, it can also be said that it is a confusing language. Let me share with you the knowledge of this in JavaScript through this article. Friends who are interested can take a look.

It is said that JavaScript is a very flexible language, but in fact it can also be said that it is a confusing language. It combines functional programming and object-oriented programming, coupled with the dynamic language feature, it is extremely powerful (in fact, it cannot be compared with C++, ^_^).

This

• in JS is created inside the function

• Points to the object bound to the function when called (a mouthful)

• this cannot be assigned, but can be changed by call/apply

Directory

* A special case
* Start judging
* Rule 1: this in the object method points to the object itself (except in the form of arrow functions)
* Rule 2: This in a multi-layer nested function points to this which is equivalent to the most recent function containing this
* Rule 3: In the case of arrow functions and functions in non-object methods, this points to window
* Exercise Set
* This in an ordinary function
* After the function is executed, return this in another function (in an ordinary function)
* This in a multi-layer nested function (timer & Arrow function) 1
* This (timer & arrow function) in multi-layer nested functions 2

A special case

Before we officially start, let’s talk about a special case.

// 构造函数
function Student(name) {
 this.name = name
}
// 创建小明和小红两个实例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 输出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

In the constructor, the value on this will be bound to the newly created instance when the instance is created. It does not apply to the following judgment method, so it is hereby explained.

Start to judge

The following is a typical example, and our analysis starts from here.

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

Rule 1: this in the object method points to the object itself (except in the form of arrow functions)

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

Rule 2: This in a multi-level nested function points to this

which is equivalent to the latest function containing this. The arrow function does not have an independent this scope, so continue to the outer layer and reach getName: function( ){}. Then it's him. This pointer is equivalent to the this pointer inside this function. According to Rule 1, this points to the object itself.

var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此处的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

We can try running it in the browser and see the results.

Rule 3: In the case of arrow functions and functions in non-object-pointing methods, this points to window

According to rule 2, this points to the nearest function, so this here is equivalent to return This in the function is not this in the object method, so it points to the global.

Does it feel a little strange? But practice has proven this to be the case.

var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

Exercise Set

We welcome everyone to judge according to rules one to three, guess the results, and Test in browser. You can also reply with the test results and discuss them together.

Due to my limited ability, this series of rules may fail in some cases. Everyone is welcome to discuss together.

The following is the time to do the questions.

This in an ordinary function

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

After the function is executed, it returns this in another function (in an ordinary function)

function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

This (timer & arrow function) in multi-level nested functions 1

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

Multi-level nesting This in the function (timer & arrow function) 2

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

Again, this rule is experimental and has not been tested on a large scale. It is not guaranteed to work in all situations. There are consistent results below. If you find a situation where the rule judgment fails, please leave a message and discuss it together.

The above is the detailed content of How to determine where this points in JavaScript. For more information, please follow other related articles on the PHP Chinese website!