类内调用getInfo()方法报错与事件绑定重复触发问题求助

问题1：无法调用getInfo()方法 #

原因：事件回调里的普通function的this指向触发事件的DOM元素（即shapeContainer），而非Shape类的实例，所以找不到getInfo方法。

核心修复思路：修正this指向的同时，更合理的方式是让DOM元素关联对应的Shape实例，方便点击时直接获取。

问题2：点击事件多次触发 #

原因：每次调用createShape都会给shapeContainer添加一个新的点击监听器，创建n个元素就会绑定n个监听器，点击时所有监听器都会执行，导致重复输出。

核心修复思路：仅给shapeContainer绑定一次点击事件，而非每个实例创建时都绑定。

完整修复代码 #

class Shape {
    constructor(name, color) {
        this._name = name;
        this._color = color;
    }

    // 将方法定义在原型上，避免每个实例重复创建函数副本
    getInfo() {
        return `${this._name} ${this._color}`;
    }

    createShape() {
        const element = document.createElement('div');
        // 给DOM元素绑定当前Shape实例，点击时可直接获取
        element.shapeInstance = this;
        document.querySelector('.shape-container').appendChild(element);
        // 补充基础样式让元素可见可点击
        element.style.cssText += `
            background-color: ${this._color};
            width: 100px;
            height: 100px;
            margin: 10px;
            display: inline-block;
            cursor: pointer;
        `;
    }
}

// 仅绑定一次点击事件，放在类外部
const shapeContainer = document.querySelector('.shape-container');
const output = document.querySelector('.output');
shapeContainer.addEventListener('click', (e) => {
    const target = e.target;
    // 校验点击目标是我们创建的元素，且关联了Shape实例
    if (target.matches('div') && target.shapeInstance) {
        output.innerHTML = target.shapeInstance.getInfo();
    }
});

// 测试创建实例
const circle = new Shape('圆形', 'red');
circle.createShape();
const square = new Shape('正方形', 'blue');
square.createShape();
const triangle = new Shape('三角形', 'green');
triangle.createShape();

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