jquery源码学习笔记（一）jQuery的无new构建，jquery学习笔记

本人是一名.net程序员.....

你一个.net coder 看什么jQuery 源码啊？

原因吗，很简单。技多不压身吗(麻蛋，前端工作好高...羡慕)。

我一直都很喜欢JavaScript，废话不多说了，直接切入正题。

最近看了好几篇jQuery 源码的文章，对于jQuery的无new构建  很是不解.

查了很多资料，总算是搞明白了。

jQuery的无new构建

jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作、

回想一下使用 jQuery 的时候，实例化一个 jQuery 对象的方法：

// 无 new 构造 $('#test').text('Test'); test = new $('#test'); test.text('Test');

大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式，直接 $('') 进行构造，这也是 jQuery 十分便捷的一个地方。

当我们使用第一种无 new 构造方式的时候，其本质就是相当于 new jQuery()，那么在 jQuery 内部是如何实现的呢？看看：

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

 

 没看懂？没关系，我们一步一步分析。

函数表达式和函数声明

在ECMAScript中，创建函数的最常用的两个方法是函数表达式和函数声明，两者期间的区别是有点晕，因为ECMA规范只明确了一点：函数声明必须带有标示符（Identifier）（就是大家常说的函数名称），而函数表达式则可以省略这个标示符：

　

　 //函数声明: 　　function 函数名称 (参数：可选){ 函数体 } 　　//函数表达式： 　　function 函数名称（可选）(参数：可选){ 函数体 }

 

所以，可以看出，如果不声明函数名称，它肯定是表达式，可如果声明了函数名称的话，如何判断是函数声明还是函数表达式呢？

ECMAScript是通过上下文来区分的，如果function foo(){}是作为赋值表达式的一部分的话，那它就是一个函数表达式，

如果function foo(){}被包含在一个函数体内，或者位于程序的最顶部的话，那它就是一个函数声明。

bar = bar(){}; // 表达式，因为它是new表达式 (function(){ function bar(){} // 声明，因为它是函数体的一部分 })();

 

还有一种函数表达式不太常见，就是被括号括住的(function foo(){})，他是表达式的原因是因为括号 ()是一个分组操作符，它的内部只能包含表达式

 再来看jQuery源码：

(function(window, undefined) { /... })(window)

 

 可以将上面的代码结构分成两部分：(function(){window, undefined}) 和 (window) ,

第1个()是一个表达式，而这个表达式本身是一个匿名函数，

所以在这个表达式后面加(window)就表示执行这个匿名函数并传入参数window。

 

原型 prototype

认识一下什么是原型？

在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个" [[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。

对于"prototype"和"__proto__"这两个属性有的时候可能会弄混，"Person.prototype"和"Person.__proto__"是完全不同的。

在这里对"prototype"和"__proto__"进行简单的介绍：

对于所有的对象，都有__proto__属性，这个属性对应该对象的原型

对于函数对象，除了__proto__属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的__proto__属性）

function Person(name, age){ this.name = name; this.age = age; } Person.prototype.getInfo = function(){ console.log(this.name + " is " + this.age + " years old"); }; will = new Person("Will", 28); will.getInfo();//"Will is 28 years old"

 

 

 

闭包

闭包的定义：

当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。

闭包的作用：

在了解闭包的作用之前，我们先了解一下 javascript中的GC机制:

在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收，否则这个对象一直会保存在内存中。

在上述例子中，B定义在A中，因此B依赖于A,而外部变量 c 又引用了B, 所以A间接的被 c 引用，

也就是说，A不会被GC回收，会一直保存在内存中。为了证明我们的推理，看如下例子：

function A(){ var count = 0; function B(){ count ++; console.log(count); } return B; } var c = A(); c();// 1 c();// 2 c();// 3

count是A中的一个变量，它的值在B中被改变，函数B每执行一次，count的值就在原来的基础上累加1。因此，A中的count一直保存在内存中。

这就是闭包的作用，有时候我们需要一个模块中定义这样一个变量：希望这个变量一直保存在内存中但又不会“污染”全局的变量，这个时候，我们就可以用闭包来定义这个模块