通过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 相关文章推荐
jQuery获取动态生成的元素示例
Jun 15 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
javascript实现扫雷简易版
Aug 18 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
轻松修复Discuz!数据库
2008/05/03 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
详解Vuex中mapState的具体用法
2017/09/28 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python xml解析实例详解
2016/11/14 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Python PIL库图片灰化处理
2020/04/07 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
你常见到的runtime exception
2016/09/05 面试题
什么是Assembly(程序集)
2014/09/14 面试题
手机被没收的检讨书
2014/10/04 职场文书
人与自然观后感
2015/06/16 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
python简单验证码识别的实现过程
2021/06/20 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL