從事件處理程序調用的 javascript 函數訪問父成員

Question

問題

在 Javascript 中，事件處理函數如何引用其父級的成員？ 即你能定義一個更大對象的事件處理函數的一部分，並讓該函數“知道”它的父級嗎？

（請注意，其他人發布了一個幾乎相同的問題Accessing variables of parent function in Javascript event handlers 。它沒有得到回答。因此重新發布）

錯誤的預設

我原以為在“函數定義”時您可以捕獲“this”的副本以供以后重用（例如復制到“self”）。 顯然我錯了：在我將函數綁定到事件（下面的“click()”）之后，“self”隨后指的是 html 錨標記 ('');

一般上下文：嘗試在 javascript 中使用封裝/面向對象進行代碼重用。

例子

這是一個簡單的例子（從別處抄襲並修改）。

該函數在頁面加載期間調用時成功，但在用戶按下“單擊”時失敗

<a href="#" id="myLink" rel="my link">MY LINK</a>

<script type="text/javascript">

var Construct = function() {
    var self = this;    

    this.attr1 = 3;
    this.attr2 = 2;
    this.childObj = {
        method1: function () {
            // this function fails if called from an event handler
            // edited this function to "do something", i.e. provide a visual cue upon execute
            var foo = self.attr1 * self.attr2;
            alert ('value is ' + foo);
            return foo;
        }
    }
}

     var obj = new Construct();
    
    // this call succeeds
    alert (obj.childObj.method1());   

    //this call fails as soon as the event handler refers to "self"
    $("#myLink").click(obj.childObj.method1);

</script>
</body>
</html>

更新/編輯-更新示例以在運行時提供“視覺提示” - 添加了此部分。

我的錯誤。 正如下面所指出的，這個例子工作正常。 我原來的非工作代碼使用了這個：

   this.self = this

代替

   var self = this

我沒有意識到區別（在 Java 中它們是相同的）並且錯過了我的示例實際有效的事實（而我的代碼失敗了）。

Answer 1

你的代碼工作正常。 self指代對象，因為它應該是。 這就是 javascript 的詞法范圍是如何定義的。

問題是你的處理程序什么都不做。 method1只返回6但您永遠不會告訴它對該值執行任何操作。 如果你想證明給自己看，返回前的那行，加一個alert： alert(self.attr1 * self.attr2);

工作示例