深入浅出 js 中 this 的指向问题

94 阅读2分钟

1、全局环境下的this指向

在全局作用域下,无论是否开启严格模式 this 都指向 window

2、函数调用模式

当一个函数不是一个对象的属性被调用,而是直接作为函数来调用。

this的指向分为以下两种情况:

  1. 非严格模式,等价于 window 调用函数
  2. 严格模式,严格模式下this禁止指向window

3、方法调用模式

函数作为对象的方法来调用。this 指向调用的对象 4、call、apply、bind调用模式 call、apply、bind三个方法都是用来改变this的指向的。

call、apply、bind 调用模式下会将调用这三个方法的函数(即下面代码中的 fun 函数)中的 this 指向转成指向三个方法中的第一个参数(即下面代码中 obj 对象) 原本直接调用 fun 函数(即上面的函数调用模式)this 指向的是 window ,通过使用使用call、apply、bind 三个方法将 fun 函数中的 this 指向了 obj 对象。

注意: bind 是永久绑定 this 指向,当 bind 绑定 this 执行后,this 指向将不再发生改变。

5、构造器调用模式

即在构造函数中的 this 指向,构造函数的 this 指向 new 出来的实例对象

6、箭头函数中的this指向

箭头函数不同于传统 JavaScript 中的函数,箭头函数并没有属于⾃⼰的 this,它所谓的 this 是捕获其所在上下⽂的 this 值,作为⾃⼰的 this 值,并且由于没有属于⾃⼰的 this ,所以是不能被 new 调⽤的,这个所谓的 this 也不会被改变。

7、html中元素绑定事件中的this指向

当一个元素被绑定事件处理函数时,this指向被点击的这个元素。