最令初学JS者痛恨的 this

本文深入探讨JavaScript中this关键字的使用场景及其在不同上下文中的指向问题。尤其关注事件处理函数和定时器回调函数中this的指向变化,并介绍如何通过bind方法解决this丢失问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  关于this: 
      在事件处理函数中this->可自动获得事件绑定的元素对象
      何时: 只要处理函数的逻辑中必须当前元素才能正常执行时
      反之: 如果函数的逻辑中不需要当前元素也能正常执行时
               就不用加this!
如果事件绑定函数中没用到zoom对象中属性和方法 不用bind(this)


$elemt.click(function(){
this.XXX.css();
this.YYY.css(;) //因为大括号里的this是指向绑定元素 而其实我是想要这个this指向外面的对象zoom
//从而造造成了this里外this不一样 所以加了bind(this)
//如果用ES6新特性  箭头函数 ()=>{}内外共享this  如果函数体只有一句话 大括号也可以拆掉
}.bind(this))


对象直接量中this->window


    componentDidMount:function(){
        var timer=setInterval(function(){
        var opacityValue=this.state.opacity;
        opacityValue-=0.1;
        if(opacityValue<0.1){
          opacityValue=1.0;
        }
        this.setState({
          opacity:opacityValue
        })
      }.bind(this),100)
    },
    render:function(){
      return <div style={{opacity:this.state.opacity}}>
      {this.props.name}
      </div>
    } 我遇到了定时器里的函数 里外this不一   也要加.bind(this) 切记!!!!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值