石川著, 李松峰编译

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

在这篇文章中，我们会讨论函数作用域、jQuery连缀模式和jQuery.fn。

1.函数作用域

我们都看到了，jQuery对象被包装在了很多层函数中。为什么我们用函数来定义作用域呢？因为JavaScript不能用花括号定义作用域。JavaScript变量只有全局作用域和函数作用域。

举例来说吧，为了把下面这个jQuery变量变成私有变量，必须把它包装在一个函数中：

function a() {
  var jQuery = "hellow world";
}
console.log(jQuery); // undefined

JavaScript函数具有词法作用域。什么意思呢？就是说，函数的作用域是在定义的时候创建的，而不是在执行的时候创建的。

var jQuery = 'hi there';
var f = function() {
  console.log(jQuery); // "undefined"
  var jQuery = "hello world";
};
f();
// undefined

所以，如果运行上面的代码，返回的值会是`undefined`，而不是`’hi there’`。 就是说，在同一个变量作用域或者同一个函数内，只要有使用var声明变量jQuery的语句，就可以在函数中的任何位置访问它，包括在var语句之前。所以上面的等同于：

var jQuery = 'hi there';
var f = function() {
  var jQuery; // same as -> var jQuery = undefined;
  console.log(jQuery); // "undefined"
  jQuery = "hello world";
};
f();
// undefined

就是说，函数f有自己的作用域，它没有读var jQuery = ‘hi there’。但在函数f内部，确实定义了jQuery变量，只不过调用console.log()时，jQuery还没有定义。

2.jQuery连缀模式

看看init方法，不知道你是否注意到了，这个方法返回this。

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

在jQuery中，可以在一个方法调用后面再连缀另一个方法调用。之所以能够如此，是因为每个方法都像这里一样返回this对象。

还是不清楚？我们来解释一下。首先，来看看对象中的this关键字有什么用。

var city = {
  name: 'beijing',
  getName: function() {
    return this.name;
  }
}
console.log(city.getName());

以上代码输出的城市名是beijing，说明this引用的是city对象。

再进一步，如果我们返回的是整个对象呢？

var num = {
  value: 1,
  minus: function (n) {
   this.value -= n;
   return this;
  },
  plus: function (n) {
    this.value += n;
    return this;
  },
  getVal: function () {
    console.log(this.value);
  }
};

num.minus(2).plus(5).getVal();

这样，就可以把方法调用连缀起来了。

3.jQuery.fn

在core.js中，我们可以看到这行代码：

jQuery.fn = jQuery.prototype = {
  //...
}

在我们开发jQuery插件时，经常要用到$.fn，也就是jQuery.fn。现在知道了吧，jQuery插件其实就是添加到jQuery.prototype的方法。正因为如此，插件里也不要忘了返回this噢。

(function( $ ){
  $.fn.fontcolor = function() {
    return this.each(function() {
      $(this).css("color", "orange");
    });
  };
})( jQuery );

系列其他文章

• 解码jQuery系列3 – 原型
• 解码jQuery系列2 – 对象
• 解码jQuery系列1 – 变量和函数

石川著, 李松峰编译

“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 图书。

系列其他文章

• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列2 – 对象
• 解码jQuery系列1 – 变量和函数

石川著, 李松峰编译

“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() {
        // 我怎么骑独角兽
    }
};

总结一下对象的概念：

包含对象的变量名叫 shichuan
对象的内容被包含在 { 和 } 中
对象的元素（属性和方法）用逗号来分隔
键/值对用冒号分隔，比如 key : value（或者上面例子中的 hair : “black”）
方法实际上也是函数，比如 ridingUnicorn 就是对象 shichuan 的一个方法，行为（函数）

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

var jQuery = function( selector, context ) {
    // 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 对传入的源代码进行求值。

下一篇……
下一篇，我们将继续探索jQuery核心，介绍原型。

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

系列其他文章

• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列3 – 原型
• 解码jQuery系列1 – 变量和函数

石川著, 李松峰编译

光开放源代码是不够的。为了让开源进一步开放，在“解码jQuery”系列中，我们会剖析jQuery的每一个方法，领略jQuery框架之美，同时向这个框架背后的天才们致敬。

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

学习OOP概念的最佳方式，就是剖析一个真实的框架。学习某个框架的最佳方式，就是领会其中的OOP概念。

jQuery在整合压缩前是分为很多不同文件的。它的源代码可以在github的这页看到。 jQuery core （在core.js里）是jQuery的核心。面向对象有5个重要的概念：变量（数据），函数，对象，原型和继承。这些是JS语言面向对象的基础，也是jQuery的基础。

jQuery核心（core.js）是jQuery的“大脑”，其中涉及五个重要概念：变量（数据）、函数、对象、原型和继承。这五个方面是jQuery核心的五个“脑叶”，又是探求OOP概念的五个“意识”。

整个jQuery库都浓缩在一个jQuery变量中。实际上，core.js中有两个jQuery变量（var jQuery），一个是全局的，另一个是局部的。今天我们就通过jQuery来了解JavaScript中的变量和函数这两个概念。下面就是刚提到的两个jQuery变量：

// 全局 global jQuery
var jQuery = (function() {
  // 局部 local jQuery
  var jQuery = function( selector, context ) {
    // ...
  }
})();

1. 变量保存数据，函数也是数据
我们先来看一看局部的jQuery：

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

JavaScript中的函数实际上是数据。也就是说，通过以下两种方式定义jQuery函数，结果是相同的：

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

2. 函数可以匿名
再来看一看全局的jQuery：

// 全局 global jQuery
var jQuery = (function() {
  //...
})();

从中把函数部分提取出来，就会发现它是匿名的：

function() {
  //...
}

在JavaScript中，可以不把数据赋值给变量，而数据照样可以存在。比如，下面这个字符串可以存在于JavaScript代码中，而且不会返回任何错误：

"我是数据，我不会导致错误。"

前面第1点提到了“函数是数据”，因此函数也可以独立存在，而不需要被赋值给某个变量。假如你运行上面的匿名函数，它100%可以运行，而且不会导致任何错误。那匿名函数有什么用呢？下一点就来回答这个问题。

3. 匿名函数可以自调用
匿名函数的一个优点是可以作为自调用的函数来使用。举个例子，下面的函数在页面加载时会自动执行，你可以在控制台看到输出：

var jQuery = (function() {
  console.log("我是自调用。");
})();

那为什么要像这样来使用匿名函数呢？因为这样可以在不创建全局变量的情况下执行一些内部操作。jQuery使用匿名自调用函数来完成它的一次性初始化。

下一期…
下一篇，我们将继续探索jQuery核心，介绍原型和对象的概念。

系列其他文章

• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列3 – 原型
• 解码jQuery系列2 – 对象

如果你知道jQuery和Coffeescript，要编写一个jQuery插件是很容易的。

我们将通过写一个jQuery的插件，它会允许我们为表中的行添加交替颜色交替。

这里是整个插件：

$ = jQuery
$.fn.zebraTable = (options) ->
    defaults =
        evenColor: '#ccc'
        oddColor : '#eee'

    options = $.extend(defaults, options)
    @each ->
        $("tr:even", this).css('background-color', options.evenColor)
        $("tr:odd" , this).css('background-color', options.oddColor)

让我们看看它是怎么执行的：

1. 我们把为$绑为jQuery对象。
2. 我们创建了一个匿名函数并添加到jQuery$，分配给fn.zebraTable。
3. 在此之后，我们将能够做$（“选择”）。zebraTable（）或`$（选择）。zerbraTable（optionsDict）
4. 此功能将设置交替行的背景颜色。

(function() {
  var $;

  $ = jQuery;

  $.fn.zebraTable = function(options) {
    var defaults;
    defaults = {
      evenColor: '#ccc',
      oddColor: '#eee'
    };
    options = $.extend(defaults, options);
    return this.each(function() {
      $("tr:even", this).css('background-color', options.evenColor);
      return $("tr:odd", this).css('background-color', options.oddColor);
    });
  };

}).call(this);

你可以这样调用它。

$(function() {
  $("table").zebraTable(  {
      evenColor: 'red',
      oddColor: 'yellow'
    });
});

显着特点：

1. 由于Coffeescript将代码括在函数里, $= jQuery不覆盖一切，没有必要附上自己的封闭的插件。
2. 插件里面的this是指选定的jQuery对象，所以也没有必要用$(this)。

参考
翻译自 http://agiliq.com/blog/2012/01/writing-jquery-plugins-using-coffeescript/