javascript - zepto源码中关于`zepto.Z.prototype = $.fn`的问题
天蓬老师
天蓬老师 2017-04-11 11:11:36
[JavaScript讨论组]

最近阅读zepto(版本v1.1.6)源码的过程中,有个地方没有想明白。首先看到第155行:

zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = $.fn
    dom.selector = selector || ''
    return dom
  }

其中dom.__proto__ = $.fn是把dom array指向$.fn,使得这个dom array能够使用$.fn的所有方法,这个可以理解,没有问题。但是在第874行中,有一句这样的代码:

zepto.Z.prototype = $.fn

我的理解是,这一句话让zepto.Z继承自$.fn,但是上文的dom.__proto__ = $.fn已经实现了让“这个dom array能够使用$.fn的所有方法”的功能了,为什么还要加这一句话呢?

后来我自己参照写了个demo,代码如下:

var Otpez = (function () {
    var $,
        otpez = {}
    
    otpez.Z = function (dom, selector) {
        dom = dom || []
        dom.__proto__ = $.fn
        dom.selector = selector || ''
        return dom
    }

    otpez.init = function (selector, context) {
        var dom
        return otpez.Z(dom, selector)
    }

    $ = function(selector, context) {
        return new otpez.init(selector, context)
    }

    $.fn = {
        sayHello: function () {
            console.log('Hello otpez!')
            return this
        }
    }

    $.otpez = otpez

    return $
})()

Otpez().sayHello()

这里面并没有otpez.Z.prototype = $.fn,能够正确输出Hello otpez!

所以希望能够得到大神的解答,zepto源码中的zepto.Z.prototype = $.fn到底是用来干嘛的?
谢谢!

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(2)
PHPz
var F = function(){}

var f = new F()

f.__proto__ === F.prototype   //true

这点你理解吧,一个类的实例的 __proto__ 与该类 prototype 一致。

zepto 也是基于这一点,dom 实例的 __proto__ 与 zepto.Z 的 prototype 一致,等于说 $ 最终返回的其实都是 zepto.Z 的实例。

虽然 zepto.Z 定义的早,可没有调用前,zepto.Z.prototype = $.fn 已经先执行了。

$('body').__proto__ === $.zepto.Z.prototype     //true
Otpez().__proto__ === Otpez.otpez.Z.prototype   //false
PHP中文网

其实加这一句主要是为了判断这个是否是 Z 的是一个实例,但是总感觉这样做不好,__proto__ 虽然标准里有,但是没说一定要叫这个名字,所以兼容性可能不好,尤其是IE(虽然Zepto可能用在手机端比较多)。
另一个解决方式就是(当然也是有问题的,也不太好阅读):

otpez.Z = function (dom, selector) {
        dom = dom || [];
        dom.selector = selector || "";
        if(dom instanceof otpez.Z) {
            return dom;
        }
        if(!(this instanceof otpez.Z)) {
            return new (otpez.Z)(dom,selector);
        }
        $.extend(this,dom);
    }

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号