Question

在创建它们时，将唯一属性与匿名JavaScript函数相关联的标准方法是什么，以便在执行这些属性时可以在函数本身中访问这些属性（即运行时）？

场景是这样的：

假设我有想要绑定到动态生成的匿名函数的事件。

var events = ['connect','disconnect','error','connect_failed'];

for(a in events){
  var handler = function(){
     // console.log(arguments.callee.custom); // Not reliable 'cos callee is supposedly deprecated
     console.log('<event-name>');
  };
  handler.custom = events[a];
  $(window).on(events[a],handler);
}

由于不推荐使用 arguments.callee ，并且不能保证在所有平台上都是最佳的。实现与此类似的东西的推荐方法是什么？

Answer 1

您也可以在功能中使用handler.custom：

var handler = function() {
  console.log(handler.custom);
  console.log('<event-name>');
};

为了防止在异步回调的情况下出现作用域问题，您可以通过将代码包装在闭包中来创建新的作用域handler函数：

for(a in events){
  (function() {
    var handler = function(){
      console.log(handler.custom);
      console.log('<event-name>');
    };
    handler.custom = events[a];
    $(window).on(events[a],handler);
  })();
}

编辑：刚刚意识到您也可以使用forEach（尽管这也会受到浏览器兼容性问题的影响）：

events.forEach(function(event) {
  var handler = function() {
    ...
  };
  handler.custom = event;
  $(window).on(event,handler);
});

Answer 2

命名函数表达式仅在函数范围内提供对函数本身的引用：

var events = ['connect', 'disconnect', 'error', 'connect_failed'];

for (var a in events) {
  var handler = function inside() {
     console.log(inside.custom); // not deprecated
     console.log('<event-name>');
  };
  handler.custom = events[a]; // now will stay with function even if renamed or moved
  $(window).on(events[a], handler);
}

但是，Internet Explorer 8及更低版本无法正确解析命名函数 - Juriy Zaytsev更详细地解释了它们背后的确切问题：http://kangax.github.io/nfe/#named-expr

如果你真的必须针对IE8及以下目标，要么坚持使用arguments.callee，要么使用条件编译用于IE，这基本上是针对JavaScript的IE条件注释。

Answer 3

我知道你的意思...... 你想要在事件被触发时想要事件名称，并且想要知道在运行时哪个事件已经被触发...我是对的吗？然后你可以使用处理程序中收到的事件对象... 的 DEMO

var events = ['connect','disconnect','error','connect_failed']; for(a in events){ var handler = function(e){ console.log(e.type); console.log('<event-name>'); }; $(window).on(events[a],handler); } for(a in events){ $(window).trigger(events[a]); }

Answer 4

你可以这样做：

var events = ['connect','disconnect','error','connect_failed'];

function assignHandler(eventType, custom) {
   $(window).on(events[a], function() {
      console.log(custom);
   });
}   

for(a in events){
  assignHandler(events[a], events[a]);
}

JS闭包的神奇之处在于，assignHandler()中指定为事件处理程序的匿名函数即使在{{1}之后也能够访问custom 的assignHandler()参数已完成。

但是，由于您似乎正在使用jQuery的.on() method，因此您不需要自己实现任何内容，因为jQuery已经具有此功能：

assignHandler()

注意可选的第三个参数是.on( events [, selector ] [, data ], handler(eventObject) )。在事件处理程序中，可以将其作为event.data进行访问。

data

将唯一属性与JavaScript中的匿名函数相关联

4 个答案: