OOP与jQuery（二）：对象

 

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

 

 

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

 

 

在上一篇中，我们以jQuery代码为例解释了变量（数据）和函数的概念。本篇将通过jQuery来介绍对象。

 

1.对象就是对象，跟人和椅子一样

 

既然我们讨论的是面向对象编程，那对象是什么呢？对象就是对象，比如苍井空老师就是一个对象，桌椅或狗也是对象。所谓面向对象。不过就是用编程语言来表示对象而已。

 

     如上所述，那么shichuan就是一个对象。因此在OOP中，可以用一个对象来表示他：

 

 

var shichuan = {};

 

 

     每个对象，都可以有属性和方法（行为）。比如，shichuan的头发是黑色的，这就是他的属性。因为天生就是黑色的，        他不用时不时地把头发染黑，所有它不是方法（行为）。我们可以把这个属性添加到shichuan对象中：

 

 

var shichuan = {
      hair : "black"
};

 

 

     好了，假设shichuan有一个特长是骑独角兽，那么骑独角兽（riding unicorn）就是他的一个方法（行为）。用OOP来表     示，就是这样：

 

 

var shichuan = {
      hair : "black",
      ridingUnicorn : function() {
              // 我怎么骑独角兽
      }
};

 

 

     总结一下对象的概念：

 

      1. 包含对象的变量名叫vshichuan。

2. 对象的内容被包含在{和}中。

3. 对象的元素(属性和方法)用逗号来分隔。

4. 键/值对用冒号分隔，比如key : value（或者上面例子的hair : "black"）。

 

2. jQuery中的对象

 

    那么，jQuery中是怎么是使用对象的呢？还记得我们在第一篇文章里谈到的jQuery的局部副本吧。下面我们就看看jQuery       函数的内部（大约在第4行），实际上这个函数里只有一行代码，其注释说：jQuery对象实际上就是一个“增强版的”init     构造函数。那这个增强的init是什么样呢？

 

 

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

 

   如果你在代码里搜索“jQuery.fn”，在大约第76行可以找到它，大致是这样的：

 

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

 

    jQuery的原型（下一篇文章将介绍原型）——jQuery.prototype，是一个对象，一个大对象。这个对象有很多很多属     性和方法。比如，它的属性有constructor、selector、jquery、length，等等；它的方法有init、size、toArray、       get、pushStack,等等。

 

3. 函数是数据，也是对象

 

   在第一篇文章中，我们说过函数就是数据，通过以下两种方式定义jQuery函数，结果是相同的：

 

// 局部 jQuery

function jQuery(selector, context) {

        //  .......

}

// 局部 jQuery

var jQuery = function(selector, context) {

      // ........

}

 

    实际上，还有第三种方法：

 

// 局部 jQuery

var jQuery = new Function("selector", "context", "// .......");

 

    在OOP中，使用new加构造函数（这里的Function）是创建新对象的典型方式。虽然这种方法也能创建函数，但通常       并不是最好的方式，因为JavaScript会是使用eval对传入的源代码进行求值。