js函数中的this

白头吟2025-08-10 12:57

特殊对象this

一、标准函数中，this引用的是把函数当成方法调用的上下文对象

复制代码

window.color = 'red';

let o={
      color:'blue'    

}

function sayColor(){

        console.log(this.color);

}
sayColor();   // red

o.sayColor=sayColor;

o.sayColor();  //blue

定义在全局上下文中的函数sayColor()引用了this对象。这个this到底引用了哪个对象必须到函数被调用时才能确定。因此这个值在函数执行过程中可能会变。如果在全局上下文中调用sayColor(),结果输出red, 因为this指向window,而this.color相当于window..color.而再把sayColor()赋值给o之后，在调用o.sayColor(); this会指向o,即this.color相当于o.color,所以会显示blue

二、箭头函数中，this引用的是定义箭头函数的上下文

复制代码

window.color = 'red';

let o={
      color:'blue'    

}

function sayColor=()=>{

        console.log(this.color);

}
sayColor();   // red

o.sayColor=sayColor;

o.sayColor();  //red

在对sayColor()的两次调用中，this引用的都是window对象，因为这个箭头函数是在window上下文中定义的

三、在事件回调或定时回调中调用某个函数，this值指向的并非想要的对象。此时可以将回调函数写成箭头函数就可以解决问题

复制代码

function king(){
      this.royaltyName='henry';

     setTimeout(
       ()=>{
               console.log(this.royaltyName,1000);
      })
}

function queen(){
      this.royaltyName='elizabeth';

     setTimeout(
       function(){
              console.log(this.royaltyName,1000);
      })
}
new King();// henry
new Queen();//undefined

因为箭头函数中的this会保留定义该函数时的上下文