jQuery源码解析--对象创建

来源:互联网 发布:通信行业网络优化 编辑:程序博客网 时间:2024/05/06 19:05

本系列博客是我在学习了慕课网Aaron老师的jQuery源码解析课程之后再结合自我的理解做的一系列总结,代码和实际源码可能有点出入,请以源码为准,参考的jQuery版本为2.1.3。

对象的创建

我们创建对象比较常用的方式有:直接用对象直接量、工厂模式、构造函数模式、原型模式。但在一些类库当中,用得最频繁的还是构造函数+原型的模式。

在jquery中,采取的手段是把原型上的一个init方法作为构造器

var $ = jQuery = function(selector) {    return new jQuery.fn.init(selector);};

(补充:

通过new操作符构建一个对象,一般经过四步:

  A.创建一个新对象

  B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象)

  C.执行构造函数中的代码

  D.返回这个新对象

最后一点就说明了,我们只要返回一个新对象即可。其实new操作符主要是把原型链跟实例的this关联起来,这才是最关键的一点,所以我们如果需要原型链就必须要new操作符来进行处理。否则this则变成window对象了。

接下来将jQuery的原型赋值给jQuery.fn

jQuery.fn = jQuery.prototype = {init: function(selector) {// 初始化},constructor: jQuery}

然后

ajQuery.fn.init.prototype = ajQuery.fn;

这段代码就是整个结构设计的最核心的东西了,有这样的一个处理,整个结构就活了!

看看init的的构造图:


通过原型传递解决问题,把jQuery的原型传递给jQuery.prototype.init.prototype。换句话说jQuery的原型对象覆盖了init构造器的原型对象,因为是引用传递所以不需要担心这个循环引用的性能问题。

最后让我们来看一个实例:

var $ = jQuery = function(selector) {    return new jQuery.fn.init(selector);};jQuery.fn = jQuery.prototype = {    name: 'tt',    init: function(selector) {        return this;    },    constructor: jQuery}jQuery.fn.init.prototype = jQuery.fn;document.getElementById('test').innerHTML = '我的名字叫做:' + $().name;


0 0