本文约定：
-
文章中的jQuery指的是jQuery框架中的jQuery函数(构造器)
-
文章中的jQ指的是jQuery框架
为了防止混淆，方便阅读，故在此说明一下！
1.jQuery构造器的实现
jQuery构造器也就是jQuery函数，也是平时我们使用jQ时经常用到的美元符号$
在jQ源码的最后面有：
//这就是jQ暴露出来的接口
window.jQuery = window.$ = jQuery;
```
那么我们再来看看在jQ中jQuery函数是如何实现的：
```javascript
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
//在后面，又发现了这么一句
jQuery.fn = jQuery.prototype;
```
看完上面代码，可以知道我们无论传一个什么参数给jQuery函数，它都会返回一个**jQuery.prototype.init**的实例对象。也就是说，我们平时用的jQuery对象，其实并不是jQuery构造器创建出来的，而是**jQuery函数原型中的init函数(构造器)**创建出来的！
## 2.jQuery为什么使用jQuery.prototype.init作为构造器
**我们再来看看有关init函数的源码**
```javascript
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function () {
//实例化代码
}
//后面原型方法省略，不是本文所探究
}
//修改init的原型对象为jQuery函数的原型
jQuery.fn.init.prototype = jQuery.fn;
```
**先将上面代码，转化成我们习惯阅度的如下代码：**
```javascript
jQuery = function( selector, context ) {
return new jQuery.prototype.init( selector, context );
}
jQuery.prototype = {
constructor: jQuery,
init: function () {
//实例化代码
}
}
//修改init的原型对象为jQuery函数的原型
jQuery.prototype.init.prototype = jQuery.prototype;
```
由于将init.prototype=jQuery.prototype，因此init函数(构造器)创建出来的对象，它们的__proto__指针依然会指向jQuery.prototype，因此归根到底它们还是jQuery对象，只不过把，应该写在jQuery函数中的实例代码，写到了init函数中！
因此上面的代码就是：**换了个包装，配方还是原来的！**
**那我们思考一下，为什么jQ作者绕了几个弯把实例化代码写在jQuery.prototype.init里，而不是直接写在jQuery函数里？这么干有什么好处？**
如果想不出来，那我们不妨尝试先把实例化代码写在jQuery函数里！
## 3.把实例化代码写在jQuery函数上
不过在写之前，我们得清楚jQuery有一个很明显的特色是**"强制实例化"**，什么是"强制实例化"？还是说明一下吧，因为这词是我临时想出来的，你百度谷歌也查不出来...
顾名思义，强制实例化就是强行实例化！举个栗子，jQ中无论传什么参数，它最终都会返回一个jQuery对象给你，比如: $("div"),我们传入了一个div字符串，并没有使用new $("div")，却返回了一个jQuery对象给我们。
**那假如我们把jQuery的实例代码写在jQuery函数里，为了实现"强制实例化"，那可以写成如下：**
```javascript
var jQuery = function(selector, context) {
//通过判断是否是jQuery对象，实现"强制实例化"
if(!(this instanceof jQuery)){
return new jQuery(selector, context);
}
//伪实例代码
this.test = selector;
};
var obj = jQuery('obj');
console.log(obj instanceof jQuery); //true
</script>
```
**上面方法实现了"强制实例化",但是又出现了另外一个问题，如果引用不当，就会出现无限递归的情况**
我们把上面的代码稍微修改一下：
```javascript
var jQuery = function(selector, context) {
//比如在此处修改jQuery的原型对象
jQuery.prototype = {};
if(!(this instanceof jQuery)){
return new jQuery(selector, context);
}
this.test = selector;
};
var obj = jQuery('obj');
console.log(obj instanceof jQuery);
```
上面代码将抛出： ***Uncaught RangeError: Maximum call stack size exceeded ***
程序进入了死循环、无限递归；
**同样在jQuery函数里修改jQuery的原型，把实例化代码写到init上**
```javascript
jQuery = function( selector, context ) {
jQuery.prototype = {};
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function ( selector, context ) {
this.test = selector;
}
}
jQuery.fn.init.prototype = jQuery.fn;
var obj = jQuery('obj');
console.log(obj); //{test: "obj"}
```
我们在上面修改jQuery的原型对象后，不仅没有进入无限递归，并且一点不影响obj的实例化，obj的__proto__指针依旧指向原来原型对象，也就是jQuery.fn
在此额外说明一下，可能有些小伙伴会纠结，为什么要把jQuery.prototype = {}写在里面？写在外面就不会出错了！其实这只是我为了试错临时想的例子，用来验证代码的容错性。要知道，一个好的框架，容错性都是很高很高的！当然，这样做的好处不仅仅只有容错性，还有扩展性都很高，就是将init方法和jQuery方法分离成两个独立的构造器，以后静态方法写在jQuery上，实例方法写在init上，这样易于管理。
## 总结
上面的测试证明，这样的代码设计有很多的优点，这里我总结了几条
1. 避免意外条件下，出现无限递归的情况
2. 防止原型被修改
3. 将init方法和jQuery方法分离成两个独立的构造器，这样易于代码的管理，代码扩展性强
网友评论