JavaScript this的指向

Nian糕

修改于 2024-03-16 16:15:12

7720

修改于 2024-03-16 16:15:12

文章被收录于专栏：JavaScript高阶应用JavaScript高阶应用

在 JavaScript 中this取什么值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了，因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境

this作为普通函数，指向window

function fn1() {
  console.log(this)
}
fn1() // window

使用call() apply() bind()，指向第一个参数

fn1.call({x: 100}) // 指向第一个参数 {x: 100}

作为对象方法被调用，指向调用该方法的对象

const niangao = {
  name: '年糕',
  sayHi() {
    // this 即当前对象
    console.log(this)
  },
  wait() {
    setTimeout(function() {
      // this === window
      // setTimeout是作为普通函数去执行，而不是作为niangao.wait()去执行
      console.log(this)
    })
  }
}

在class方法中被调用，指向实例对象

class Food {
  costructor(name) {
    this.name = name
  }
  eat() {
    console.log(this)
  }
}
const niangao = new Food('年糕')
niangao.eat() // Food{}

箭头函数，指向上级作用域的this

const niangao = {
  name: '年糕',
  sayHi() {
    // this 即当前对象
    console.log(this)
  },
  waitAgain() {
    setTimeout(() => {
      // this 即当前对象
      console.log(this)
    })
  }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

class