箭头函数的this指向

先来回顾一下非箭头函数的this指向吧

• 1. 指向执行时候的调用者

const obj = {
    name: 'this is obj',
    getName(){
        console.log('this',this);
    }
}
obj.getName() 

• 2. 使用严格模式下，不指定调用者，会指向undefined，不使用严格模式，指向window

"use strict"
function testFun() {
    console.log('this:',this);
}
testFun()

• 3. 在class中，指向当前class

class ClassA{
    getName() {
        console.log('this',this);
    }
}

const classA = new ClassA()
classA.getName()

• 4. 使用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，不使用严格模式，指向window
• 3. 在class中，指向当前class
• 4. 使用apply、call、bind指向到咱们规定的obj上

箭头函数的this指向：

• 1. 箭头函数中的this其实是定义它时候的父级的this
• 2. 箭头函数中的this是不能被apply、call、bind等修改指向的。