gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:33:38 25 4
gpt4 key购买 nike

我确信这个问题有一个简单的答案,但现在是星期五下午,我很累。 :(

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


这是一个简单的对象:

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> 替换为适当的名称。)

最佳答案

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

与大多数其他面向对象语言不同,JavaScript 中的“this”绑定(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 的最后一个示例:您正在从 Bob 中提取函数 doSomething 并将其作为纯函数传递给 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))
);
};
};
}

关于javascript - JS 对象 this.method() 通过 jQuery 中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2275168/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com