## 回顧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的原理，以上這些內容基本夠用了，至少你在公司拿它做個一小時的技術分享是完全沒有問題的。
不過，你如果感覺看到這里就收獲頗豐，那么我建議你繼續跟著我往下看，你會收獲更多更實用價值的東西！
