使用事件處理程序無法訪問對象內的對象

我有兩個函數，我用作類：Person和Eye。 Person本身創建一個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似乎解決了這個問題，但我不知道爲什麼..

來源

2013-04-06 Pithikos

* 「撥打第二個變量'eye'似乎解決了問題，但我不知道爲什麼。」 *：由於與你正在創建一個全局變量。 – 2013-04-06 16:38:45

No.' this'是一個對象，它在那時只存在於函數內部，而'eye'是該對象的一個屬性。 'this'是JavaScript中的一個特殊變量，請查看MDN文檔：https：//developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this。 – 2013-04-06 16:53:17

它不起作用，因爲「眼睛」不是一個變量，它是一個對象的屬性。你沒有做任何事情來告訴JavaScript看什麼對象。

你必須保存在另一個局部變量的this值：

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

然後你可以使用在事件處理程序：

console.log(person.eye);

來源

2013-04-06 16:36:11 Pointy

是否有可能得到這個Object Constructor而不保存在另一個局部變量中的值？ – Givi 2013-04-06 16:45:51

@Givi no。 'this'的值是在每個函數調用時設置的（包括調用你的事件處理函數）。這不是任何對象的固有屬性。還有其他方法可以確保'this'的正確值可用，但它們都具有相同的基本思想。 – Pointy 2013-04-06 16:47:24

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

在此背景下， name指的是窗口對象的name屬性，因爲您沒有指定要訪問它的對象。 window.name恰好在我的實現中返回"result"。並且ogging eye將不起作用，因爲eye尚未定義爲變量。

若要解決此問題，請使用變量將對當前對象的引用存儲在以外的事件函數中並在其中使用它。

var ref = this; 

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

輸出：

John 
Eye { color: "Green" }

Live Demo

來源

2013-04-06 16:37:05 0x499602D2

使用事件處理程序無法訪問對象內的對象

回答

相關問題