## 回顾zepto对象 经过了上一节的知识补充之后,我们再回到先前zepto的那个例子。 ```html <p id="p1">测试</p> <div> <span>test</span> <span>test</span> <span>test</span> </div> <script type="text/javascript" src="js/zepto-1.1.6.js"></script> <script type="text/javascript"> var $p1 = $('#p1'); console.log($p1); var $span = $('span'); console.log($span); </script> ``` 上面代码中,我们之前就了解到`$p`或者`$span`是一个数组,但是又扩展了其他功能(例如 `$p.addClass`),这里可以肯定的是,`$p.__proto__`肯定是被修改过的,而不仅仅是`Array.prototype`,否则不会有`addClass`功能。 <br> ## 如何做到的 源码中如何做的,我们接下来会有详细的描述,不过我们这里可以使用自己的代码简单模拟一下。其实非常简单: ```js var arr = [1,2,3]; arr.__proto__ = { addClass: function () { console.log('this is addClass'); }, concat: Array.prototype.concat, push: Array.prototype.push }; arr.push(4); arr.addClass(); ``` ![](https://box.kancloud.cn/2016-07-04_577a764d79a55.png) *PS:其实源码在实现这个设计的时候,并不像上面代码那么简单,只不过原理是一样的。源码具体的实现方式,还得边解读边了解。* <br> ## 验证 以上自己手写了几行代码,就简单模拟了一个zepto的设计结构,那么是不是和zepto一样呢?我们这里简单验证一下。 ``` var $p = $('p'); // 使用 constructor 验证 arr.__proto__.constructor === $p.__proto__.constructor; // true // 使用 instanceof 验证 console.log( $p instanceof Array ); // false console.log(arr instanceof Array ); // false ``` <br> ## 总结 如果你仅仅是想了解一下zepto的原理,以上这些内容基本够用了,至少你在公司拿它做个一小时的技术分享是完全没有问题的。 不过,你如果感觉看到这里就收获颇丰,那么我建议你继续跟着我往下看,你会收获更多更实用价值的东西!