jQuery源码解析--对象创建

本系列博客是我在学习了慕课网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;