Question

我知道如果对象是一个函数，我可以用闭包（var self = this）来做这个...

<a href="#" id="x">click here</a>

<script type="text/javascript">
    var object = {
        y : 1,

        handle_click : function (e) {
            alert('handling click');

            //want to access y here

            return false;
        },

        load : function () {
            document.getElementById('x').onclick = this.handle_click;
        }
    };

    object.load();
</script>

Answer 1

因此，事件处理程序部分连接正常（我自己测试过）但是，正如您的注释所示，您无法访问刚刚定义的对象的“y”属性。

这有效：

var object = { 
  y : 1, 
  handle_click : function (e) {
    alert('handling click');

    //want to access y here 
    alert(this.y); 

    return false; 
  }, 
  load : function () { 
    var that = this; 
    document.getElementById('x').onclick = function(e) {
      that.handle_click(e); // pass-through the event object
    }; 
  } 
}; 
object.load();

还有其他方法可以做到这一点，但这很有效。

Answer 2

将对handle_click的调用绑定到它所定义的对象的最简单方法是这样的：

        var self=this;
        document.getElementById('x').onclick = 
           function(e) { return self.handle_click(e) };

如果你需要传入参数或想让代码看起来更干净（例如，如果你设置了很多类似的事件处理程序），你可以使用currying技术来实现相同的目标：

bind : function(fn)
{
   var self = this;
   // copy arguments into local array
   var args = Array.prototype.slice.call(arguments, 0); 
   // returned function replaces first argument with event arg,
   // calls fn with composite arguments
   return function(e) { args[0] = e; return fn.apply(self, args); };
},

...

        document.getElementById('x').onclick = this.bind(this.handle_click, 
           "this parameter is passed to handle_click()",
           "as is this one");

Answer 3

我知道如何用杰森的最新作品来做到这一点。没有匿名函数的任何方法吗？

Answer 4

由于AddEventListener，我们可以使用处理程序方法直接传递一个对象，您将可以访问其属性： http://www.thecssninja.com/javascript/handleevent

希望这能帮助那些像我一样的人在几年之后寻找这个话题！

可以在javascript对象文字访问本身中定义事件处理程序吗？

4 个答案: