Question

我有两个用作类的函数：Person和Eye。 Person本身会创建一个Eye对象。稍后我尝试访问创建的eye对象，并在用户点击网页时使用事件处理程序。

function Eye(){
   this.color="Green";
}


function Person() {

   this.name="John";
   this.eye = new Eye();
   //eye=this.eye; // uncomment and everything works!

   document.addEventListener("click", function(){
      console.log(name); // This works

      console.log(eye);  // This doesn't work

   })

}

var person= new Person();

为什么这不起作用？制作第二个变量eye似乎解决了这个问题，但我不知道为什么......

Answer 1

它不起作用，因为“eye”不是变量，它是对象的属性。你没有告诉JavaScript什么对象要看。

您必须将this的值保存在另一个本地变量中：

function Person() {
  this.name="John";
  this.eye = new Eye();
  var person = this;

然后你可以在事件处理程序中使用它：

    console.log(person.eye);

Answer 2

document.addEventListener("click", function() {
    console.log(name);
    console.log(eye);
});

在此上下文中，name引用窗口对象的name属性，因为您没有指定要从中访问它的对象。 window.name恰好在我的实施中返回"result"。并且eye无效，因为eye尚未定义为变量。

要解决此问题，请使用变量将对当前对象的引用存储在事件函数中并在其中使用。

var ref = this;

document.addEventListener("click", function() {
    console.log(ref.name);
    console.log(ref.eye);
});

输出：

John
Eye { color: "Green" }

Live Demo

无法使用事件处理程序访问对象内的对象

2 个答案: