## 回顾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();
```
*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的原理，以上这些内容基本够用了，至少你在公司拿它做个一小时的技术分享是完全没有问题的。
不过，你如果感觉看到这里就收获颇丰，那么我建议你继续跟着我往下看，你会收获更多更实用价值的东西！
