Enjoy 20% off all plans by following us on social media. Check out other promotions!
测验题

解释 JavaScript `this` 如何工作

Topics
JAVASCRIPT
在GitHub上编辑

this没有简单的解释;它是 JavaScript 中最令人困惑的概念之一。 一个简短的解释是,this的值取决于函数如何调用。 在线阅读了很多关于this的解释,Arnav Aggrawal的解释很清楚。 适用下列规则:

  1. 如果调用函数时使用 new 关键字,那么函数中的this 是一个全新的对象。
  2. 如果apply, call, 或 bind 用于调用/创建函数, 那么函数中的this 是作为参数传递的对象。
  3. 如果一个函数作为方法被调用,例如obj.method() -- this是该函数的一个属性对象。
  4. 如果一个函数被作为一个自由函数调用, 意思是在没有上述任何条件的情况下调用它,this 就是全局对象。 在浏览器中,它是 window 对象。 如果在严格模式下('use strict'),this将是undefined 而不是全局对象。
  5. 如果上述多条规则都适用,则排名靠前的规则获胜,并将设置this值。
  6. 如果函数是一个 ES2015 箭头函数, 它将无视上面的所有规则,并在创建时接收其周围范围的this值。

若要深入解释,请查阅他的[Medium 上面的文章](https://codeburst.io/the-simple-rules-this in javascript-35d97f31bde3)。

你能否举例说明在 ES2015 年处理这一问题的方式已经发生变化?

ES2015 允许您使用箭头函数来使用封闭的词汇范围. 这通常很方便,但确实阻止了调用者通过.call.apply控制上下文--后果是诸如jQuery这样的库不会在你的事件处理函数中正确绑定this。 因此,在重构大型遗留应用程序时必须牢记这一点。

在GitHub上编辑