jQuery的无new构建
jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作、
回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法:
var test = new $('#test');
test.text('Test');
大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式,直接 $('')
进行构造,这也是 jQuery 十分便捷的一个地方。
当我们使用第一种无 new 构造方式的时候,其本质就是相当于 new jQuery()
,那么在 jQuery 内部是如何实现的呢?看看:
没看懂?没关系,我们一步一步分析。
函数表达式和函数声明
在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier
)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符:
所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?
ECMAScript是通过上下文来区分的,如果function foo(){}
是作为赋值表达式的一部分的话,那它就是一个函数表达式,
如果function foo(){}
被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。
还有一种函数表达式不太常见,就是被括号括住的(function foo(){})
,他是表达式的原因是因为括号 ()是一个分组操作符,它的内部只能包含表达式
再来看jQuery源码:
可以将上面的代码结构分成两部分:(function(){window,undefined})
和 (window),
第1个()是一个表达式,而这个表达式本身是一个匿名函数,
所以在这个表达式后面加(window)就表示执行这个匿名函数并传入参数window。
原型 prototype
认识一下什么是原型?
在JavaScript中,
原型也是一个对象,通过原型可以实现对象的属性继承
,JavaScript的对象中都包含了一个" [[Prototype]]"
内部属性,这个属性所对应的就是该对象的原型。
对于"prototype"和"__proto__"这两个属性有的时候可能会弄混,"Person.prototype"和"Person.__proto__"是完全不同的。
在这里对"prototype"和"__proto__"进行简单的介绍:
1.对于所有的对象,都有__proto__属性,这个属性对应该对象的原型
2.对于函数对象,除了__proto__属性之外,还有prototype属性,
当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的__proto__属性)
闭包
闭包的定义:
当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。
闭包的作用:
在了解闭包的作用之前,我们先了解一下 javascript中的GC机制:
在javascript中,
如果一个对象不再被引用,那么这个对象就会被GC回收,否则这个对象一直会保存在内存中。
在上述例子中,B定义在A中,因此B依赖于A,而外部变量 c 又引用了B,所以A间接的被 c 引用,
也就是说,A不会被GC回收,会一直保存在内存中。为了证明我们的推理,看如下例子:
count是A中的一个变量,它的值在B中被改变,函数B每执行一次,count的值就在原来的基础上累加1。因此,A中的count一直保存在内存中。
这就是闭包的作用,有时候我们需要一个模块中定义这样一个变量:
希望这个变量一直保存在内存中但又不会“污染”全局的变量
,这个时候,我们就可以用闭包来定义这个模块在看jQuery源码:
我们知道了 什么是闭包:当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。
jQuery.fn的init 函数被jQuery 的构造函数调用了,这里形成了一个闭包。 构造函数及调用代码:
问题关键来了。
如何实现无new构建
JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概念
这是常规的使用方法,显而易见jQuery不是这样玩的
要实现这样,那么jQuery就要看成一个类,那么$()应该是返回类的实例才对
按照jQuery的抒写方式
要实现这样,那么jQuery就要看成一个类,那么$()应该是返回类的实例才对
所以把代码改一下:
通过new aQuery(),
虽然返回的是一个实例,但是也能看出很明显的问题,
死循环了
!那么如何返回一个正确的实例?
在javascript中实例this只跟原型有关系
那么可以把jQuery类当作一个工厂方法来创建实例,把这个方法放到aQuery.prototye原型中
当执行aQuery()
返回的实例:
很明显aQuery()
返回的是aQuery
类的实例,那么在init中的this其实也是指向的aQuery
类的实例
问题来了init的this指向的是aQuery
类,如果把init函数也当作一个构造器,那么内部的this要如何处理?
因为this只是指向aQuery
类的,所以aQuery
的age
属性是可以被修改的。
这样看似没有问题,其实问题很大的
为什么是new jQuery.fn.init?
看如下代码:
当我调用 传入"a"的时候,修改age=18,及aQuery("a").age 的值为18
但是当我 传入"b"的时候 并没又修改 age的值,
我也希望得到默认age的值20
,但是aQuery("b").age 的值为18.因为在 调用aQuery("a").age 的时候age被修改了。
这样的情况下就出错了,所以需要设计出独立的作用域才行。
jQuery框架分隔作用域的处理
很明显通过实例init
函数,每次都构建新的init
实例对象,来分隔this
,避免交互混淆
又出现一个新的问题,
age :undefined,
name() :
抛出错误,无法找到这个方法,所以很明显new的init
跟jquery类的this
分离了
怎么访问jQuery类原型上的属性与方法?
做到既能隔离作用域还能使用jQuery原型对象的作用域呢,还能在返回实例中访问jQuery的原型对象?
实现的关键点
我们再改一下:
aQuery("b").age //20
aQuery("a").name() //20
最后在看一下jQuery源码:
是不是明白了?
哈哈哈~~~
在简单说两句:
大部分人初看 jQuery.fn.init.prototype = jQuery.fn
这一句都会被卡主,很是不解。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要,分点解析一下:
1)首先要明确,使用 $('xxx')
这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector,rootjQuery)
这一句话,也就是构造实例是交给了 jQuery.fn.init()
方法取完成。
2)将 jQuery.fn.init
的 prototype 属性设置为 jQuery.fn
,那么使用 new jQuery.fn.init()
生成的对象的原型对象就是 jQuery.fn
,所以挂载到 jQuery.fn
上面的函数就相当于挂载到 jQuery.fn.init()
生成的 jQuery 对象上,所有使用 new jQuery.fn.init()
生成的对象也能够访问到 jQuery.fn
上的所有原型方法。
3)也就是实例化方法存在这么一个关系链
1.jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;
2.new jQuery.fn.init() 相当于 new jQuery() ;
3.jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以这 2 者是相当的,所以我们可以无 new 实例化 jQuery 对象。