文章由来: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面向对象的写法的更多相关文章

  1. 【javascript类库】zepto和jquery的md5加密插件

    [javascript类库]zepto和jquery的md5加密插件 相信很多人对jQuery并不陌生,这款封装良好的插件被很多开发者使用. zepto可以说是jQuery在移动端的替代产品,它比jQ ...

  2. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

  3. JavaScript(第十四天)【面向对象和原型】

    学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建 ...

  4. 3、jQuery面向对象

    1.首先介绍callback.js对ajax进行了封装 function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safar ...

  5. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法

    也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...

  8. js和jquery 两种写法 鼠标经过图片切换背景效果

    这个是javascript的写法 <img src="res/img/shop-c_32.jpg" alt="" onmouseover="th ...

  9. [.net 面向对象编程基础] (2) 关于面向对象编程

    [.net 面向对象编程基础]  (2)  关于面向对象编程 首先是,面向对象编程英文 Object-Oriented Programming 简称 OOP 通俗来说,就是 针对对象编程的意思 那么问 ...

随机推荐

  1. 201521123005 《java程序设计》 第二周学习总结

    1. 本周学习总结 ·java中的字符串及String的用法 "=="比较的是两字符串的地址,而不是内容 String类的对象是不可变的,创建之后不能进行修改 ·数组Array的用 ...

  2. 201521123055《Java程序设计》第1周学习总结

     1. 本章学习总结 (1)JAVA环境配置(JDK,JVM) (2)编写简易程序熟练代码结构  2. 书面作业 1.为什么java程序可以跨平台运行?执行java程序的步骤是什么? JAVA程序需要 ...

  3. Git与码云(Git@OSC)入门-如何在实验室和宿舍同步你的代码(2)

    4. 处理冲突 4.1 向远程仓库push时无法提交成功,提示在push前应该先pull 如图所示: 有可能是因为远程仓库的版本与本地仓库的版本不一致,所以应先git pull将远程仓库的内容合并到本 ...

  4. 201521123051《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  5. shell(sed/gawk)脚本(计算目录文件/验证电话号码/解析电子邮件地址)

    1.计算目录文件 #!/bin/bash mypath=`echo $PATH | sed 's/:/ /g'`#注意` ` 和 ‘ ’ count= for directory in $mypath ...

  6. 才趟过的一个坑,css造成的Validform表单提交按钮点击无效

    最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...

  7. devstack安装openstack newton版本

    准备使用devstack安装openstack N版,搞一套开发环境出来.一连整了4天,遇到各种问题,各种错误,一直到第4天下午4点多才算完成. 在这个过程中感觉到使用devstack搭建openst ...

  8. 再起航,我的学习笔记之JavaScript设计模式26(解释器模式)

    解释器模式 概念介绍 解释器模式(Interpreter):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 获取元素在页面中的路径 我们都知道获取一个 ...

  9. EOutOfResources字符异常

    近日,用Delphi编程时,遇到一个莫名其妙的异常:EOutOfResources,这是一个可以重复再现的异常.开始以为是程序中创建的对象太多,导致占用了过多的资源,引起了这个异常.于是在代码中将许多 ...

  10. #pragma编译指令

    #pragma alignment#pragma anon_struct#pragma argsused#pragma checkoption#pragma codeseg#pragma commen ...