有对象’；s自制按钮调用对象&x2019；s法 在普通JavaScript中，考虑以下内容：希望有一个具有自己的渲染方法的对象，并且在渲染中是一个按钮，用来调用另一个对象的函数。

作为一个基本示例：

class-Person（）{
//...
incrementAge（）{this.age++}
render（）{
返回“年龄+=1”
}
}

现在，正如您可能意识到的，此按钮将失败，因为

此

现在指的是单击事件，而不是对象本身

问题

---

让此按钮调用对象函数的解决方案是什么？

在字符串中键入javascript代码实际上是一种不好的做法。您将无法在IDE中获得代码完成或错误检查

也许只返回一个实际的HTML组件更好？这将为您提供错误处理，您可以向按钮添加侦听器，而无需使用

querySelector

来查找您自己的元素

如果在

render

方法中使用

（）=>

表示法，

this

将继续引用

Person

类，因此您仍然可以说

this.age++

class Person {
    constructor(){
        this.age = 10
    }
    
    incrementAge() { 
       this.age++ 
    }
    
    render() {
       const btn = document.createElement("button")
       btn.innerText = "Age += 1"
       btn.addEventListener("click", () => this.incrementAge())
       return btn
     }
}

// usage
let p = new Person()
let element = p.render()
document.getElementById("app").appendChild(element)

---

代码笔草图：

此

将引用按钮，而不是单击事件。像

onclick

这样的内联事件处理程序是可用的。它们是记录事件的一种方式。总是这样。试着用它来代替 — 它更易于维护，适用于动态添加（例如“渲染”）元素。例如，使用an's。请参阅和。@charlietfl-它显然是香草的。如果它是React，我会返回一个没有引号的HTML对象：）@SebastianSimon-谢谢链接！我会仔细阅读，尽量避免使用onClick方法。