JS的this指向

所有内容均不是原创,单纯之前学习时做的笔记。内容结合了非常多的文章视频,已经记不清参考的哪里的了,所以就没有加参考说明了。(ps:这块好像是yck和小野森森两个大佬的结合吧)

this指向

什么是this指向?

  • 当一个函数被调用时,会创建一个执行环境。这个环境会包含函数在哪里被调用、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性,会在函数执行的过程中用到。
  • this实际上是在函数被【调用】 时发生的绑定,它指向什么完全取决于 【函数在哪里被调用】

为什么要使用this指向?

  • 可以在不同的上下文对象中重复使用函数,不用针对每个对象编写不同版本的函数。

this规则

  1. 对于直接调用 foo 来说,不管 foo 函数被放在了什么地方,this 一定是 window
  2. 对于 obj.foo() 来说,我们只需要记住,谁调用了函数,谁就是 this,所以在这个场景下 foo 函数中的 this 就是 obj 对象
  3. 对于 new 的方式来说,this 被永远绑定在了实例化的对象上面,不会被任何方式改变 this
  4. 箭头函数其实是没有 this 的,箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this
  5. 最后种情况也就是 bind 这些改变上下文的 API 了,对于这些函数来说,this 取决于第一个参数,如果第一个参数为空,那么就是 window。不管给函数 bind 几次, this 永远由第一次 bind 决定

判断this总结

  1. 首先,new 的方式优先级最高,接下来是 bind 这些函数,然后是 obj.foo() 这种调用方式,最后是 foo 这种调用方式,同时,箭头函数的 this 一旦被绑定,就不会再被任何方式所改变
  2. 如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到 undefined,否则绑定到全局对象。

如何“更安全”的忽略this绑定?

  • ø = Object.create(null) ,以保护全局对象。在 JavaScript 中创建一个空对象最简单的方法都是Object.create(null) 。Object.create(null) 和 {} 很 像, 但 是 并 不 会 创 建 Object.prototype 这个委托,所以它比 {}“更空”

image.png