当前位置: 首页 > news >正文

bind更改this指向问题

1.bind用法1
场景:小程序里,在test方法的请求接口then里面调用test2函数,此时test2里面的this指向为test的内容,并不指向组件内容
解决:this.test2().bind(this)()

test(){
let self=this
   api.recordCreate(data).then((res) => {
       if (res.success) {
          //处理业务
          self.test2()//错误,这样方法test2里的this,并不是指向vue组件,而且指向方法test
          self.test2().bind(self)(res.data);//正确,用bind更改指向
       }
   }).catch((err) => {
        console.log(err);
   });
},
test2(data){
console.log(this) //
}

2.bind用法2
场景: 创建了一个类,类里有一个参数需要绑定方法,页面使用时要用bind绑定,直接看代码
解决:this.websocket.onmessageFn = this.onmessageFn.bind(this)
类:(附赠websocket封装)

class MyWebScoket {
  constructor(socketUrl) {
    // super(socketUrl);
    this.onopenFn = null
    this.oncloseFn = null
    this.onmessageFn = null
    this.onerrorFn = null
    this.socketUrl = socketUrl
    this.socket = null
    this.init()
  }

  init() {
    let self = this
    self.socket = new WebSocket(self.socketUrl);
    self.socket.onopen = function (event) {
      if (self.onopenFn) {
        self.onopenFn(timeStep, event, )
      }
    }
    self.socket.onmessage = function (event) {
      setTimeout(() => {
        if (self.onmessageFn) {
          self.onmessageFn(event.data)
        }
      }, 3000)

    }
    self.socket.onerror = function (event) {
      console.log(event, 'websocket通信发生错误')
      if (self.onerrorFn) {
        self.onerrorFn(event)
      }
    }
    self.socket.onclose = function (event) {
      if (self.oncloseFn) {
        self.oncloseFn(event)
      }
    }
  }
  close() {
    this.socket.close()
  }
}

export default MyWebScoket

组件使用时:

addWebSocket(){
   let webScoketUrl=''//websocket地址
   this.websocket = new MyWebScoket(webScoketUrl);
   this.websocket.onopenFn = this.onopenFn();//错误绑定
   this.websocket.onmessageFn = this.onmessageFn.bind(this);//正确绑定
}onopenFn(){
 console.log(this)//这里的this 指向类
},
onmessageFn(data){
 console.log(this)这里的this 正常指向vue组件
 //业务处理
}

相关文章:

  • express+mysql+vue,从零搭建一个商城管理系统16--收货地址(全国省市县名称和code列表)
  • WebRTC:真正了解 RTP 和 RTCP
  • 获取远程管理软件保存的凭据
  • 分布式ID(8):分布式ID生成方法
  • EF数据持久化(三层架构,客户增删)
  • SpringSecurity
  • LabVIEW湍流等离子体束热效率优化
  • 前端基础学习
  • 计算机网络——物理层(奈氏准则和香农定理)
  • 设计模式之享元模式(Flyweight Pattern)【结构性模式】
  • EPSON XV4001BC陀螺仪传感器汽车导航系统的应用
  • 第二十七节 Java 多态
  • springboot2.7集成es8 https方式绕过证书访问集群
  • [游戏开发][Unity] 导出Xcode工程,完成调试与发布
  • 【linux】Debian访问Debian上的共享目录
  • wireshark windows 抓包https
  • HarmonyOS开发:超详细介绍如何开源静态共享包,实现远程依赖
  • 美易官方:美股调整即将到来?
  • 蓝桥杯C++大学B组一个月冲刺记录2024/3/19
  • Git常见命令
  • 为发期刊,高校学者偷贩涉密敏感数据!国安部披露间谍案细节
  • 综艺还有怎样的新可能?挖掘小众文化领域
  • 外交部发言人就印巴局势升级答记者问
  • 韩国前国务总理韩德洙加入国民力量党
  • 图集|俄罗斯举行纪念苏联伟大卫国战争胜利80周年阅兵式
  • 欧洲史上最严重停电事故敲响警钟:能源转型如何保证电网稳定?