JavaScript中调用类属性存储的回调：解决this指向错误问题

你的推测完全正确：当WebSocket触发onopen事件时，回调函数onOpen里的this指向的是WebSocket实例，而非你的Connection类实例，所以会报错找不到私有成员#log_text。以下是几种实用的解决方法：

方法1：用bind绑定this到Connection实例 #

修改构造函数中的回调赋值，通过bind将onOpen的this固定为当前Connection对象：

constructor(url, log_callback)
{
    this.#web_socket = new WebSocket(url);
    this.#web_socket.binaryType = "arraybuffer";
    // 绑定this到当前Connection实例
    this.#web_socket.onopen = this.onOpen.bind(this);

    this.#log_text = log_callback;
}

bind会返回一个新函数，调用时this始终指向传入的Connection实例，类似C++中绑定成员函数到对象的逻辑。

方法2：用箭头函数包装回调 #

利用箭头函数没有独立this的特性，让它继承构造函数上下文的this：

constructor(url, log_callback)
{
    this.#web_socket = new WebSocket(url);
    this.#web_socket.binaryType = "arraybuffer";
    // 箭头函数的this就是构造函数里的Connection实例
    this.#web_socket.onopen = (event) => this.onOpen(event);

    this.#log_text = log_callback;
}

这种写法更简洁，不需要额外处理函数绑定。

方法3：用箭头函数定义类方法 #

直接将onOpen定义为箭头函数类型的实例属性，永久绑定this到类实例：

class Connection
{
    #web_socket = 0;
    #log_text = null;

    constructor(url, log_callback)
    {
        this.#web_socket = new WebSocket(url);
        this.#web_socket.binaryType = "arraybuffer";
        this.#web_socket.onopen = this.onOpen;

        this.#log_text = log_callback;
    }

    // 箭头函数方法，this固定为Connection实例
    onOpen = (event) => {
        this.#log_text('Connection opened.');
    }
}

这种方式不需要在构造函数里做额外绑定，代码结构更清晰。

内容的提问来源于stack exchange，提问作者Dams