vue中使用websocket,无法调用methods

Question

export default{
    methods:{
        test(){
            console.log('test');
        },
        socket(){
           var socket = new WebSocket("ws:url");
           socket.onmessage=function(event){
               this.test();
           }
        }
    }
}

报错提示test不是一个method

Answer 1

作用域问题。把this实例存为_this，回调函数里面就能访问到了。

export default{
    methods:{
        test(){
            console.log('test');
        },
        socket(){
           var socket = new WebSocket("ws:url");
           var _this = this;
           socket.onmessage=function(event){
               _this.test();
           }
        }
    }
}

Answer 2

应该是this指向问题，不是作用域问题。编译的时候形成作用域，this指向在执行的时候确定的。
箭头函数比较特别，其中的this是在定义的时候确定的，指向定义时所在的对象而不是调用时所在的对象。

//这样写的，函数作为socket的一个属性，其中的this指向socket。
socket.onmessage=function(event){
       this.test();
   }

该例子：箭头函数写法时，严格模式下this为undefined，非严格模式下，this指向window，在vue中，this被绑定到实例上，指向VueComponent。

socket.onmessage=(event) => {
       this.test();
   }