使用此方法从 JavaScript 类调用事件会导致 SyntaxError答案

【问题标题】：Invoking an event from a JavaScript class using this cause a SyntaxError使用此方法从 JavaScript 类调用事件会导致 SyntaxError
【发布时间】：2021-07-03 20:06:01
【问题描述】：

我想做的是创建一个自定义动态输入。所以我将我的自定义输入包装在一个类中，一个 img 标签就像一个按钮，所以我处理了一个属性中的点击，它使用这个来调用一个类方法，但是这个逻辑会产生一个语法错误。

这是我创建的类的代码：

class Description {
    constructor(value) {
        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(text) {
        this._value = text;
    }

    test() {
        console.log("Dummy Text");
    }

    build() {
        return `<div class="row" >
            <img src="./icons/add.png" class="icon" onclick="${this.test}" /> 
            Intitulé : <input type="text" size="50" value="${this.value}"/>
        </div>`;
    }
}

这是错误信息：

未捕获的语法错误：意外令牌：'{'

【问题讨论】：

标签： javascript html oop

【解决方案1】：

只有当它们是独立的全局变量时，处理程序才能像这样被内联，test 不是。创建一个<div>，插入HTML，并将事件监听器附加到子级并返回<div>。

class Description {
    constructor(value) {
        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(text) {
        this._value = text;
    }

    test() {
        console.log("Dummy Text");
    }

    build() {
        const row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = `
            <img src="./icons/add.png" class="icon" /> 
            Intitulé : <input type="text" size="50" value="${this.value}"/>
        `;
        row.querySelector('img').addEventListener('click', () => this.test());
        return row;
    }
}

但是由于字符串插值到 HTML 标记中，这可能允许任意代码执行。最好分配给输入的.value。

class Description {
    constructor(value) {
        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(text) {
        this._value = text;
    }

    test() {
        console.log("Dummy Text");
    }

    build() {
        const row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = `
            <img src="./icons/add.png" class="icon" /> 
            Intitulé : <input type="text" size="50">
        `;
        row.querySelector('img').addEventListener('click', () => this.test());
        row.querySelector('input').value = this.value;
        return row;
    }
}

【讨论】：