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

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":"Bo"}}

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

因此，要使方法恢复原状，必须在客户端上创建游戏的新实例，然后使用Object.assign()来备份该对象。

示例

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

现在您可以打电话给newGameInstance.getHost()