返回

深入理解JavaScript中的This:面试官也疯狂

前端

JavaScript 的 this 关键词是一种非常重要,也非常容易混淆的概念。许多 JavaScript 程序员,特别是那些有其他编程语言背景的人,往往会对 this 关键词感到困惑。

this 关键词在 JavaScript 中的作用是,它指向当前执行代码的对象。也就是说,this 的值取决于代码在哪里被调用。

this 的值是如何确定的

  1. 默认绑定 :当一个函数作为普通函数被调用时,它的 this 值被设置为全局对象,在浏览器中,全局对象就是 window 对象。

  2. 隐式绑定 :当一个函数作为对象的方法被调用时,它的 this 值被设置为该对象。

  3. 显式绑定 :可以使用 call()、apply() 和 bind() 方法来显式地设置一个函数的 this 值。

this 的值在箭头函数中是如何确定的

箭头函数没有自己的 this 值。箭头函数的 this 值由其外层函数的 this 值决定。如果箭头函数没有外层函数,那么它的 this 值与普通函数的 this 值相同。

this 的值在构造函数中是如何确定的

构造函数的 this 值由 new 运算符决定。new 运算符创建一个新对象,并将该对象的引用作为构造函数的 this 值。

this 的值在回调函数中是如何确定的

回调函数的 this 值由回调函数被调用的方式决定。如果回调函数作为普通函数被调用,它的 this 值被设置为全局对象。如果回调函数作为对象的方法被调用,它的 this 值被设置为该对象。如果回调函数作为另一个函数的参数被调用,它的 this 值被设置为该函数的 this 值。

总结

  • this 是一个指针,它指向当前执行代码的对象。
  • this 的值取决于代码在哪里被调用。
  • 默认情况下,this 的值是全局对象。
  • 可以使用隐式绑定、显式绑定和箭头函数来改变 this 的值。
  • 构造函数中的 this 值由 new 运算符决定。
  • 回调函数中的 this 值由回调函数被调用的方式决定。

面试题

  1. 请解释 JavaScript 中 this 关键词的作用。
  2. 请写出三种改变 this 值的方法。
  3. 请解释箭头函数的 this 值是如何确定的。
  4. 请解释构造函数的 this 值是如何确定的。
  5. 请解释回调函数的 this 值是如何确定的。

答案

  1. this 关键词指向当前执行代码的对象。
  2. 三种改变 this 值的方法是:隐式绑定、显式绑定和箭头函数。
  3. 箭头函数的 this 值由其外层函数的 this 值决定。
  4. 构造函数的 this 值由 new 运算符决定。
  5. 回调函数的 this 值由回调函数被调用的方式决定。