箭头函数的this指向

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

    1. 指向执行时候的调用者
const obj = {
    name: 'this is obj',
    getName(){
        console.log('this',this);
    }
}
obj.getName() 
    1. 使用严格模式下,不指定调用者,会指向undefined,不使用严格模式,指向window
"use strict"
function testFun() {
    console.log('this:',this);
}
testFun()
    1. 在class中,指向当前class
class ClassA{
    getName() {
        console.log('this',this);
    }
}

const classA = new ClassA()
classA.getName()
    1. 使用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等修改指向的。

推荐阅读更多精彩内容