以下代码输出什么?解释原因。
var name = 'window'
var obj = {
name: 'obj',
fn1: function () { console.log(this.name) },
fn2: () => console.log(this.name),
fn3: function () {
return function () { console.log(this.name) }
},
fn4: function () {
return () => console.log(this.name)
}
}
obj.fn1() // 'obj'
obj.fn2() // 'window'
obj.fn1()() // ❌ fn1 不返回函数,这里报错
var f3 = obj.fn3()
f3() // 'window'
var f4 = obj.fn4()
f4() // 'obj'逐行分析
obj.fn1() → 'obj'
普通函数,隐式绑定,this → obj
obj.fn2() → 'window'
箭头函数没有自己的 this,继承外层作用域(全局),this → window
obj.fn3()() → 先 var f3 = obj.fn3(),f3() → 'window'fn3 返回一个普通函数,赋值给 f3 后独立调用,默认绑定 this → window
obj.fn4()() → 先 var f4 = obj.fn4(),f4() → 'obj'fn4 返回箭头函数,箭头函数的 this 继承 fn4 的 this。fn4 通过 obj.fn4() 调用,this → obj,所以箭头函数的 this → obj
核心规律
- 普通函数:看调用方式(谁调用就指向谁)
- 箭头函数:看定义位置(继承外层 this)