图灵社区 : 阅读 : OOP与jQuery（三）：原型

展开全文

OOP与jQuery（三）：原型

推荐 2 收藏

译者注：本系列文章由石川创作，李松峰翻译，w3ctech.com首发，图灵社区转载。

enter image description here

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

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

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

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

可以在 JavaScript 控制台中测试 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( selector, context ) {
    // 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;

推荐阅读 Stoyan Stefanov 编著的 Object-Oriented JavaScript 是一本最容易看懂的 OOP JavaScript 图书。