第二十一篇 谈谈你对JS中this的理解。

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

在这里不想像其他博客一样展示太多的代码例子弄得天花乱坠， 反而不易理解。

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

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

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

1.  全局上下文

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

2. 直接调用函数

比如:

let obj = {
  a: function() {
    console.log(this);
  }
}
let func = obj.a;
func();

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

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

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

obj.a();

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

4. DOM 事件绑定

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

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

5. new+构造函数

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

6. 箭头函数？

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

let obj = {
  a: function() {
    let do = () => {
      console.log(this);
    }
    do();
  }
}
obj.a(); // 找到最近的非箭头函数 a，a 现在绑定着 obj, 因此箭头函数中的 this 是 obj

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

更多相关文章推荐：

《(建议收藏)原生 JS 知识系统整理》

以上关于第二十一篇 谈谈你对JS中this的理解。的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。