this 不是在函数定义时决定，而是在“函数调用时”决定。

5 条绑定规则

1) 默认绑定

function foo() {
  console.log(this)
}

foo() // 浏览器非严格模式：window

2) 隐式绑定（对象调用）

const obj = {
  a: 1,
  foo() {
    console.log(this.a)
  },
}

obj.foo() // 1

3) 显式绑定（call/apply/bind）

function foo(x, y) {
  console.log(this.a, x, y)
}

const obj = { a: 100 }
foo.call(obj, 1, 2) // 100 1 2
foo.apply(obj, [1, 2]) // 100 1 2

const bound = foo.bind(obj, 1)
bound(2) // 100 1 2

4) new 绑定

function User(name) {
  this.name = name
}

const u = new User('Tom')
console.log(u.name) // Tom

5) 箭头函数

箭头函数没有自己的 this，只会捕获定义位置的外层 this。

const obj = {
  a: 1,
  normal() {
    const inner = () => console.log(this.a)
    inner()
  },
}

obj.normal() // 1

绑定优先级

new 绑定 > 显式绑定（bind/call/apply） > 隐式绑定 > 默认绑定

常见丢失场景

1) 赋值后独立调用

const obj = {
  a: 2,
  foo() {
    console.log(this.a)
  },
}

const bar = obj.foo
bar() // this 丢失，默认绑定

2) 当作回调传入

const obj = {
  a: 2,
  foo() {
    console.log(this.a)
  },
}

setTimeout(obj.foo, 0) // this 丢失
setTimeout(obj.foo.bind(obj), 0) // 修复

call / apply / bind 的差异

方法	执行时机	参数形式	返回值
call	立即执行	逗号分隔参数	函数执行结果
apply	立即执行	参数数组	函数执行结果
bind	不立即执行	逗号分隔参数（可预置）	新函数

贡献者: zhaojisen

上一页原型、原型链与继承

下一页对象遍历与常用方法