先来回顾一下非箭头函数的this指向吧
- 指向执行时候的调用者
const obj = {
name: 'this is obj',
getName(){
console.log('this',this);
}
}
obj.getName()
- 使用严格模式下，不指定调用者，会指向undefined，不使用严格模式，指向window
"use strict"
function testFun() {
console.log('this:',this);
}
testFun()
- 在class中，指向当前class
class ClassA{
getName() {
console.log('this',this);
}
}
const classA = new ClassA()
classA.getName()
- 使用apply、call、bind指向到咱们规定的obj上
const objA = {
name: 'this is objA'
}
function fnA() {
console.log('this: ',this);
}
fnA.apply(objA)
OK，再来看下箭头函数的this指向，很简单，记住两个，首先是
-
1. 箭头函数中的this其实是定义它时候的父级的this
function fnA() {
// 指向window
function fnB() {
console.log('fnB --> this: ',this);
}
fnB()
const cObj = {
name: 'this is objC'
}
function fnC() {
console.log('fnC --> this: ',this);
const fnD = () => {
console.log('fnD --> this',this);
}
fnD()
}
fnC.apply(cObj)
}
fnA()
运行结果在这里
- 看，仔细分析一下代码，可以看到fnA()在执行后，fnA内部的this此时就是window，为什么呢？请结合上面说的普通函数的this指向（第二条）
- 当我们执行funB()，此时和fnA一样，在非严格模式下，都是指向window
- 仔细看fnC()，这里执行的时候做了手脚，改变了其默认的指向(window)，指向了cObj，不信吗？看一下fnC的this打印，的确就是"this is objC"，没毛病。
- 此时看fnD()，在这行这里的时候，输出了箭头函数fnD内部的this，可以看出，内部的this是和外部的fnC的this都是指向的objC，但是内部和外部的this到底是不是同一个呢？还是中间被copy了一份新的呢？我们加上下面的代码：
function fnC() {
console.log('fnC --> this: ',this);
const _fnC_this = this // +++++++
const fnD = () => {
console.log('fnD --> this',this);
console.log('fnD --> this',this === _fnC_this); // +++++++
}
fnD()
}
内外部的确是一个this
- 此时再来一个验证case，把fnD放在任意地方执行（为了洗脱上面例子中fnD()是在fnC里面执行，从而导致会产生歧义的嫌疑），看此时this究竟是谁。
let tempFn
function fnA() {
// 指向window
function fnB() {
console.log('fnB --> this: ',this);
}
fnB()
const cObj = {
name: 'this is objC'
}
function fnC() {
console.log('fnC --> this: ',this);
const _fnC_this = this
tempFn = () => {
console.log('fnD --> this',this);
console.log('fnD --> this',this === _fnC_this);
}
}
fnC.apply(cObj)
}
fnA()
tempFn() // <--- 提出fnD，在外部执行
还是上面的效果
- 还是上面的效果，从而得出:
箭头函数中的this，是在定义它时候的父级的this，而不是执行时候的父级的this，谨记这一点~
-
2. 箭头函数中的this是不能被apply、call、bind等修改指向的。
- 为了验证上面的结论，我们举个例子：
function fnA() {
// 指向window
function fnB() {
console.log('fnB --> this: ',this);
}
fnB()
const cObj = {
name: 'this is objC'
}
function fnC() {
console.log('fnC --> this: ',this);
const _fnC_this = this
const dObj = {
name: 'this is objD'
}
const fnD = () => {
console.log('fnD --> this',this);
console.log('fnD --> this',this === _fnC_this);
}
fnD.apply(dObj) // <--- 修改fnD的指向
}
fnC.apply(cObj)
}
fnA()
效果还是和上面一样，并不是指向了我们新的dObj
- 就很有力得证明了，call、apply、bind是不能修改箭头函数的this指向的。
总结一下
普通函数的this指向：
1. 指向执行时候的调用者2. 使用严格模式下，不指定调用者，会指向undefined，不使用严格模式，指向window3. 在class中，指向当前class4. 使用apply、call、bind指向到咱们规定的obj上
箭头函数的this指向：
1. 箭头函数中的this其实是定义它时候的父级的this2. 箭头函数中的this是不能被apply、call、bind等修改指向的。
