this 的指向有哪些规则？

详细解析#

绑定规则#

默认绑定看的是函数自身是否处于严格模式，与在哪里调用无关。ES Module 和 class 内部的代码默认就是严格模式。

优先级为 new > 显式绑定 > 隐式绑定 > 默认绑定：

function setId(id) {
  this.id = id
}
const a = { id: 'a', setId }
const b = {}

a.setId.call(b, 'x') // 显式优先于隐式：修改的是 b
const instance = new (setId.bind(a))('y') // new 优先于 bind：修改的是新实例
console.log(a.id, b.id, instance.id) // a x y

隐式丢失#

this 只看调用那一刻的形式。把方法赋值给变量，或者作为回调传出去，调用时前面没有了 obj.，就退化成默认绑定：

const user = {
  id: 1,
  showId() {
    console.log(this.id)
  },
}

user.showId() // 1
const show = user.showId
show() // undefined：默认绑定，this 是 window（严格模式下 this 是 undefined，会抛 TypeError）
setTimeout(user.showId, 0) // undefined：传进去的只是函数本身，和 user 已经无关

class 和 DOM 事件#

class 内部的代码默认运行在严格模式。如果把实例的方法单独取出来调用，比如 const inc = counter.inc 之后再调用 inc()，方法里的 this 是 undefined，访问 this.count 会直接抛 TypeError。常见的解决办法是在构造函数里写 this.inc = this.inc.bind(this)，或者把方法写成箭头函数形式的类字段 inc = () => { this.count++ }。

DOM 事件的处理函数如果是普通函数，this 指向绑定监听器的元素，也就是 event.currentTarget。它不一定是 event.target：在父元素上监听时，event.target 可能是实际被点击的子元素（见 事件委托）。

代码示例：综合输出题#

以下代码在浏览器中以普通 <script> 运行（非模块、非严格模式）：

var id = 'global'

const obj = {
  id: 'obj',
  normal() {
    return this.id
  },
  arrow: () => this.id,
  nested() {
    const inner = () => this.id
    return inner()
  },
}
const other = { id: 'other' }

console.log(obj.normal()) // ①
const fn = obj.normal
console.log(fn()) // ②
console.log(obj.arrow()) // ③
console.log(obj.nested()) // ④
console.log(obj.normal.bind(other)()) // ⑤
console.log(obj.arrow.call(other)) // ⑥
console.log(obj.nested.call(other)) // ⑦

输出依次是：obj、global、global、obj、other、global、other

• ①：隐式绑定，this 是 obj
• ②：隐式丢失，fn() 是默认绑定，this 是 window。顶层用 var 声明的变量会成为 window 的属性，所以输出 global
• ③：箭头函数取外层的 this。对象字面量不是作用域，外层就是全局作用域，this 是 window
• ④：inner 是箭头函数，继承 nested 被调用时的 this，也就是 obj
• ⑤：bind 显式绑定到 other
• ⑥：箭头函数的 this 改不了，call 传入的 other 被忽略，结果同 ③
• ⑦：call 让 nested 的 this 变成 other，inner 跟着继承

面试官可能追问#

易错点#

• 普通函数的 this 由调用方式决定，与函数在哪里定义无关；箭头函数正好相反，只看定义的位置
• 对象字面量不构成作用域，用箭头函数定义对象方法时，this 不是这个对象
• 严格模式下默认绑定的 this 是 undefined，访问它的属性会直接抛 TypeError，而不是得到 undefined