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