Question

问题

在javascript中，事件处理函数如何引用其父元素的成员？即，您可以定义一个更大的对象的事件处理函数的一部分，并让该函数“知道”它的父级吗？

（请注意，其他人发布了一个几乎相同的问题Accessing variables of parent function in Javascript event handlers。它没有得到答复。因此重新发布）

错误的预设

我曾想过，在“功能定义”时，您可以捕获“此”的副本供以后重复使用（例如复制到“自我”）。显然我错了：在我将函数绑定到事件（下面的“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(self.attr1 * self.attr2);

<强> Working Example

从事件处理程序调用的javascript函数访问父成员

1 个答案: