类中构造函数定义的donut_count无法在函数中访问，原因是什么？

你的代码有两个核心问题导致控制台输出undefined：

1. donut_count不是实例属性 #

你在构造函数里用var donut_count = 1声明的变量，只是构造函数内部的局部变量，不属于DonutMaker类的实例对象。类的实例方法（比如donutCreate）根本访问不到这个局部变量，自然会返回undefined。

要让它成为实例可访问的属性，必须用this.donut_count = 1把变量挂载到实例上。

2. 事件处理函数的this指向错误 #

当你通过addEventListener绑定donutCreate时，点击事件触发后，函数里的this会指向触发事件的DOM元素（也就是#donut_creater这个元素），而不是DonutMaker的实例obj1。这时候你访问this.donut_count，其实是在找DOM元素的donut_count属性，当然不存在，返回undefined。

修正后的代码 #

class DonutMaker {
  constructor() {
    // 改为实例属性
    this.donut_count = 1;
    this.target = document.getElementById("donut_creater");
    // 用bind绑定this指向实例
    this.target.addEventListener("click", this.donutCreate.bind(this));
    // 另一种写法：箭头函数保留外层this
    // this.target.addEventListener("click", () => this.donutCreate());
  }
  donutCreate() {
    console.log(this.donut_count); // 现在能正确输出1，点击后可按需修改数值
  }
}

let obj1 = new DonutMaker();

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