读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

背景:

有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期。

所以,网上寻找高手的源码分析。再经过自己思考,整理,验证。以求有所收获。

此篇为读高手艾伦《jQuery 2.0.3 源码分析core - 整体架构》后所作,万分感谢作者。

材料:

1.原文地址

2.jquery版本: jquery2.0.3(我用的是jquery1.8.3,好像出入不大)

困惑一:

读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一   读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

图一                                                                                                     图二

如图一所示,作者举例为无new创建jquery实例的一种方法,但是以“这样的情况下就出错了,因为this只是指向aQuery类的,所以需要设计出独立的作用域才行”

的理由否定了。意思是,该方法可以无new创建jquery,只是作用域的问题。

再来看图二,这是作者和jquery实际采用的一种方法。比较图一,这里采用

return new jQuery.prototype.init( selector, context, rootjQuery );
多了一个new.这里作者的解释是“很明显通过实例init函数,每次都构建新的init实例对象,来分隔this,避免交互混淆”  。对于高手可能明白了,但我看了是一头雾水。
 
多了一个new就能产生独立作用域?init实例对象是什么?看例子。
 
 
        var aQuery = function(selector, context) {
return aQuery.prototype.init();//不加new,this就是指向aQuery的原型prototype,aQuery()得到的就是aQuery.prototype
}
aQuery.prototype = {
init: function() {
this.age = 18;
return this;
},
name: function() {},
age: 20
} console.log(aQuery().age); //18
console.log(aQuery.prototype.age); //18

这里没有new,看到aQuery.prototype.age的值为18,说明this.age改变了原来的值(20).证明this就是指向aQuery的原型prototype,aQuery()得到的就是

aQuery.prototype。这里很明显,污染了aQuery的原型,没有达到作者的期望。(为什么不能污染,暂时还没弄明白)

var aQuery = function(selector, context) {
return new aQuery.prototype.init(selector);//加new,此时this指向的应该是aQuery.prototype.init的实例, aQuery()得到的结果是aQuery.prototype.init的实例,所以此时通过这个结果访问不到aQuery.prototype的属性
}
aQuery.prototype = {
init: function(selector) {
this.age = 18;//这里的设置的是aQuery.prototype.init的属性
return this;
},
name: function() {
return this.age
},
age: 20
} aQuery.prototype.init.prototype = aQuery.prototype;//将aQuery.prototype.init的原型设置为aQuery的原型 console.log(aQuery().age) //18,注意在初始化的时候设置了this.age = 18;所以显示的是18
console.log(aQuery.prototype.age);//20 这里获取的是aQuery原型的值,没有改变,还是20

这里使用了new,this指向的应该是aQuery.prototype.init的实例,构建新的init实例对象。在init里的this操作,设置的是aQuery.prototype.init的属性和方法。

所以aQuery().age的值为18。更重要的是aQuery原型的值并没有改变。aQuery.prototype.age=20,即实现了独立作用域,不会污染到aQuery的原型。

谨以此文给自己解惑。

 
 
 
 
 
 
上一篇:jquery 源码学习(四)构造jQuery对象-工具函数


下一篇:python文件和目录操作方法大全