this/call/apply/bind

• JavaScript 深入之从 ECMAScript 规范解读 this (opens new window)
• 📚 你不知道的 JavaScript (opens new window)

this 是什么

this 的作用就是 减少函数传参上下文对象？？

this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计得更加简洁并且易于复用。

显式传递上下文对象会让代码变得越来越混乱，使用 this 则不会这样。当我们介绍对象和原型时，你就会明白函数可以自动引用合适的上下文对象有多重要

每当你想要把 this 和词法作用域的查找混合使用时，一定要提醒自己，这是无法实现的

this 到底是什么

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

每个函数的 this 是在调用时被绑定的，完全取决于函数的调用位置（也就是函数的调用方法）

this 全面解析

绑定规则

1. 默认绑定

   独立函数调用 指向全局 严格模式下 LHS 会失败无法查询 this 导致 TypeError: this is undefined

2. 隐式绑定

   调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，不过这种说法可能会造成一些误导

3. 显示绑定 call apply bind

4. new 绑定

   实际上并不存在所谓的“构造函数”，只有对于函数的“构造调用

5. 箭头函数本身没有 this 指向他的词法作用域 this

绑定例外

• 显性绑定 第一个值 null

• 间接引用 (a.foo = b.foo)() 函数的赋值返回函数 默认绑定来说，决定 this 绑定对象的并不是调用位置是否处于严格模式，而是函数体是否处于严格模式。如果函数体处于严格模式，this 会被绑定到 undefined，否则 this 会被绑定到全局对象。

总结

var obj = {
  a: 1,
  b: function() {
    this.name = 1232
    const c = () => {
      console.log(this.name)
    }
    return c
  }
}
const c = obj.b()
c()

1. 作为对象调用时，指向该对象 obj.b(); // 指向 obj
2. 作为函数调用, var b = obj.b; b(); // 指向全局 window 严格是 undefined
3. 作为构造函数调用 var b = new Fun(); // this 指向当前实例对象 b
4. 作为 call 与 apply 调用 obj.b.apply(object, []); // this 指向当前的 object
5. 箭头函数 (opens new window)不使用上面的绑定规则，根据外层作用域来决定 this，继承外层函数调用的 this 绑定