当前位置: 代码迷 >> Web前端 >> OOP与jQuery(3):原型
  详细解决方案

OOP与jQuery(3):原型

热度:369   发布时间:2012-09-06 10:37:01.0
OOP与jQuery(三):原型

本系列文章由石川创作,李松峰翻译,W3ctech.com首发,图灵社区转载。

?

?

“OOP与jQuery”是“解码jQuery”系列中的一个子系列,主要讨论jQuery的内部构成及相关的OOP(Object Oriented Programming,面向对象编程)概念。

?

第一篇文章以jQuery代码为例解释了变量(数据)和函数的概念。第二篇文章通过jQuery介绍了对象。

?

在这篇文章中。我们来谈一谈原型(prototype)。因为JavaScript是基于原型的语言,所以原型是这门语言中中的一个非常重要的概念。那基于类的语言呢?这篇文章会不会比较它和基于原型的语言?不会,至少现在不会。我觉得要理解原型,不一定非要对类和原型进行比较。假如你想教人说日语,那不一定要让他先学会希腊语。当然,这个人掌握了日语之后,对他学希腊语肯定是有帮助的:)下面就来看一看什么是原型,以及jQuery怎么使用原型。

?

1. 每个函数都有一个原型,原型是对象

?

? ? ?可以在JavaScirpt控制台中测试core.js文件:

?

var jQuery = function(selector, context) {
      // .......
}

console.log(typeof jQuery.prototype);

// 返回对象

?

2.给原型添加方法和属性

?

? ? ?给函数添加方法和属性的一种常见方法是像下面这样:

?

jQuery.prototype.constructor = jQuery;
jQuery.prototype.init = function(selector, context, rootjQuery) {
       // .......
}

?

? ? ?jQuery的原型(大约在core.js的第78行)就保存在jQuery函数的prototype属性中,提取出来的话,就像下面这样(第78 ? ? ? ?行代码中实际上还有一个jQuery.fn,它只不过是jQuery.prototype的别名而已;为了简单起见,就把它先忽略吧):

?

jQuery.prototype = {
       constructor : jQuery,
       init : function(selector, context, rootjQuery) {
            // .......
       }
}

?

? ? ?对以上jQuery代码而言,它其实是用一个新对象完全重写和替换了最初的原型。那么,逐个给原型添加属性与完全重写原 ? ? ?型有什么区别吗?没有什么太大区别,这就像是一个意思的两种不同表达方式,比如:

?

? ? ?我可以说:我有一只绿色的猫,一只蓝色的猫和一只粉红色的猫。

? ? ?也可以说:我有三只猫,分别是绿色的、蓝色和粉红色的。

?

? ? ?实际上还有第三种为函数添加属性和方法的方式:

?

function jQuery() {
       this.constructor = jQuery;
       this.init = function(selector, context, rootjQuery) {
            // ........
       }
}

?

3. 使用原型的方法和属性

?

? ? ?要使用方法和属性,必须创建一个新对象。以下就是在jQuery中创建新对象的方式,大约是在第6行:

?

new jQuery.fn.init(selector, context, rootjQuery);

?

? ? ?另外,大约在第303行,还有如下代码:

?

jQuery.fn.init.prototype = jQuery.fn;

?

? ? ?哎呀,jQuery函数、对象、jQuery.fn、原型、还有init之间是什么关系呢?

?

下一篇......

下一篇,我们将继续探索jQuery核心,介绍jQuery.fn、原型和init方法之间的关系。

var jQuery = function() {
      // jQuery对象实际上就是一个“增强版的”init构造函数
      return new jQuery.fn.init(selector, context, rootjQuery);
}

jQuery.fn = jQuery.prototype = {
        init : function(selector, context, rootjQuery) {
            // ......
        }
}

// 为init函数赋予jQuery原型,以方便后面实例化
jQuery.fn.init.prototype = jQuery.fn
?
  相关解决方案