TypeError：类方法不是函数，对绑定 this 感到困惑

Question

我有这个类游戏。

    class Game {
      constructor(player) {
        this.player1 = player;
      }

      getHost() {
        // player has property nickname
        return `Host: ${this.player1.nickname}`;
      }
    }

我相信我遇到的问题是 getHost() 正在脱离它的上下文，但是我不确定如何解决它。我正在学习 JS，我对这种语言对 this 的使用感到非常困惑。我也是第一次使用 socket.io，所以这给我增加了很多困惑。
我的服务器脚本（服务器工作，只显示相关部分）：

io.on('connection', (socket) => {
    // passed defined player
    socket.on('host game', (player) => { 
        const game = new Game(player);
        console.log(game.getHost()); // still works here
        io.sockets.emit("game created", game);
    });

});

客户：

socket.on("game created", (game) => {
    const gameElement = document.createElement("li");
    gameElement.innerHTML = game.getHost(); // ERROR
    games.appendChild(gameElement);
});

在上面的标记线上，我得到了Uncaught TypeError: game.getHost is not a function。

很抱歉，如果 socket.io 函数让它变得更加混乱，基本上只是当游戏从服务器传递到客户端时，它不再起作用了。
感谢您的帮助

Answer 1

问题是 socketio 正在为您序列化对象。由于 websocket 仍然只是 HTTP，因此您无法通过它发送实际的 JS 对象。 socketio 在后台使用JSON.stringify(game) 处理将您的对象序列化为 JSON。它还会在客户端将该 JSON 字符串转换回一个对象。

不幸的是，当您这样做时，您会丢失方法。例如：

let game = new Game({nickname: 'Bob Vance'});
game = JSON.stringify(game);
console.log(game) // will output {"player1":{"nickname":"Bob Vance"}}

您应该在控制台中看到{"player1":{"nickname":"Bob Vance"}}，因为序列化为 JSON 会删除方法但保留属性。这只是正常的 JavaScript 行为。

因此，要恢复这些方法，您必须在客户端创建一个新的游戏实例，然后使用Object.assign() 重新构建对象。

例子

let serializedGame= JSON.parse(game);
let newGameInstance = new Game({nickname: game.nickname});
Object.assign(newGameInstance, serializedGame);

现在你应该可以打电话给newGameInstance.getHost()