从事件处理程序调用的 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 但你永远不会告诉它用那个值做任何事情。如果你想证明给自己看，在return前的那一行，加一个alert：alert(self.attr1 * self.attr2);

Working Example