JavaScript类中如何正确将构造函数属性传递给类方法

1. error1 is not defined 报错原因 #

error1是你在constructor内部用let声明的块级作用域变量，仅在constructor的代码块内可访问，类的其他实例方法（比如method）不属于该作用域，自然无法读取。

2. error2输出undefined原因 #

原代码存在两处语法/调用错误，导致代码执行异常、this指向不符合预期：

• 绑定事件监听器的代码末尾缺失右括号，属于语法错误，完整正确写法为formFields[i].addEventListener("change", this.method.bind(this))
• 你在method内部直接调用isValid(this)，但isValid是类的实例方法，必须通过this.isValid(this)调用，否则会触发全局作用域查找失败的报错，打断后续代码执行，导致this.error2的打印逻辑异常。

3. 修复方案 #

最简修复版 #

如果不需要限制error1的访问权限，直接把它挂载到实例上即可，修复后完整代码如下：

class myClass {
  constructor(setting) {
    // 把error1挂载到实例上，供其他方法访问
    this.error1 = ["fdf", "gff"];
    this.error2 = ["fdf", "gff"];
    // 注意：formFields需要自行保证在当前作用域可访问
    for (let i = 0; i < formFields.length; i++) {
      if (formFields[i].tagName === "BUTTON") {
        continue;
      }
      // 补全右括号
      formFields[i].addEventListener("change", this.method.bind(this));
    } 
  }
  isValid(el){
    // 你的业务逻辑
  }
  method(){
    // 调用实例方法必须加this
    this.isValid(this)
    console.log(this.error1); 
    console.log(this.error2);
  }
}

私有属性版 #

如果不想把error1暴露为实例的公开属性，可以用JS类的私有字段实现：

class myClass {
  // 声明私有属性，仅类内部可访问
  #error1 = ["fdf", "gff"];
  constructor(setting) {
    this.error2 = ["fdf", "gff"];
    // 其余逻辑和上面一致
  }
  method(){
    this.isValid(this)
    // 私有属性加#前缀访问
    console.log(this.#error1); 
    console.log(this.error2);
  }
}

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