jQuery 原型和构造函数链接答案

【问题标题】：jQuery prototype and constructor function chainingjQuery 原型和构造函数链接
【发布时间】：2013-03-09 04:44:08
【问题描述】：

jQuery如何允许其构造函数充当接受参数的函数，同时其构造函数也充当接受参数的函数？

我对 JavaScript 有点陌生，所以如果这是一个菜鸟问题，请原谅，（我已经查看了源代码，但很难尝试剖析）。

无论如何，例如$(document).ready(<args>); 构造函数$() 和原型ready() 都充当函数。如何？因为如果我试试这个：

var $ = function( selector ) {
    if(selector == document) {
        return document;
    }
};

$.prototype = {
    constructor: $,
    ready: function( args ) {
        if( isDomReady ) {
            args.apply( document );
        } else {
            window.onload = args;
        }
    }
};

var isDomReady = ( document.addEventListener || document.readyState == ("complete"|"loaded"|true|4) || document.onreadystatechange() ) ? true : false;

$(document).ready(function() { alert("Wibbles!") });

我得到一个错误 Uncaught TypeError: Object[object global] has no method 'ready'

【问题讨论】：

您不会通过从ready 返回this 来链接方法。
我知道您收到错误消息的原因。 $(document) 只是返回 HTMLDocument，它没有 .ready 函数。如果 $ 有一个“元素”属性，它在您运行构造函数时存储了文档元素，那么您可以通过访问准备函数中存储的元素来检查它的就绪状态。
@MattDiamant 啊...我想我会重新阅读该评论几次以进行研究。哈哈。但我想我明白了。谢谢。
基本上所有方法都返回调用它们的对象。

标签： javascript jquery object prototype

【解决方案1】：

你知道，这让我很感兴趣。您已经接受了一个答案，但如果它证明有用，让我发布我的答案。有一个fiddle created here

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

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    context: null,
    isReady: null,
    init: function( selector, context ) {
        if (selector === document){
            this.context = document;
            this.selector = document;
        }
        console.log(this);
        return this;
    },
    ready: function(func){
        var args = Array.prototype.slice.call(this, arguments),
            boundReadyFunc = func.bind(this, args.slice(1));

        if (this.isReady){
            func();
        }
        else {
            document.addEventListener( "DOMContentLoaded", this.onReady.bind(this, func), false );
        }
    },
    onReady: function(func){
        console.log("onready");
        this.isReady = true;
        func.call(this);
    },
};

jQuery.fn.init.prototype = jQuery.fn;
jQuery(document).ready(function(){
    alert("Hey, here I am");
});

让我试着解释一下这是如何工作的。

每次调用$(selector) 之类的东西时，都会使用您提供的选项创建一个新的jQuery 实例（请参阅return new jQuery.fn.init( selector, context );）；

为了方便起见，我们将 jQuery 原型公开为另一个名为 jQuery.fn 的全局变量。为了使其真正可链接，init 函数必须返回一个新的jQuery 实例。这就是为什么最后我们明确定义jQuery 和jQuery.init 的原型是相同的。这样，您现在可以链接函数调用，如

$(document).ready(DoSomethingHere)

希望这会有所帮助。

另外，您可以在 github 上找到 jQuery 源代码。它是模块化的，很容易理解。

【讨论】：

谢谢！这更像是我一直在寻找的方向，但它来的有点晚，我已经进入了函数链。不过谢谢！

【解决方案2】：

这是一种称为函数链接的编程技术。

您可以在此处查看更多信息：How does basic object/function chaining work in javascript?

【讨论】：

啊，好吧。感谢您的参考！