通过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 相关文章推荐
javascript强大的日期函数代码分享
Sep 04 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
详解Javascript实践中的命令模式
May 05 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
谈一谈收音机的高放电路
2021/03/02 无线电
php 静态化实现代码
2009/03/20 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
python中hashlib模块用法示例
2017/10/30 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
2014端午节活动策划方案
2014/01/27 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Python如何将list中的string转换为int
2022/07/15 Ruby