javascript - 当以两种不同方式分配事件处理程序时，此值显示不同的结果

Question

查看我的代码 http://jsfiddle.net/kxATT/3/

           function byId(id) {
               if (id) {
                   return document.getElementById(id);
               } else {
                   return null;
               }
           }

           function setAttr(elm, attr, value) {
               elm.setAttribute(attr, value);
           }

           var app = {
               id: 12,
               fn: function () {
                   alert(this.id);
               }
           };

           function init() {
               setAttr(byId('txt'), 'onclick', 'app.fn()');
               byId('txt1').addEventListener('click', app.fn, true);
           }

单击第一个框时，它会提示 12。对于第二个框，它提示 txt1。显然在这两种情况下，尽管我调用的是同一个函数，this 指的是不同的对象。我听说，对于输入元素，元素的对象本身被传递给函数，并在事件处理函数中被引用为 this。如果是这样，为什么在使用 setAttribute 添加事件时它不是真的。

Answer 1

当您将字符串分配给 onclick 时，您基本上是在创建函数的 body；浏览器提供功能，例如你的字符串 "app.fn()" 变成:

function onclickHandlerCreatedByBrowser(event) {
    app.fn();
}

当您通过 addEventListener 分配函数引用时，就像您在 JavaScript 中使用函数引用时一样，它只是一个函数引用；没有对象信息。 JavaScript 中的 this 完全由调用函数的方式设置，而不是定义函数的位置。

如果您使用支持 ECMAScript5 的环境(或使用 ES5 填充程序)，您可以使用 Function#bind 解决此问题:

byId('txt1').addEventListener('click', app.fn.bind(app), true);

否则，您可以通过自己提供浏览器在字符串大小写中提供的功能来解决它​​:

byId('txt1').addEventListener('click', function() {
    app.fn();
}, true);

更多阅读:

• > Mythical methods
• > You must remember this