读jQuery源码之二(初始化和原型)

代码片段92-175行,定义了jQuery的原型(prototype)对象

1.首先清楚的jQuery初始化的方式,不是直接new jQuery(),而是直接使用jQuery(),为什么要这样做以及为什么可以这样做?

在jQuery的构造函数里面返回另一个构造函数的实例,可以简化使用,直接使用jQuery(),而不用加上new关键字。下面分析为什么能够这样做,jQuery是怎样实现的。我写了一个简单的例子,代码如下:

着色的几行代码非常关键,上面代码展示了为什么jQuery里面可以不用new而是直接使用jQuery()的方式。

在rQuery的构造函数里面返回return new rQuery.fn.init()的实例,下面使用的时候rQuery(‘div1’)这时返回按理说是init的实例,但是为什么能够调用rQuery原型上的html方法。原因就在于init的原型指向了rQuery的原型(见倒数第二行代码)。这是关键所在。至于原型是什么,下面接着说。之前不少人对javascript是否是面向对象语言有些争议,我到觉得没啥争议,javascript就是面向对象型的语言(封装,继承,多态,都可以展现)

2.javascript原型(prototype)是什么?

ECMAScript2015上面是这么解释prototype的:点击这里

一句话来讲:object that provides shared properties for other objects(通俗点讲,对象与对象之间共享属性用的)

我觉得这也是javascript能够实现继承的主要方式。Object是javascript的根对象,所有的对象都是继承Object,继承了Object.prototype里面的所有方法和属性。

当然可以重写prototype里面的属性和方法

这段代码里面有两点需要注意:call,和Object.create方法,call是调用函数传递this指向,Object.create使用对象的原型创建一个Object,作为其它对象的原型。创建出来的对象是一个新的对象。例如,Employee的原型修改不会影响Person的原型,如果这里换成Employee.prototype=Person.prototype则大家都知道的,相互影响。

通过上面的例子,对prototype多了一些认识。再继续看jQuery源码:jQuery里面重新定义了原型对象,而且jQuery对象的绝大部分属性都继承自jQuery原型,不必担心jQuery对象占据太多内存。

待续。。。

作者:张雪飞
出处:https://zhangxuefei.site/p/36
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注