vue中箭头指向问题

在 webTest() 方法中，socket.onmessage 的回调函数内部，this 的指向发生了改变，导致无法访问到 msg 变量。为了解决这个问题，可以使用箭头函数或将 this 赋值给另一个变量。

使用箭头函数的示例代码如下：

webTest(){
  var socket = new WebSocket("ws://localhost:8082");

  socket.onopen = (event) => {
    console.log("WebSocket connected", event);
    socket.send("Hello from HTML page");
  };

  socket.onmessage = (event) => {
    console.log("Received message: " + event.data);

    if (event.data === 'unhelmet'){
      console.log("我进来了");
      console.log(this.msg);
    }
  };
}

在箭头函数中，this 的指向会自动绑定到外部的执行上下文，因此可以正确访问到 msg 变量。

另一种方法是将 this 赋值给另一个变量，在回调函数中使用该变量访问 msg。示例代码如下：

webTest(){
  var socket = new WebSocket("ws://localhost:8082");
  var self = this; // 将 this 赋值给 self

  socket.onopen = function(event) {
    console.log("WebSocket connected", event);
    socket.send("Hello from HTML page");
  };

  socket.onmessage = function(event) {
    console.log("Received message: " + event.data);

    if (event.data === 'unhelmet'){
      console.log("我进来了");
      console.log(self.msg); // 使用 self 访问 msg
    }
  };
}

在这种情况下，使用 self 变量可以维持正确的上下文，从而正确访问到 msg 变量。