其实JS中的this是一个非常简单的东西,只需要理解它的执行规则就OK。

call/apply/bind可以显示绑定, 这里就不说了。

主要这些场隐式绑定的场景讨论:

  1. 全局上下文
  2. 直接调用函数
  3. 对象.方法的形式调用
  4. DOM事件绑定(特殊)
  5. new构造函数绑定
  6. 箭头函数

1. 全局上下文

全局上下文默认this指向window, 严格模式下指向undefined。

2. 直接调用函数

比如:

  1. let obj = {
  2. a: function() {
  3. console.log(this);
  4. }
  5. }
  6. let func = obj.a;
  7. func();

这种情况是直接调用。this相当于全局上下文的情况。

3. 对象.方法的形式调用

还是刚刚的例子,我如果这样写:

  1. obj.a();

这就是对象.方法的情况,this指向这个对象

4. DOM事件绑定

onclick和addEventerListener中 this 默认指向绑定事件的元素。

IE比较奇异,使用attachEvent,里面的this默认指向window。

5. new+构造函数

此时构造函数中的this指向实例对象。

6. 箭头函数?

箭头函数没有this, 因此也不能绑定。里面的this会指向当前最近的非箭头函数的this,找不到就是window(严格模式是undefined)。比如:

  1. let obj = {
  2. a: function() {
  3. let do = () => {
  4. console.log(this);
  5. }
  6. do();
  7. }
  8. }
  9. obj.a(); // 找到最近的非箭头函数a,a现在绑定着obj, 因此箭头函数中的this是obj

tips:

  1. function demo() {}
  2. demo.prototype.a = () => {
  3. console.log(this)
  4. }
  5. let c = new demo();
  6. c.a() //window

优先级: new > call、apply、bind > 对象.方法 > 直接调用。