JavaScript中this指向問題實(shí)例講解

這篇文章主要講解了“JavaScript中this指向問題實(shí)例講解”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript中this指向問題實(shí)例講解”吧！

總結(jié)

• 全局環(huán)境 ?? window

• 普通函數(shù) ?? window 或 undefined

• 構(gòu)造函數(shù) ?? 構(gòu)造出來的實(shí)例

• 箭頭函數(shù) ?? 定義時外層作用域中的 this

• 對象的方法 ?? 該對象

• call()、apply()、bind() ?? 第一個參數(shù)

全局環(huán)境

無論是否在嚴(yán)格模式下，this 均指向 window 對象。

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

// 嚴(yán)格模式
'use strict'
console.log(this === window)  // true

普通函數(shù)

1. 正常模式

• this 指向 window 對象
  

function test() {
  return this === window
}

console.log(test())  // true

2. 嚴(yán)格模式

• this 值為 undefined
  

// 嚴(yán)格模式
'use strict'

function test() {
  return this === undefined
}

console.log(test())  // true

構(gòu)造函數(shù)

函數(shù)作為構(gòu)造函數(shù)使用時，this 指向構(gòu)造出來的實(shí)例。

function Test() {
  this.number = 1
}

let test1 = new Test()

console.log(test1.number)  // 1

箭頭函數(shù)

函數(shù)為箭頭函數(shù)時，this 指向函數(shù)定義時上一層作用域中的 this 值。

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

對象的方法

函數(shù)作為對象的方法使用時，this 指向該對象。

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

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

call()、apply()、bind()

• 調(diào)用函數(shù)的 call()、apply() 方法時，該函數(shù)的 this 均指向傳入的第一個參數(shù)。

• 調(diào)用函數(shù)的 bind() 方法時，返回的新函數(shù)的 this 指向傳入的第一個參數(shù)。

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

感謝各位的閱讀，以上就是“JavaScript中this指向問題實(shí)例講解”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript中this指向問題實(shí)例講解這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！