javascript - jQuery对象用console.log输出看到的很像数组是怎么实现的?-PHP Chinese Network Q&A

图片上传不了,老出错;就只能复制啦!

这个是我自己构造的对象,用console.log输出看到是这样;
foo.fn.foo.init {0: p, 1: p, 2: p, 3: p, 4: p, selector: "p", init: function, aouth: "jer", age: 24, add: "江西"…}

jquery对象用console.log输出像一个数组;
[p, p, p, p, p, prevObject: b.fn.b.init[1], context: document, selector: "p", jquery: "1.9.1", constructor: function…]

想知道它是怎么实现的,下面是我写的源码;

(function(){ function foo(selector){ return new foo.prototype.init(selector); }; foo.fn = foo.prototype= { init : function(selector){ var elems = document.getElementsByTagName(selector), len = elems.length, i = 0; for(;i < len;i++){ this[i] = elems[i]; }; this.selector = selector return this; }, aouth:'jer', age: 24, add :'江西' }; foo.prototype.init.prototype = foo.prototype; foo.fn.sayName = function(){ return this; }; foo.fn.sayAdd = function(){ return this; }; window.foo = foo; })(); //console.log(foo); var selects = foo('p'); console.log(selects);

reply all (2)

刘奇2017-04-10 14:32:38 2 floor

这个其实不难，典型的Ducking Type应用。一个 Javascript 对象，只要定义了length属性和splice方法，它看起来就像一个数组。例如：

var x = { '0': 'foo', '1': 'bar', length: 2, splice: function () {} }; console.log(x); // ["foo", "bar", splice: function]

只要它会呱呱叫，走路一摇一摆，它就是个鸭子……

Like+0

Add Reply

阿神2017-04-10 14:32:38 1 floor

其实看源码很简单就能知道了，jQuery并没有做的很复杂，只是仅仅的把创建个数组把对象的每个属性放进去而已。下面说说我的发现过程：

首先在控制台中打印$，发现其调用了Q.fn.init函数。
```
console.log($); //function (t,e){return new Q.fn.init(t,e)}
```
上源码去查找init部分的实现，查看源码我们可以发现jQuery在初始化函数最后使用了jQuery.makeArray函数对对象进行了处理。OK，看到这个名字我觉得答案已经离我们很近了。
搜索源码查找makeArray的实现，OK，我找到了，在这里。函数的最后是调用了jQuery.merge函数把对象添加到了this中。
我们继续查找jQuery.merge函数的实现，嗯，在同一个文件中。这个函数就非常明显的告诉我们是一个遍历添加的过程。