建设网站的网站江苏免费直链平台

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

test(){
let self=thisapi.recordCreate(data).then((res) => {if (res.success) {//处理业务self.test2()//错误，这样方法test2里的this,并不是指向vue组件，而且指向方法testself.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 = nullthis.oncloseFn = nullthis.onmessageFn = nullthis.onerrorFn = nullthis.socketUrl = socketUrlthis.socket = nullthis.init()}init() {let self = thisself.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组件//业务处理
}