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

相关推荐
开发者小天1 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
Restart-AHTCM4 小时前
前端核心框架vue之(路由篇3/5)
前端·javascript·vue.js
让时光到此为止。5 小时前
vue的首屏优化是怎么做的
前端·javascript·vue.js
San305 小时前
JavaScript 流程控制与数组操作全解析:从条件判断到数据高效处理
javascript·面试·代码规范
dengzhenyue5 小时前
矩形碰撞检测
开发语言·前端·javascript
前端伪大叔6 小时前
第13篇:🎯 如何精准控制买入卖出价格?entry/exit\_pricing 实战配置
javascript·python
麦当_7 小时前
ReAct 模式在 Neovate 中的应用
前端·javascript·架构
itslife7 小时前
vite源码 - 开始
前端·javascript
Achieve - 前端实验室7 小时前
【每日一面】React Hooks闭包陷阱
前端·javascript·react.js
Asort7 小时前
JavaScript设计模式(四)——建造者模式:优雅构建复杂对象的实用指南
前端·javascript·设计模式