Detailed explanation of the this pointing problem in JavaScript

Summarize

• Global environment ➡️ window
• Normal function ➡️ window or undefined
• Constructor ➡️ Constructed instance
• Arrow function ➡️ this in the outer scope when defined
• Object methods ➡️ The object
• call(), apply(), bind() ➡️ The first parameter

Global Environment

Regardless of strict mode, this refers to the window object.

console.log(this === window) // true

// Strict mode 'use strict'
console.log(this === window) // true

Ordinary functions

1. Normal Mode
   • this refers to the window object
     

   function test() {
     return this === window
   }
   
   console.log(test()) // true
   

2. Strict Mode
   • this value is undefined
     

   // Strict mode 'use strict'
   
   function test() {
     return this === undefined
   }
   
   console.log(test()) // true
   

Constructor

When a function is used as a constructor, this points to the constructed instance.

function Test() {
  this.number = 1
}

let test1 = new Test()

console.log(test1.number) // 1

Arrow Functions

When the function is an arrow function, this refers to the this value in the previous scope when the function is defined.

let test = () => {
  return this === window
}

console.log(test()) // true

let obj = {
  number: 1
}

function foo() {
  return () => {
    return this.number
  }
}

let test = foo.call(obj)

console.log(test()) // 1

Object methods

When a function is used as a method of an object, this refers to the object.

let obj = {
  number: 1,
  getNumber() {
    return this.number
  }
}

console.log(obj.getNumber()) // 1

call(), apply(), bind()

• When calling the call() or apply() method of a function, the this of the function points to the first parameter passed in.
• When the bind() method of a function is called, the this of the returned new function points to the first parameter passed in.

let obj = {
  number: 1
}

function test(num) {
  return this.number + num
}

console.log(test.call(obj, 1)) // 2

console.log(test.apply(obj, [2])) // 3

let foo = test.bind(obj, 3)
console.log(foo()) // 4

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