通过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 相关文章推荐
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
JS验证码实现代码
Sep 14 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
js实现简单的随机点名器
Sep 17 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php搜索文件程序分享
2015/10/30 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
微信支付开发告警通知实例
2016/07/12 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Json解析的方法小结
2016/06/22 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Python判断telnet通不通的实例
2019/01/26 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
pandas的qcut()方法详解
2019/07/06 Python
pytorch打印网络结构的实例
2019/08/19 Python
python检测服务器端口代码实例
2019/08/31 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
中软Java笔试题
2012/11/11 面试题
数据库方面面试题
2012/04/22 面试题
英语生日邀请函
2014/01/23 职场文书
周年庆典主持词
2014/04/02 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
财务部岗位职责
2015/02/03 职场文书