this只存在于函数(除箭头函数外)中,在函数执行时自动声明。可以将this理解为一个变量或标识符。

this的指向对象与其所在函数本身无关,而与其所在函数被调用的方式有关。

如果函数是被直接调用的,则this指向全局作用域中的window对象,代码示例如下

function demo () {
  console.log(this)
}
demo() // 输出结果为window对象

如果函数是被某个对象调用的,则this指向该调用函数的对象,代码示例如下

const myObject = {
  demo () {
    console.log(this)
  }
}
myObject.demo() // 输出结果为myObject对象

如果在箭头函数中使用this,则该this与其最近层的function函数中的this绑定,所以只需确定箭头函数位于哪一个function函数的作用域下。若箭头函数位于全局作用域下,则其this固定指向window对象。注:箭头函数中的this不可被后期修改

const demo1 = () => console.log(this)
demo1() //  输出结果为window对象

function demo2 () {
  const demo3 = () => console.log(this)
// 此处demo3箭头函数的this与demo2绑定
  demo3()
}

const myObject = {
  demo2
}
demo2() // 输出window对象
myObject.demo2() // 输出myObject

构造函数中的this

当通过new来创建实例对象时,该构造函数当前层作用域(scope)中的this指向该实例对象,示例代码如下

function A (x) {
  // 通过new创建实例对象时,当前scope中的this指向所创建的实例对象
  this.name = x
  // 箭头函数中的this与最近层function函数中的this绑定
  this.go = () => console.log(this)
  ;(() => console.log(this))()
}
const a = new A('aaa') // 输出的this为a对象
a.go() // 输出的this为a对象

const test = a.go
test() // 输出的this为a对象
A() // 未通过new使用构造函数,输出为window对象

JavaScript Style Guide

最后修改:2023 年 02 月 14 日