javascript面向对象的写法及jQuery面向对象的写法
文章由来:jQuery源码学习时的总结
在JS中,一般的面向对象的写法如下:
function Cao(){}//定义一个构造函数
Cao.prototype.init = function(){}//原型上添加初始化方法
Cao.prototype.other = function(){}//可执行的其他实际方法
var c1 = new Cao();//实例化对象
c1.init();//初始化
c1.css();//操作函数
定义一个对象Cao,实例化c1,c1.init()初始化,c1.other()调用其他可用方法,这样的做法比较麻烦,每次调用都需要实例化c1,然后初始化c1.init(),最后才可以调用其他方法。
jQuery的做法是:
function jQuery(){return new jQuery.prototype.init();}
jQuery.prototype.init = function(){}
jQuery.prototype.other = function(){}
jQuery.prototype.init.prototype = jQuery.prototype;//这句话可以先忽略,下面会讲
jQuery().other();
只有一行
jQuery().other();
代码就完成了所有工作,为什么?
分析下:
调用jQuery(),实际上完成了实例化和初始化的过程,因为jQuery()返回jQuery.prototype.init()的初始化对象。
jQuery->jQuery.prototype
jQuery->jQuery.prototype->jQuery.prototype.init
像上面的关系那样,返回的 new jQuery.prototype.init(),在jQuery的原型上,jQuery.prototype.init()上根本没有other()方法,如何让jQuery.prototype.init()也能操作other()呢?
所以就有了这样一句话:
jQuery.prototype.init.prototype = jQuery.prototype;
这句话是把jQuery原型的引用赋值给jQuery.prototype.init原型,像下面所示:
jQuery->jQuery.prototype
jQuery->jQuery.prototype->jQuery.prototype.init->jQuery.prototype.init.prototype->jQuery.prototype
这样在jQuery.prototype.init的原型上就有了jQuery原型的引用。
那jQuery()返回的jQuery.prototype.init(),实际上就包含了jQuery对象上的所有内容,所以jQuery().other();就是直接操作jQuery对象上的other()。
修改jQuery原型就是在修改初始化init对象的原型。
jQuery源码中实际的写法:
#61-#64行:
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
jQuery.fn.init是什么鬼呢?
在#96有这么一句话:
jQuery.fn = jQuery.prototype = {...}
说明jQuery.fn就是jQuery.prototype,即jQuery原型。
在#283:
jQuery.fn.init.prototype = jQuery.fn;
就是jQuery.prototype.init.prototype = jQuery.prototype;
javascript面向对象的写法及jQuery面向对象的写法的更多相关文章
- 【javascript类库】zepto和jquery的md5加密插件
[javascript类库]zepto和jquery的md5加密插件 相信很多人对jQuery并不陌生,这款封装良好的插件被很多开发者使用. zepto可以说是jQuery在移动端的替代产品,它比jQ ...
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- JavaScript(第十四天)【面向对象和原型】
学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建 ...
- 3、jQuery面向对象
1.首先介绍callback.js对ajax进行了封装 function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safar ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法
也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...
- js和jquery 两种写法 鼠标经过图片切换背景效果
这个是javascript的写法 <img src="res/img/shop-c_32.jpg" alt="" onmouseover="th ...
- [.net 面向对象编程基础] (2) 关于面向对象编程
[.net 面向对象编程基础] (2) 关于面向对象编程 首先是,面向对象编程英文 Object-Oriented Programming 简称 OOP 通俗来说,就是 针对对象编程的意思 那么问 ...
随机推荐
- 201521123054《Java程序设计》第8周学习总结
1. 本周学习总结 2. 书面作业 List中指定元素的删除(题目4-1) 1.1 实验总结 每次删除时下标需要-1:原理如图 统计文字中的单词数量并按出现次数排序(题目5-3) 2.1 伪代码(简单 ...
- 201521123072《Java程序设计》第6周学习总结
201521123072<Java程序设计>第6周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画 ...
- 201521123015 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...
- 201521123070 《JAVA程序设计》第4周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. http://naotu.baidu.com/file/4de6f42e4f4f6cce0531dd9997b04e60?token ...
- Android事件机制
一句话描述: 用户和程序之间的互动机制 什么是事件? 用户和程序交互时触发的程序操作. 只要是事件,必须具备三方面: 1 事件的发生者 2 事件接受者 3 事件触发和传递 事件处理的方法 观察者模式: ...
- 201521123099 《Java程序设计》 第10周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? final ...
- mount挂载和交换分区swap
目录 mount挂载 挂载方法 选项 查看设备 卸载命令 文件挂载配置文件fstab 交换文件与分区 swap优先级 三个工具free,df,du 扩展 移动介质 使用光盘 挂载USB设备 mount ...
- POJ-2299 Ultra-QuickSort (树状数组,离散化,C++)
Problem Description In this problem, you have to analyze a particular sorting algorithm. The algorit ...
- 支持语音识别、自然语言理解的微信小程序(“遥知之”智能小秘)完整源码分享
记录自己搭建https的silk录音文件语音识别服务的调用过程,所有代码可在文中找链接打包下载 >>>>>>>>>>>>> ...
- [python学习笔记] py2exe 打包
遇坑 之前经过折腾,pyinstaller打包文件可以在别的windows7上运行.但是,mfk, 客户说是xp系统.崩溃 使用pyinstaller各种折腾,打包出来的依然是不是有效的win32程序 ...