TypeError: Class method is not a function, confused about binding this

Question

我有这个 class 游戏。

    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()

TypeError: Class method is not a function, confused about binding this

TypeError: Class method is not a function, confused about binding this

javascript

this

socket.io

function-binding