javascript - jQuery 源码 返回数组对象

Question

$();
能在控制器里面看到返回的是一个数组[];

在jQuery源码当中 jQuery.fn.init 对象中有如下代码

// HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        console.log(this)
        return this;
    }   

Query()是我模拟jQuery写的
我奇怪的是jQuery()返回的是一个像数组一样的[]
而我写的返回是一个Query.fn.init对象

所以想问下jQuery返回的[]，是怎么样实现的

Answer 1

javascriptjQuery = function(selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init(selector, context);
}

javascriptinit = jQuery.fn.init = function(selector, context) {}

javascriptinit.prototype = jQuery.fn

看上面这三段代码，可以了解$(...)返回的是一个 jQuery.fn.init 对象，jQuery.fn.init 是一个构造函数，其原型就是 jQuery.fn。

再看看 jQuery.fn 的定义（精简代码）

javascriptjQuery.fn = jQuery.prototype = {
    jquery: version,
    constructor: jQuery,
    // The default length of a jQuery object is 0
    length: 0,

    toArray: function() {},
    each: function(callback, args) {},

    map: function(callback) {},

    slice: function() {},

    // For internal use only.
    // Behaves like an Array's method, not like a jQuery method.
    push: push,
};

可以看到这是一个类似数组的对象，所以 $(...) 得到的是一个类数组对象，而不是真正的数组，用 Array.isArray 很容易检查出来。它作为原型，提供了 each 和 map 等方法。

如果要把它变成真正的数组，需要调用其 toArray() 方法