原型、原型应用、及其拓展性

原型的简单介绍

任何对象中都有__proto__属性，其指向某个构造函数的prototype对象。
构造函数的prototype属性，也是对象，因此他也有__proto__属性
而我们知道，实例对象的__proto__指向的是其构造函数的 prototype对象。
那么，我们是不是可以推出--->prototype对象因为有__proto__属性，所以，他也是一个实例对象，其__proto__属性的指向为某个构造函数的prototype对象。
同样某个构造函数的prototype对象也有__proto__属性，他也有指向的prototype对象，因此就会形成一条原型链！

原型的简单使用

在jquery中，我们获取不同的dom元素，但他们都有相同的jquery方法(如css(),html(), hide()等)，这些方法就是在原型上的。

    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size', '40px') //css是原型方法
        alert($p.html())  //html是原型方法

        var $div1 = $('#div1')
        $div1.css('color', 'blue')  //css是原型方法
        alert($div1.html()) //html是原型方法
    </script>

zepto 如何使用原型

(function (window) {
	//空对象
    var zepto = {}
	//4 构造函数
    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

	//3
    zepto.Z = function (dom, selector) {
        return new Z(dom, selector) //注意： 出现了new关键字 说明有构造函数 或 Class
    }

	// 2
    zepto.init = function (selector) {
    	// 实际源码中比这里要复杂 此处简化
    	
        // querySelectorAll 得到的是一个类数组
        // 通过 slice 方法把它变成一个数组dom方便使用
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }
    
	// 1  $ 就是zepto使用时的$
    var $ = function (selector) {
  	  return zepto.init(selector) 
    }
    window.$ = $

    $.fn = {
    	constructor: zepto.Z,
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return '这是一个模拟的 html 函数'
        }
    }
    
    // Z.prototype 也就是Z的原型设置为$.fn，那么Z的所有实例就都可以使用$.fn中的方法了。
    zepto.Z.prototype = Z.prototype = $.fn
})(window)

zepto.Z.prototype = Z.prototype = $.fn

jquery 如何使用原型

(function (window) {

 	// 2
    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)//注意： 出现了new关键字 说明有构造函数 或 Class
    }

	//初始化 jQuery.fn
 	// 4
    jQuery.fn = jQuery.prototype = {
    	constructor: jQuery,
    	//其他函数
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return 'html'
        }
    }

 	// 3
	//定义构造函数
    var init = jQuery.fn.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

	//定义原型
    init.prototype = jQuery.fn
 	// 1
    window.$ = jQuery

})(window)

$.fn.getNodeName = function() {
	return this[0].nodeName
}

// my-zepto.js
Z.prototype = $.fn
// my-jquery.js
init.prototype = jQuery.fn;

// 插件机制其实就是扩展其原型对象，这样所有的实例就都有了插件的特性了
$.fn.getNodeName = function() {
    // 这里的this[0]，是因为在之前的构造函数中，遍历了获取的dom元素，并将 this[i] = dom[i]
    // 所以this[0]就是符合选择器的第一个元素 
    return this[0].nodeName;
}

在给构造函数(Z/init)的原型赋值的时候，本可以直接赋值对象，但却专门给这个对象命名了($.fn/jQuery.fn)。这样的好处是什么？好处

1、只有$ 会暴露在window全局变量
2、 体现原型的扩展性： 插件机制  将插件扩展统一到$.fun.xxx这一个接口，方便使用