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组件 //业务处理 }