js函数中的this

特殊对象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会保留定义该函数时的上下文

相关推荐
烛阴4 小时前
TypeScript 进阶必修课:解锁强大的内置工具类型(二)
前端·javascript·typescript
Ares-Wang4 小时前
Javascript》》JS》》ES6》 Map、Set、WeakSet、WeakMap
开发语言·javascript·es6
gnip4 小时前
接入高德地图
前端·javascript
十一.3664 小时前
171-178CSS3新增
前端·javascript·css3
gnip5 小时前
深度封装tree公共组件
前端·javascript·vue.js
Ares-Wang5 小时前
JavaScript》》JS》》ES6》》 foreach 、for in 、for of
前端·javascript·es6
Jacob02345 小时前
为什么现代 JavaScript 开发者正在远离回调与框架?
前端·javascript·前端框架
yanlele6 小时前
前端面试第 77 期 - 2025.09.02 更新前端面试问题总结(15 道题)
前端·javascript·面试
一枚前端小能手6 小时前
🔥 Vue项目越来越卡?响应式系统的4个性能陷阱
前端·javascript·vue.js
纯JS甘特图_MZGantt6 小时前
五分钟打通任督二脉!mzgantt数据导入导出与外部系统无缝集成
javascript