JavaScript 中的 this – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第29节,你可以查看该手册的完整目录。

this 值根据使用位置的不同具有不同的值。不了解 JavaScript 这个小细节会导致很多头痛的问题,所以花5分钟学习所有技巧是值得的。

严格模式(strict mode) 中的 this

严格模式下,在任何对象之外的 this 始终是 undefined (未定义的)。

注意我提到了严格模式。 如果禁用严格模式(如果没有在文件顶部明确添加 'use strict',则默认为禁用),即草率模式(sloppy mode),也有人称为非严格模式,在这种模式下 , 如果在本文下面某有提及的这些情况下,this 都指向全局对象。

浏览器的全局对象为 window

方法中的 this

方法是附加到对象属性的函数。

你可以看到各种形式。

这是其中一种形式:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

car.drive()
//Driving a Ford Fiesta car!

在这种情况下,使用常规函数,this 会自动绑定到对象。

注意:上面的方法声明是 drive: function(){ … 的简写形式,ES6语法,等价于:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive: function() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

在这个例子中同样有效:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

car.drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}

car.drive()
//Driving a Ford Fiesta car!

箭头函数不能以相同的方式工作,因为它是词法绑定的:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive: () => {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

car.drive()
//Driving a undefined undefined car!

绑定箭头函数

你不能像使用普通函数那样将值绑定到箭头函数。

由于他们的工作方式不同。箭头函数中 this 是词法(lexically)绑定,这意味着 this 的值来自定义它们的上下文。

了解更多详情请阅读:JavaScript 箭头函数(Arrow Function)

显式传递要用作 this 的对象

JavaScript 提供了一些方法来将 this 映射到你想要的任何对象上。

函数声明 阶段使用 bind()

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}.bind(car)

drive()
//Driving a Ford Fiesta car!

你还可以绑定现有的对象方法来重新映射 this 值:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

const anotherCar = {
  maker: 'Audi',
  model: 'A4'
}

car.drive.bind(anotherCar)()
//Driving a Audi A4 car!

函数调用 阶段使用 call()apply()

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function(kmh) {
  console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`)
}

drive.call(car, 100)
//Driving a Ford Fiesta car at 100 km/h!

drive.apply(car, [100])
//Driving a Ford Fiesta car at 100 km/h!

传入 call() 或者 apply() 的第一个参数始终绑定 thiscall()apply() 之间的区别在于, apply() 需要一个数组作为参数列表,而 call() 者可以接受多个参数。

浏览器事件处理程序的特例

在事件处理程序回调中,this 指向接收事件的 DOM 元素:

document.querySelector('#button').addEventListener('click', function(e) {
  console.log(this) //HTMLElement
}

你可以这样绑定:

document.querySelector('#button').addEventListener(
  'click',
  function(e) {
    console.log(this) //这里的 this 指向全局的 Window 对象, 或者你的上下文
  }.bind(this)
)

如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(0) 打赏
未经允许不得转载:WEB前端开发 » JavaScript 中的 this – JavaScript 完全手册(2018版)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏