这条线是如何工作的：obj['e'+type+fn] = fn答案

【问题标题】：How does this line work: obj['e'+type+fn] = fn这条线是如何工作的：obj['e'+type+fn] = fn
【发布时间】：2015-01-25 22:52:12
【问题描述】：

我一直在到处寻找对此的解释。我知道，在 Javascript 中，您可以使用方括号表示法获取/设置对象的属性，但是当您在括号中使用“+”时会发生什么，如下所示：

obj['e'+type+fn] = fn;

我在 Jon Duckett 的 Javascript & Jquery 书中找到了这段代码。他将这段代码用作辅助函数，最初由 John Resig 创建。

这是完整的代码块。

function addEvent( obj, type, fn ) {
   if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){
                        obj['e'+type+fn]( window.event );
                     }
      obj.attachEvent( 'on'+type, obj[type+fn] );
   } else {
      obj.addEventListener( type, fn, false );
   }
};

当我把它放在一起时，这就是我所看到的（这对我来说没有意义）：

var obj = {
    e: fn,
    type: fn,
    fn: fn
};

【问题讨论】：

+ 连接字符串，就是这样，是否在括号中没有区别。 + 将在必要时致电 toString。
这段代码相当难看。我认为那本书没有解释它的工作原理。你应该避免使用它。如今，这种addEvent 辅助方法简直是过时了。
你有什么现代的替代品可以推荐吗？我假设您指的是使用 jquery，但也许您还有其他想法。

标签： javascript event-handling helper

【解决方案1】：

但是当你在括号中使用“+”时会发生什么

这是一个表达式，就像property brackets 中的其他所有内容一样。在这种情况下，它将字符串"e" 与事件类型和stringified 侦听器函数连接起来，以获得一个相当独特的属性名称。

【讨论】：

哇，我刚刚明白了。这本书确实说过它正在尝试创建一个唯一的属性名称，但出于某种原因，我认为它正在做一些更高级的事情。 obj['e'+type+fn] = fn;表示 obj.etypefn = fn
不，它的意思是 obj["eclickfunction(){alert(\"Hi\");}"] = fn; 之类的东西，甚至无法通过点符号访问 :-)