javascript - 代理 jQuery.init。尴尬的行为

Question

我正在尝试使用 jQuery.fn.extend 用我自己的实现覆盖 jQuery.fn.init，这将与原始实现的行为不同，但是将需要在某些地方调用原始实现来完成真正的工作。

因此，第一件事就是在新实现中实际“代理”原始实现。这就是我正在尝试做的事情，我正在观察看起来很尴尬的行为(这似乎是 JS 的事情之一)。

可以看到我最近的尝试here .所以问题是。它只应该将边框应用于 .parent .child。不是 .parent 和 .child。这就是它现在似乎正在做的事情。如果您删除我的 jQuery.fn.extend 调用。您可以看到原始的正确行为。

所以，问题是我做错了什么？这是代理任何 JS 函数，特别是 jQuery init 函数的正确方法吗？有没有更好的办法？

额外

我看到了this old question那里的答案是指jQuery.sub这是moved to the jQuery Migrate plugin现在。我应该尝试使用它吗？它比我现在正在尝试的更有可能奏效吗？我真的需要吗？

Answer 1

注意:您真的不应该这样做，因为内部 jQuery 代码也会调用构造函数，如果您非常不小心，这可能会带来非常不寻常的问题。

你的问题是你没有调用 oldInit作为一个构造函数 - 而不是作为一个函数，它真的不起作用，因为在 jQuery.fn.init 中设置了任何东西会继续jQuery.fn ，而不是一个新的 jQuery 对象。

为什么不直接将 ThisBinding 设置为 {} 呢？

虽然在了解了"new"运算符的工作方式后这看起来有些直观，但这并不实际上做同样的事情。为什么？

function Foo() { this.bar(); }
Foo.prototype.bar = function () { alert(1); };
new Foo; // 1 is alerted
Foo.apply({}); // TypeError: Object #<Object> has no method 'bar'

当 new被使用，它也给出实例的 __proto__构造函数的 prototype目的。当你创建一个对象文字时，这是标准的 Object.prototype ，而不是预期的原型(prototype)对象。

那怎么办？

如果您试图覆盖 jQuery.fn.init ，你需要使用这样的东西:

var oldInit = jQuery.fn.init;
jQuery.fn.extend(
{ init: function ()
    {   return oldInit.apply(new oldInit, Array.prototype.slice.call(arguments));
    }
});

这是如何运作的？

调用 new oldInit没有参数，我们将返回一个带有 __proto__ 的空对象设置为 jQuery.fn ，正是我们想要的。然后，我们将为 oldInit 提供参数，任何参数都将直接进入这个空的新对象，就像原始对象一样。

这是有效的，因为当您调用它时，您实际的 ThisBinding(函数调用中 this 的值)将已经是新的 jQuery 对象，因为您应该引用 this。向 jQuery.fn.init 的实例添加新属性构造函数。

您的原始代码如下:

var oldInit = jQuery.fn.init;
jQuery.fn.extend({
    init: function () {
        return oldInit.apply(jQuery.fn, Array.prototype.slice.call(arguments));
    }
});

这会让你的构造函数认为新函数应该是 jQuery.fn ，这可能不是您想要的。 如果您有一个标准函数，那将起作用(因为这就是 ThisBinding 的本意)，但是由于"new"运算符更改了 ThisBinding，这不再意味着与以前相同的东西.