车大棒浅谈jQuery源码（二）

前言

本来只是一个自己学习jQuery笔记的简单分享，没想到获得这么多人赏识。我自己也是傻呵呵的一脸迷茫，感觉到受宠若惊。

不过还是有人向批判我的文章说，这是基本知识点，完全跟jQuery源码沾不上边。说jQuery博大精深，还要我静下心来研究, 别净整些没用的。弄的我一脸懵逼，WTF？我从头到尾都没有说我讲的多高端，我连标题都写的“浅谈”。就完全不能让我等菜鸟慢慢先从的简单的入手吗？

但是有位名为“萌新”三好童鞋，就做的非常好。“啪”！，反手就是一拖鞋留言砸过来一串代码。指出说undefined在ES5、ES6标准中只是全局作用域下不能被定义，一旦脱离全局作用域下undefined就能够被定义。

所以希望能够像能够像萌新同学狠狠打脸找知识点错误，而不是指出我这个太简单一类的。这个我本来就是个人学习过程的浅谈一下，给菜鸟一点活路吗！

原型prototype

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
--《高级程序第三版》-6.23 原型模式

这里我引用了高级程序第三版当中的一段话用来简单描述原型prototype，但是这个玩意具体有什么用？
解释何为原型之前, 先看下的代码：

//创建一个构造函数 function Person() { this.sayHello = function() { console.log('Hello，I am one Dog') } } //创建两个对象 var dog1 = new Person(), dog2 = new Person(); //两个实例对象进行比较 dog1.sayHello(); dog2.sayHello(); console.log("dog1.sayHello === dog2.sayHello的结果是：" + (dog1.sayHello === dog2.sayHello));

控制台输出结果：

这里dog1，dog2都是构造函数Person的实例，但是两个人的sayHello方法并不完全相等。也就是说dog1和dog2分别在自己所属空间开辟了一块内存。

夭寿啦！单身狗为何不报团取暖，不是说好一起相亲相爱吗！不是说好一起共享种子，一起开黑吗？月黑风高秋名山一起开车吗！

所以为了避免原本每天遭受狗粮侵蚀单身汪继续团结一致，这个时候原型prototype就起到很好的稳定dog群内团结的作用。

//创建一个构造函数 function Person(){}; Person.prototype.sayHello = function(){ console.log("Hello, I am one Dog") } //创建两个对象 var dog1 = new Person(), dog2 = new Person(); //两个实例对象进行比较 dog1.sayHello(); dog2.sayHello(); console.log("dog1.sayHello === dog2.sayHello的结果是："+ (dog1.sayHello === dog2.sayHello));

控制台输出结果：

说明此时两名单身狗又团结一致，资源共享sayHello方法。而不是每个私自建立一个空间，去存放sayHello方法。

当实例对象需要寻找sayHello方法的时候，就会先去构造函数Person函数当中寻找sayHello方法，然后Person函数方法当中没有找到，就会去Person的原型当中去找sayHello方法。（同理在JavaScript当中，如果创建多个对象，但是却只共享一个方法。减少了内存的使用，能够优化性能不少。）

而jQuery里面也充斥不少原型prototype，所以看下面jQuery代码，就会知道相应查找顺序了，同样也能更好的理解后面的代码。

jQuery无new构造

之前第一章，我们有讲过jquery通过如下代码来暴露接口：

window.jquery = window.$ = jQuery

举个栗子：

$("#box") = jQuery("#box")

那么jQuery这个函数开始执行，此时让我们打开jQuery源码，看看jQuery内部是如何实现的。

(function(window, undefined) { var // ... jQuery = function(selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); }, jQuery.fn = jQuery.prototype = { init: function(selector, context, rootjQuery) { // ... } } jQuery.fn.init.prototype = jQuery.fn; })(window);

估计有童鞋 jQuery.fn.init.prototype = jQuery.fn 这一句都会被卡主，满脸黑人问号。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要，分别解析一下：

（来自灵魂抽象派画师-车大棒）

1、首先要明确，使用 $(‘xxx’) 这种实例化方式，其内部调用的是return new jQuery.fn.init(selector, context, rootjQuery) 这一句话，也就是构造实例是交给了 jQuery.fn.init() 方法取完成。