this 指向判断

问题

以下代码的输出是什么？

var name = 'window'
const obj = {
    name: 'obj',
    sayName: function() {
        console.log(this.name)
    },
}

obj.sayName()
const fn = obj.sayName
fn()
setTimeout(obj.sayName, 0)
setTimeout(() => obj.sayName(), 0)

解答

输出结果依次为：

obj
window
window
obj

分析：

obj.sayName() - 对象方法调用，this 指向 obj，输出 obj

fn() - 普通函数调用，this 指向全局对象（非严格模式），输出 window

setTimeout(obj.sayName, 0) - 函数作为参数传递后独立调用，this 指向全局对象，输出 window

setTimeout(() => obj.sayName(), 0) - 箭头函数内部调用 obj.sayName()，仍是对象方法调用，输出 obj

关键点

• 对象方法调用时，this 指向该对象
• 函数赋值给变量后独立调用，this 指向全局对象
• 函数作为回调传递时会丢失 this 绑定
• 箭头函数包裹可以保持正确的调用方式