javascript - zepto源码中关于`zepto.Z.prototype = $.fn`的问题
本文介绍了javascript - zepto源码中关于`zepto.Z.prototype = $.fn`的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
最近阅读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
到底是用来干嘛的?
谢谢!
解决方案
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
这篇关于javascript - zepto源码中关于`zepto.Z.prototype = $.fn`的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文