解码jQuery系列2 – 对象
“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 图书。
