JavaScript 中的 This
2024年12月4日大约 1 分钟
关于 JavaScript 中不同地方的 this 指向。
本文中所有 Demo 均在 RunJS 中运行。
函数对象本身
当函数作为构造器被调用时,this
指向自身。
function constructor(){
console.log(this);
}
new constructor();
箭头函数不能作为构造器
const arrowCanNotBeConstructor = () => {
console.log(this);
}
new arrowCanNotBeConstructor();
// TypeError: arrowCanNotBeConstructor is not a constructor
对象本身
当函数作为对象的方法被调用时,this
指向该对象。
const object = {
value: 1,
logThis: function(){
console.log(this);
}
}
object.logThis();
当通过 f.call
调用函数时, this
指向 call
的第一个参数。
const object = {
value: 1,
arrowLog: ()=>{
console.log(this);
},
logThis: function(){
console.log(this);
}
}
const obj2 = {
value: 2
}
object.logThis.call(Array.prototype);
object.logThis.call(obj2);
注
箭头函数作为方法时,尽管通过 call
调用,其 this
依旧指向 globalThis
。
类(ES6
)的静态方法指向类本身,实例方法指向实例本身。
class someClass {
logThis(){
console.log(this);
}
static staticLogThis(){
console.log(this);
}
}
someClass.staticLogThis();
new someClass().logThis();
globalThis
定义于全局的函数和箭头函数,在作为函数调用时 this
都指向 globalThis
。
function globalFunction(){
console.log(this === globalThis); // true
}
const globalArrowFunction = () => {
console.log(this === globalThis); // true
}
定义于对象上的箭头函数,在作为函数调用时 this
指向 globalThis
。
const object = {
value: 1,
arrowLog: ()=>{
console.log(this === globalThis);
}
}
object.arrowLog();