javascript - 如何从 JavaScript 中的匿名事件监听器访问对象属性

Question

好的，代码可在: http://jsfiddle.net/35zjxrax/2/ 上找到

我的问题在js的第24行。我有一个 Person 类的对象，它具有属性和原型(prototype)方法。其中一种方法返回一个按钮，该按钮应该包含按钮中的信息...但我似乎无法访问该按钮。有什么想法吗？

这是类(class):

var Person = function(nom, age, img) {
  this.nom = nom;
  this.age = age;
  this.img = img;
  this.toString = function() {
    return this.nom + " - " + this.age;
  };
};


Person.prototype.getName = function() {
  var s = document.createElement('span');
  s.className = "spanNom";
  s.appendChild(document.createTextNode(this.nom));
  return s;
};
Person.prototype.getImage = function() {
  var im = document.createElement('img');
  im.src = this.img; //this -- is the Person obj
  im.className = "monImage";
  im.onclick = function() {
    console.log(this); //this -- is the image element...
    /*
    how can I access the object proprieties from an anonymous event listener
    */
  };
  return im;
};
Person.prototype.getButton = function() {
  var d = document.createElement('div');
  var b = document.createElement('input');
  b.type = "button";
  b.className = "butPers";
  b.value = this.toString();
  b.addEventListener('click', function() {
    console.log(this);
    /* this is the button */
    /* I need it to be the PersonObject */
  });
  d.appendChild(b);
  return d;
};

Person.prototype.showPerson = function() {
  var d = document.createElement('div');
  d.appendChild(this.getName());
  d.appendChild(this.getImage());
  d.appendChild(this.getButton());
  d.className = "divPerson";
  return d;
};



var data = [{
  "nom": "Alex",
  "age": 30,
  "img": "http://fc02.deviantart.net/fs71/i/2012/213/3/1/play_the_name_game__alex__by_sabreartworks-d59hhta.jpg"
}, {
  "nom": "Joe",
  "age": 20,
  "img": "http://logocache.com/custom-design/logo-name/Joe-designstyle-kiddo-m.png"
}, {
  "nom": "Tony",
  "age": 10,
  "img": "http://fc01.deviantart.net/fs71/f/2012/330/e/5/tony_stark___sketches_by_cloud_kira-d5m709q.jpg"
}];
var ppl = [];
//fill ppl table with Person objects
for (var i in data) {
  ppl.push(new Person(data[i].nom, data[i].age, data[i].img));
}

for (var i in ppl) {
  console.log(ppl[i].toString());
  console.log(ppl[i].getName());
  console.log(ppl[i].getImage());
}

window.onload = function() {
  var c = document.getElementById("c");
  for (var i in ppl) {
    c.appendChild(ppl[i].showPerson());
  }
};

.monImage {
  width: 150px;
  height: 150px;
  padding: 5px;
  border: solid 1px #000;
  cursor: pointer;
}
.divPerson {
  width: 250px;
  padding: 20px;
  border: solid 3px #03C;
  display: inline-block;
  margin: 5px;
  text-align: center;
}
.spanNom {
  font-size: large;
  font-weight: bold;
  margin: 10px;
  display: block;
}

<div id="c"></div>

Answer 1

像这样使用.bind:

im.onclick = function(event) {
    console.log(this); // 'this' is now the Person
    console.log(event.target); // event.target will give you the <img> tag
}.bind(this); // .bind ensures the anon func is called with Person as 'this'

演示，图像 -- http://jsfiddle.net/35zjxrax/4/

此处的文档和垫片信息 -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind