JavaScript类私有成员访问异常：事件回调中类实例引用咨询

问题核心 #

事件触发时，回调函数#submitForm中的this指向触发事件的<form>元素，而非payment类的实例，因此无法读取私有成员#form。

最简解决方案（不依赖闭包/对象层级） #

有两种直接方式可确保回调中的this指向类实例：

1. 使用bind()绑定this #

在构造函数中，将私有方法的this显式绑定到类实例：

class payment {
    
    #form;
    
    constructor() {
        this.#form = $('#code-form').get(0);
        // 绑定this至类实例
        this.#form.addEventListener('submit', this.#submitForm.bind(this));
    }

    #submitForm(e) {
        e.preventDefault(); 
        console.log(this.#form); // 可正常访问私有成员
    }

}

(new payment());

2. 用箭头函数定义私有方法 #

箭头函数不会绑定自身的this，会继承外层作用域（构造函数）的this，也就是类实例：

class payment {
    
    #form;
    
    constructor() {
        this.#form = $('#code-form').get(0);
        this.#form.addEventListener('submit', this.#submitForm);
    }

    // 箭头函数自动继承类实例的this
    #submitForm = (e) => {
        e.preventDefault(); 
        console.log(this.#form);
    }

}

(new payment());

原理说明 #

• bind()会创建新函数，其this被固定为传入的类实例，确保回调触发时指向正确。
• 箭头函数的this由定义时的外层作用域决定，此处即构造函数中的payment实例，无需额外绑定。

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