JS类静态函数调用问题求助：Resource类静态方法调用无响应

嘿，我来帮你梳理下问题所在，以及怎么修复：

核心问题1：静态方法add()的定位错误 #

你把add设为静态方法，但它要修改的this.amount是实例属性——静态方法里的this指向的是Resource类本身，而不是具体的资源实例，类本身并没有amount这个属性，所以这个方法根本无法正确修改任何实例的数值，而且因为没有报错（只是默默失败），所以你看不到问题。

核心问题2：按钮点击事件绑定错误 #

你写的AddBtn.setAttribute("onClick", Resource.add())会在创建按钮的时候就立即执行Resource.add()，而不是等到点击按钮时才触发。就算能触发，也无法关联到对应的资源实例。

修复方案 #

1. 把add改为实例方法

既然add是要操作某个具体资源实例的状态，它应该是实例方法，和subtract一样：

class Resource {
 constructor(name, amount) {
 this.name = name;
 this.amount = amount
 this.image = "images/" + this.name + "Icon.png"
 }
 // 去掉static，改为实例方法
 add() {
 this.amount += 1
 console.log(`${this.name} 当前数量: ${this.amount}`) // 加个日志方便验证
 }
 subtract() {
 this.amount -= 1
 }
 trade() {
 console.log(this.name)
 }
}

2. 正确绑定按钮的点击事件

创建按钮时，需要让点击事件调用对应资源实例的add方法，这里可以用两种方式确保this指向正确的实例：

function createResourceCards() {
 let resources = createNewResourceClassInstance();
 console.log(resources);
 // 注意用let声明i，避免循环作用域问题
 for (let i = 0; i < resources.length; i++){
 const AddBtn = document.createElement("button")
 AddBtn.setAttribute("id", resources[i].name + "AddBtn")
 AddBtn.setAttribute("class", "btn btn-success add-btn")
 // 方式1：用bind绑定当前实例
 AddBtn.onclick = resources[i].add.bind(resources[i]);
 // 方式2：用箭头函数形成闭包，同样能绑定实例
 // AddBtn.onclick = () => resources[i].add();
 AddBtn.innerText = "+"
 // 别忘了把按钮添加到DOM中，比如添加到body或者指定容器
 document.body.appendChild(AddBtn);
 }
}

3. 简化createNewResourceClassInstance函数

这个函数里的for循环是多余的，map已经会遍历整个数组了，直接返回结果即可：

function createNewResourceClassInstance() {
 return ResourcesArray.map(res => new Resource(res, 0));
}

现在你再测试一下，点击每个"+"按钮，对应的资源实例的amount就会增加，控制台也能看到日志输出啦。

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