通过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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
vue移动端使用canvas签名的实现
Jan 15 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新闻发布系统教程
2014/05/09 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
react基本安装与测试示例
2020/04/27 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Django 重写用户模型的实现
2019/07/29 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python常用数据重复项处理方法
2019/11/22 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
研究生求职自荐书
2014/06/23 职场文书
协议书范文
2015/01/27 职场文书
绿里奇迹观后感
2015/06/15 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB