javascript - JS 对象 this.method() 通过 jQuery 中断

Question

我确信对此有一个简单的答案，但现在是星期五下午，我很累。 :(

不确定如何解释，所以我将继续并发布示例代码...

这是一个简单的对象:

var Bob =

{ Stuff : ''

, init : function()
    {
        this.Stuff = arguments[0]
    }

, doSomething : function()
    {
        console.log( this.Stuff );
    }

}

这里使用的是:

$j = jQuery.noConflict();
$j(document).ready( init );


function init()
{
    Bob.init('hello');

    Bob.doSomething();

    $j('#MyButton').click( Bob.doSomething );
}

一切正常，除了最后一行。当 jQuery 调用 doSomething 方法时，它会覆盖“this”并停止其工作。

尝试只使用 Stuff也不起作用。

那么如何以允许 jQuery 调用它的方式引用对象自身的属性，并允许该对象与调用 jQuery 对象一起工作？

即我希望能够做这样的事情:

doSomething : function()
    {
        console.log( <CurrentObject>.Stuff + $j(<CallerElement>).attr('id') );
    }

(其中 <CurrentObject> 和 <CallerElement> 被替换为适当的名称。)

Answer 1

这不是 jQuery 的错，它是 JavaScript 处理对象的方式不可或缺的一部分。

与大多数其他面向对象的语言不同，“this”不在 JavaScript 中绑定(bind)到每个方法级别；相反，它完全取决于函数的调用方式:

Bob= {
    toString: function() { return 'Bob!'; },

    foo: function() { alert(this); }
};
Brian= {
    toString: function() { return 'Brian!'; },
};

Bob.foo(); // Bob!
Bob['foo'](); // Bob!

Brian.foo= Bob.foo;
Brian.foo(); // Brian! NOT Bob

var fn= Bob.foo;
fn(); // window NOT Bob

你在做什么:

$j('#MyButton').click( Bob.doSomething );

就像最后一个带有 fn 的例子:你把函数 doSomething 从 Bob 中拉出来，并将它作为一个纯函数传递给 jQuery 的事件处理程序 setter :它不再有与 Bob 或任何其他对象的任何连接，因此 JavaScript 会传入全局 window 对象。 (这是 JavaScript 最糟糕的设计特性之一，因为你可能不会立即注意到 window 不是 Bob，并开始访问它的属性，导致奇怪和困惑的交互和错误。)

为了记住 Bob，您通常会像 nickyt 的回答那样创建一个函数，在闭包中保留“Bob”的副本，以便在回调时记住它并用于调用真正的方法。然而，在 ECMAScript 第五版中现在有一种标准化的方法:

$j('#MyButton').click( Bob.doSomething.bind(Bob) );

(您还可以在 bind 调用中放置额外的参数，以便用它们调用 doSomething ，这很方便。)

对于尚未原生支持第五版的 bind() 方法的浏览器(目前是大多数浏览器)，您可以修改自己的 bind 实现(原型(prototype)图书馆也这样做)，比如:

if (!Object.bind) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}