专一的 this

256 阅读2分钟

「这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战

作为前端开发者,this 是我们每天都会接触到的;对它说熟悉也是很熟悉,说陌生也真的是很陌生;最熟悉的陌生人?差不多就是这种感觉吧!!!!!!

我们经常会在以下的一些场景下见到它的身影:

  • 全局执行环境中
  • 函数内部
  • 类的构造函数中
  • 对象内的方法中
  • 构造函数中
  • 原型链中
  • getter 与 setter 中
  • DOM事件处理函数中
  • 内联事件处理函数中

虽然我们能够在这些地方看到它的身影,但是它的心 ❤️ 又停留在哪里呢?

首先我们要知道 this 是怎么来的? 大多数情况下,this 是由函数的调用方式决定的,这是因为它是在运行时绑定的。

全局环境中,this 是专心的,一心一意地指向全局对象;即使是在函数上下文中,如果没有被严格模式限制的情况下,它也依旧是全心向着全局对象的;但是如果被严格模式限制了,那它就只能 undefined 了。

在函数内部,this的值取决于函数被调用的方式;this 的包容性也是很强的,比如,类中的所有非晶态方法都会被添加到 this 的原型中(这是因为在类的构造函数中,this 是一个常规对象)。

鉴于派生类只能调用 super()之后返回,在调用 super()之前引用 this 都会抛出错误。

对象可以作为 bind 或 apply 的第一个参数传递,并且其传递的参数会被绑定到该对象上,在对象内部是可以通过 this 来访问的

在 es5 中,this 迎来了一个关系很好的小伙伴 bind,通过 bind 的帮助,函数可以创建一个与其具有相同函数体和作用域的函数,无论这个新函数如何被调用,this 都会永久地绑定到了 bind 的第一个参数的位置。

还有一个我们很熟悉的函数,它是 es6 新增的,他就是箭头函数;相信使用过箭头函数的小伙伴都会很喜欢它的,但是我们也很容易发现箭头函数中是没有自己的this的,它只能沿用其所在词法作用域中的this。

在原型链中的this的指向是多变的,哪里引用就指向哪里;getter 与 setter 中的 this 也是哪里用,哪里设置就指向哪里。

终其所思,this 的心一心一意,从哪里来最终还是会回到哪里去的。