通过jQuery源码学习javascript(二)


Posted in Javascript onDecember 27, 2012

巧妙1:函数

在javascript代码中函数是个不可多得的人才。

♥ 它可以归置代码段,封装相对独立的功能。

♥ 它也可以实现类,注入OOP思想。

jQuery就是一个函数,你也可以把它当成类(呵呵,本身就是类)。

(function(){ 
var jQuery = function() { 
// 函数体 
} 
window.jQuery = window.$ = jQuery; 
})(); 
console.log(jQuery);

通过jQuery源码学习javascript(二)
上面的空函数就是所谓的构造函数,构造函数在面向对象语言中是类的一个基本方法。

巧妙2:扩展原型

何为原型对象?我给出一篇博文大家可以去了解一下https://3water.com/article/32857.htm。

javascript为所有函数绑定一个prototype属性,由这个属性指向一个原型对象。我们在原型对象中定义类的继承属性和方法等。

原型对象是javascript实现继承的基本机制。

(function(){ 
var jQuery = function() { 
// 函数体 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); (new jQuery()).test();

巧妙3:使用工厂方法来创建一个实例

上面的方法必须使用下面的方法才能进行调用,这样就会产生很多对象,从而浪费内存消耗。

(new jQuery()).test();

jQuery源码使用了很柔和的方法,也是大家比较熟悉的工厂方法,进行调用。

(function(){ 
var jQuery = function() { 
// 函数体 
return jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
init: function() { 
return this; 
}, 
test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); 
jQuery().test();

通过jQuery源码学习javascript(二)

假想1:让jQuery函数体直接返回该对象——我用this
(function(){ 
var jQuery = function() { 
return this; 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); 
console.log(jQuery());

输出结果

通过jQuery源码学习javascript(二)

发现这里的this指向Window对象。


假想2:让jQuery函数体直接返回类的实例。

(function(){ 
var jQuery = function() { 
return new jQuery(); 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); 
console.log(jQuery());

输出结果

通过jQuery源码学习javascript(二)

发现上面是一个递归死循环,出现内存外溢。

巧妙4:分隔作用域

思考1:init()方法返回的this作用域是什么?

(function(){ 
var jQuery = function() { 
// 函数体 
return jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
init: function() { 
this.init_jquery = '2.0'; 
return this; 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); 
console.log(jQuery().jquery); 
console.log(jQuery().init_jquery);

输出结果
通过jQuery源码学习javascript(二)

init()方法中的this作用域:this关键字引用了init()函数作用域所在的对象,同时也能够访问上一级对象jQuery.fn对象的作用。——这种思路会破坏作用域的独立性,对于jQuery框架来说,很可能造成消极影响。

思考2:怎么把init()中的this从jQuery.fn对象中分隔出来?——实例化init初始化类型。

(function(){ 
var jQuery = function() { 
// 函数体 
return new jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
init: function() { 
this.init_jquery = '2.0'; 
return this; 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); 
console.log(jQuery().jquery); 
console.log(jQuery().init_jquery);

输出结果
通过jQuery源码学习javascript(二)
通过实例化init()初始化类型,限定了init()方法里的this,只在init()函数内活动,不让它超出范围。

巧妙5:原型传递

思考1:在巧妙4中,我们把init()中的this从jquery.fn对象中分隔出来。那我们如何能做到保证“巧妙4”的基础上,还能访问jQuery原型对象呢?——原型传递。

让jQuery的原型对象覆盖init()构造器的原型对象。

jQuery.fn.init.prototype = jQuery.fn;

全部代码:
(function(){ 
var jQuery = function() { 
// 函数体 
return new jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 扩展原型对象 
jquery: "1.8.3", 
init: function() { 
this.init_jquery = '2.0'; 
return this; 
} 
} 
jQuery.fn.init.prototype = jQuery.fn; 
window.jQuery = window.$ = jQuery; 
})(); 
console.log(jQuery().jquery); 
console.log(jQuery().init_jquery);

输出结果

通过jQuery源码学习javascript(二)

妙棋

把init()对象的prototype指针指向jQuery.fn。——这样init()里的this继承了jQuery.fn原型对象定义的方法和属性。

总结

感谢博友的留言,尤其是puni ,给我介绍了一本不错的书。如果大家能补充一下,那就再好不过了。

Javascript 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
js 判断一个元素是否在页面中存在
Dec 27 #Javascript
通过jQuery源码学习javascript(一)
Dec 27 #Javascript
Eval and new funciton not the same thing
Dec 27 #Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 #Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 #Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 #Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 #Javascript
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
PHP新手入门学习方法
2011/05/08 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
新年爱情寄语
2014/04/08 职场文书
社区科普工作方案
2014/06/03 职场文书
会计专业自荐信
2014/06/03 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
婚前协议书范本两则
2014/10/16 职场文书
工人先锋号申报材料
2014/12/29 职场文书
内乡县衙导游词
2015/02/05 职场文书
清洁工工作总结
2015/08/11 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
python可视化之颜色映射详解
2021/09/15 Python
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS