原型和原型链（jquery为例子）

首先，我们先看下jQuery是怎么用的，如下:

let a = $('p');
a.css('color', 'red');
a.html();
a.value();

简单实现zepto原型：

var zepto = {};

zepto.init = function (selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelectorAll(selector));
    return zepto.Z(dom, selector);
}

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

//构造函数
zepto.Z = function (dom, selector) {
    return new z(dom, selector);
}

var $ = function (selector) {
    return zepto.init(selector);
}

$.fn = {
    css: function (key, val) {

    },
    html: function (val) {

    },
    value: function (val) {

    }
}

//给z的原型赋值$.fn，这样zepto就有了CSS方法
z.prototype = $.fn;

简单实现jquery原型

var jquery = function (selector) {
    return new jquery.fn.init(selector)
}

jquery.fn = {
    css: function (key, val) {
        
    },
    html: function (val) {
        
    },
    value: function (val) {
        
    }
}

var init = jquery.fn.init = function (selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelectorAll(selector));
    var i, length = dom ? dom.length : 0
    for (i = 0; i < length; i++) {
        this[i] = dom[i];
    }
    this.length = length;
    this.selector = selector || '';
}

//给z的原型赋值$.fn，这样jquery就有了CSS方法
init.prototype = jquery.fn

var $ = jquery;

/*扩展插件如下,为什么要把对象放在jquery.fn中，
因为jquery为了防止全局变量污染，只有jquery变量会暴露出来，
不可能会把init暴露出来，所以不能init.prototype.getValue
这样去添加方法，而且把可以让代码更统一*/

jquery.fn.getValue = function () {
    
}

来源：CSDN

作者：黄哈哈小妹

链接：https://blog.csdn.net/u012902406/article/details/103800004

标签

jquery

dom

var

zepto

dom对象