JavaScript中的 “this”

用户4093407979430
56 阅读2分钟

JavaScript中的this，在没有认真学习之前，用到this基本都是靠日常习惯和感觉，没有很规范的去使用和了解清楚每一个this。
于是上博客，上论坛，上阮一峰的js教程，翻犀牛书，总算是对this有了一定的了解。
下面直入正题！

this：
当你使用这个关键字时，它总是指向一个对象，至于指向哪个对象，则取决于它所在的环境（上下文，类，全局 | 摘自mdn），这也是学习this非常重要的内容之一。
下面直接上总结：

  1. 默认绑定：
    当你在全局代码中使用this时，this默认指向全局对象。
  2. 隐式绑定：
    当在普通函数中使用this时，如果函数作为对象的方法调用，则this指向调用对象。（如果函数在全局代码中调用，则与默认绑定一样指向this，或者说就是默认绑定）。
  3. 显式绑定：
    调用函数或方法时，可以通过apply，call，bind三者之一来手动改变this指向，具体可以参考这篇总结。
  4. new绑定：
    使用new关键字配合构造函数创建对象时，构造函数中的this将会指向new关键字创造出来的对象（如果没记错我记得也是通过显式绑定更改）。

说完总结，再聊聊一个特殊情况，也就是箭头函数中的this。
通过隐式绑定我们知道，当函数作为对象的方法调用，则this指向调用对象。但是，这仅限于普通函数，如果这个函数是一个箭头函数，那么this的指向是完全不同的，不指向调用对象，而是在代码定义时，函数所在当前作用域下的对象。举个例子：
假设在全局环境中有如下两段代码

1.这里的getThis是箭头函数，此时函数所在作用域仍然是全局作用域，因此this指向全局对象window

let obj = {
    getThis:()=>{
            console.log(this);
         }
}

let fn = obj.getThis
fn()

2.这里的getThis是普通函数，但返回值是箭头函数，此时这个箭头函数所在作用域是方法作用域（getThis方法体内），因此this指向此方法的所属对象obj

let obj = {
    getThis(){
         return ()=>{
            console.log(this);
         }
    }
}

let fn = obj.getThis()
fn()

除此之外，当你尝试使用显式绑定去修改箭头函数的this指向时，这并不能生效。
箭头函数中的this 总结：

  1. 指向取决于函数定义时所在对象；
  2. this指向无法被手动修改（即call，apply，bind不生效）；

OK，那么这就是一篇关于this的小文章，写得感觉有点杂乱且随意，先这样吧，作为第一篇文章，后续写顺手了再回来精心打磨。

avatar
文章
阅读
粉丝