Jul 08, 2023 , with read , about 10min.

箭头函数中的this指向

[toc]

箭头函数的this指向问题

1. 函数中的this 指向

示例1:

const name = 'window';
(function () {
  console.log(this.name)// window
})()
copy success
copy

等同于：

const name = 'window'
function func() {
  console.log(this.name)// window
}

window.func() // 可简写为 func();
copy success
copy

示例2:

const obj = {
  name: 'obj',
  func() {
    console.log(this.name)// obj
  },
}
obj.func()
copy success
copy

从上面两个示例中可以得出，似乎，函数体中this 好像指向函数定义所在作用域对象中。 在这里，便是window 对象。 这是初步可以得出的结论。

为了进一步验证，我们使用call来改变函数的调用对象试试：

const obj = {
  name: 'obj',
}

const name = 'window'
function func() {
  console.log(this.name)
}
window.func.call(obj)// obj
copy success
copy

可见, 确实, 普通函数体中的this 指向调用该函数的对象, 即"调用者对象".

2. 箭头函数中的this 指向

示例1:

const name = 'window'

const obj = {
  name: 'obj',
  func: () => {
    console.log(this.name)
  },
}
obj.func()// window
copy success
copy

可见, 即便func()函数的调用对象是obj,但是输出结果却是window