当HTMLElement.onclick事件--javascript调用时，在其函数中获取对象的属性

Question

我有几个HTML元素，我想处理onclick。在javascript代码中，我定义了具有属性name和函数whoAreYou()的原型，它必须是onclick处理程序。看起来像：

var Somebody = function(name) {
    this.name = name;
}
Somebody.prototype.whoAreYou = function() {
    console.log("I am " + this.name)
};

var somebody = new Somebody("Gary");
document.getElementById("somebody1").onclick = somebody.whoAreYou;

但this是指HTML元素而不是somebody，而不是“我是加里”，它说“我未定义”。

它工作，而whoAreYou是在构造函数内定义的，但我需要继承性。考虑到name被转移到whoAreYou，我如何访问他的Somebody.prototype？

Answer 1

您可以绑定上下文：

document.getElementById("somebody1").onclick = somebody.whoAreYou.bind(somebody);

要么

document.getElementById("somebody1").onclick = function() { 
  somebody.whoAreYou()
};

Answer 2

您需要在点击时执行whoAreYou函数：

var Somebody = function(name) {
    this.name = name;
}
Somebody.prototype.whoAreYou = function() {
    console.log("I am " + this.name)
};

var somebody = new Somebody("Gary");
document.getElementById("somebody1").onclick = function() {
    somebody.whoAreYou();
};

<div id="somebody1">click me</div>