Question

试图了解jquery如何在幕后工作，有什么区别：

jQuery.fn和jQuery.prototype

jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
},

然后：

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {

Answer 1

第一个片段保证您使用jQuery将始终在jQuery的原型上调用init函数。

$() == jQuery() == new jQuery() == new jQuery.prototype.init()

第二个片段允许您从fn访问jQuery的原型。通过将函数分配给fn属性，它们也被分配给$ .prototype。这允许在从$：

返回的对象上调用这些方法

jQuery.fn.example = function() { alert(this.id); }
$('#some-id').example(); // alerts 'some-id'

Answer 2

jQuery.fn是jQuery的所有新实例所基于的原型。它存在，以便第三方代码（和jQuery本身！）可以使用如下代码扩展jQuery：

jQuery.fn.myMethod = function() {...}

但是，目前在jQuery中，以下四个都是对同一个对象的引用！

jQuery.fn
jQuery.prototype
jQuery.fn.init.prototype
jQuery.prototype.init.prototype

并非全部：因为jQuery和$是（通常）彼此的别名，所以你可以在上面的任何一个中用$ j替换jQuery，对jQuery.fn进行8次引用。

那么为什么他们给出了所有这些不同名字相同的东西呢？部分历史，原型继承部分必要。

jQuery.fn 非常重要，因为jQuery本身和许多现有代码都依赖于在扩展jQuery时以这种方式引用它，所以这就是为什么那样。虽然我必须说“fn”这个名字让我感到困惑，但它也很好而且简短，这使得输入和回读比其他两个更友好。

对于 jQuery.prototype ，一旦创建了引用，它就永远不会在jQuery本身中被引用，所以它不清楚它在那里做了什么。有了原型继承的知识，你可能会认为它就在那里你可以像这样使用jQuery和new运算符：

obj = new jQuery(selector);

但是jQuery（）构造函数不使用将在其中创建的新对象，而是返回在其他地方创建的对象 - 实际上是在jQuery.fn.init（）中。不需要jQuery.prototype。据推测，它存在第三方兼容性 - 因此第三方代码可以互换使用jQuery.fn和jQuery.prototype。

这将我们带到 jQuery.fn.init.prototype 。需要此引用，因为它充当jQuery.fn.init（）构造函数的原型。在这个构造函数中，实际创建了新的jQuery对象，在这种情况下，它们是使用原型继承创建的，原型继承是指在创建新对象时将构造函数称为“prototype”的属性，将新对象赋予构造函数为'this'关键字。

最后， jQuery.prototype.init.prototype 只是让jQuery.fn和jQuery.prototype指向同一件事的疯狂后果。你不会用它。

请注意，以下4个表达式在jQuery中都是等效的，即使它们可能不是全部推荐的方式。所有这些都返回一个使用jQuery.fn作为原型的新对象 - 事实上所有这些都将jQuery.fn.init（）作为构造函数调用。不要忘记你通常可以用$。替换jQuery。

jQuery()
new jQuery()
new jQuery.fn.init()
new jQuery.prototype.init()

jQuery倾向于提供许多不同的方法来做同样的事情，甚至提到相同的方法或属性。我猜你也可以这么说关于浏览器API或DOM。但是，对于需要确保未来版本向后兼容的jQuery开发人员而言，这必然会使任务变得更加困难。

Answer 3

你给出的第一个代码片段是首先创建jQuery对象的东西（因为javascript中的对象只是函数）。

然后，在第二个片段中，jQuery.fn被设置为jQuery对象本身的扩展版本，包含所有实际方法。它是使用prototype属性扩展的，它不需要对jQuery本身做任何事情。

Javascript OOP

http://mckoss.com/jscript/object.htm

希望有帮助...

你能解释一下这个jQuery方法吗？

3 个答案: