关于箭头函数的this指向问题

57 阅读1分钟

箭头函数的this指向规则

  1. 箭头函数没有prototype,所以箭头函数本身没有this
let a = () => {}
console.log(a.prototype)
  1. 箭头函数的this指向它的执行上下文

    箭头函数的this指向它的执行上下文,箭头函数的this是在他被定义的时候就已经确定了,之后不会再改变了

  • 什么是执行上下文?

    执行上下文:指当前执行环境中的变量、函数声明,参数(arguments),作用域链,this等信息。分为全局执行上下文、函数执行上下文,其区别在于全局执行上下文只有一个,函数执行上下文在每次调用函数时候会创建一个新的函数执行上下文。

var obj = {
    a: () => {
        console.log(this)
    }
}
obj.a()
// window
  • 这里指向全局上下文 window对象
var obj = {
    a: function() {
        return () => {
            console.log(this)
        }
    }
}
obj.a()()
// obj
  • 这里指向函数执行上下文,函数a所处的环境 obj

  • 测试题

const obj = {
    test: 'obj',
    fn: () => {
        console.log(this.test)
    },
    fn2: function() {
        console.log(this.test)
    }
}

function A() {
    function fn() {
        console.log("a1")
    }

    function fn2() {
        console.log("a2")
    }

    this.fn()
    this.fn2()
}

function B() {
    obj.test = 'B'
    A.apply(obj)
}

B()
// undefined B