在学习Javascript的过程中,面向对象是必须要学会的课题。然而,网络上大部分文章只是简单地讲述如何通过代码实现面向对象,忽略了理论和原理方面的知识。本系列文章将从头开始逐步讲解面向对象编程思想及其在Javascript中的实现与应用。
从一个简单的需求开始
假设我们需要在程序中计算各种形状的周长,代码可能是这样的:
var rectangle = {
name: '长方形1',
type: 'rectangle',
length: 5, // 长
width: 10 // 宽
};
var square = {
name: '正方形1',
type: 'square',
length: 5 // 边长
};
var circle = {
name: '圆形1',
type: 'circle',
radius: 5 // 半径
};
function computePerimeter(shape) {
var result;
switch (shape.type) {
case 'rectangle':
// 矩形周长:(长+宽)*2
result = (shape.length + shape.width) * 2;
break;
case 'square':
// 正方形周长:边长*4
result = shape.length * 4;
break;
case 'circle':
// 圆形周长:2*PI*半径
result = 2 * Math.PI * shape.radius;
break;
}
return shape.name + '的周长是' + result;
}
但这种实现方式有着不少缺陷:
要增加更多形状的周长计算时,必须改动computePerimeter函数,可扩展性差;
算法集中在computePerimeter函数,随着形状越来越多,这个函数会越来越庞大,最终变得难以维护;
computePerimeter通过shape.type判定形状类型,但如果type属性值错误(如拼错或大小写错误),就无法计算出正确的周长值。
如何解决以上缺陷呢?带着这个问题,我们开始学习面向对象。
类和对象
类是对具有相似特征事物的统称,例如“电脑”是对世界上所有电脑的统称;而对象则是某个类的具体事物,例如世界上所有的电脑都是电脑对象,又叫做电脑类的实例。
类与类之间最常见的关系是继承,其中被继承的类称为父类,继承而来的类称为子类;子类具有父类的所有特征。例如平板电脑都是电脑的子类,iPad是平板电脑的子类。在继承的层次关系中,位于最上层的又被成为基类,例如电脑是iPad的基类。
具体到编程语言中,类实质上是一种数据类型。例如在Javascript中,所有字符串都是String类的实例,所有数组都是Array类的实例,所有类型的基类都是Object。
C#中的面向对象
Javascript并不是一门面向对象的语言,为了便于描述和理解各种概念,下面先通过C#来学习。
类的声明
C#中通过关键字class来声明类,例如Square类(正方形):
class Square
{
public string Name;
public double Length;
public Square()
{
this.Length = 1;
}
public double Perimeter()
{
return this.Length * 4;
}
}
类可以有属性和方法。上面代码中的Name和Length为属性,分别是字符串和浮点数类型;而Perimeter则为方法,它没有参数,返回值是浮点数类型。声明属性和方法时还可以加上访问修饰符:public、private或protected(用处后面再详细介绍)。类中还有一个名字跟类名一样的特殊函数,即构造函数,这个函数在创建实例时自动调用。
声明类之后就可以通过new操作符创建对象:
Square square = new Square();
square.Perimeter(); // 构造函数中给Length属性赋值为1,因此结果为4
square.Length = 10;
square.Perimeter(); // 给Length属性赋值为10,因此结果为40
接下来声明矩形类和圆形类:
class Rectangle
{
public string Name;
public double Length;
public double Width;
public double Perimeter()
{
return (this.Length + this.Width) * 2;
}
}
class Circle
{
public string Name;
public double Radius;
public double Perimeter()
{
return 2 * Math.PI * Radius;
}
}
继承
仔细观察可以发现:Square、Rectangle和Circle存在一些共同点:
它们都有一个字符串类型的属性Name;
它们都有一个返回值类型为double、没有任何参数的方法Perimeter。
为了减少代码重复,可以进一步抽象出一个Shape类(形状),然后让Square、Rectangle和Circle都继承于它。然而,声明Shape类的时候,问题来了。形状类不能表示任何一种具体的形状,也就无法知道如何计算周长,那Perimeter方法应该如何实现呢?
class Shape
{
public string Name;
public double Perimeter()
{
// do what?
}
}
答案是不实现。在面向对象的概念中,所有对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的。某些类中没有包含足够的信息来描绘具体的对象,也就无法实例化,只能作为基类存在,这样的类就是抽象类。而Shape正是这样一个类:
abstract class Shape
{
public string Name;
public abstract double Perimeter();
}
抽象类通过abstract关键字声明,可以包含抽象方法。抽象方法只有方法声明,没有具体实现,它存在的意义是,强制子类必须存在这样一个方法并且实现它。
有了Shape这个父类,Square、Rectangle、Circle可以重写为:
class Square : Shape
{
public double Length;
public override double Perimeter()
{
return this.Length * 4;
}
}
class Rectangle : Shape
{
public double Length;
public double Width;
public override double Perimeter()
{
return (this.Length + this.Width) * 2;
}
}
class Circle : Shape
{
public double Radius;
public override double Perimeter()
{
return 2 * Math.PI * Radius;
}
}
C#中通过冒号来表示继承,冒号后面的为父类。由于Shape类的三个子类都继承了Name这个属性,所以不需要再声明一次了。它们又都实现了Perimeter方法,但实现各不相同,这就是面向对象中的多态——一种定义,多种实现。
多态还有一种重要的作用——把不同的子类对象当作父类对象来处理,屏蔽不同子类对象之间的差异。也就是说可以把变量声明为父类类型,却实例化为子类对象,例如:
Shape shape = new Circle();
不过要注意,此时shape变量仍然是Shape类型,而非Circle类型,所以不能访问它的Radius属性:
Shape shape = new Circle();
shape.Radius = 10; // 编译失败
但这样写是没有问题的:
Circle circle = new Circle();
circle.Radius = 10;
Shape shape = circle;
封装
先来看看以下代码有什么问题:
Square square = new Square();
square.Length = -10;
很明显,正方形的边长不可能为负数。然而,给Length赋值为负数却是合法的。为了阻止这种非法值,面向对象提供了封装这一特性。
封装是通过访问修饰符来实现的:
public:在类的内部及外部均可访问;
private:在类的内部可以访问;
protected:在类及其子类的内部可以访问。
假如把Square类Length属性的修饰符改成private,它就不能被外部访问了(无论是读还是写):
class Square
{
private double Length;
// 其他照抄
}
Square square = new Square();
double length = square.Length; // 读操作,编译失败
square.Length = 10; // 写操作,编译失败
那么问题来了,如果要访问Length的值,该怎么办?答案就是通过public的方法:
class Square
{
private double Length;
public double GetLength()
{
return this.Length;
}
public void SetLength(double length)
{
if (length < 0) { throw new Exception("…"); }
this.Length = length;
}
public double Perimeter()
{
return this.Length * 4;
}
}
Square square = new Square();
square.SetLength(10);
虽然Length属性是private的,但GetLength和SetLength方法是public的,通过调用它们就间接获取或修改Length的值。并且,SetLength对传入的参数进行了判断,如果是非法值就抛出异常,这样就保证了值是合法的。
解决问题
掌握了以上知识,开头提到的缺陷就可以解决了。结合继承、多态、封装的特性,先编写几种形状类:
// 形状www.111cn.net
abstract class Shape
{
protected string Name;
public string GetName() { return this.Name; }
public void SetName(string name) { this.Name = name; }
public abstract double Perimeter();
}
// 正方形
class Square
{
private double Length;
public double GetLength() { return this.Length; }
public void SetLength(double length)
{
if (length < 0) { throw new Exception("…"); }
this.Length = length;
}
public double Perimeter()
{
return this.Length * 4;
}
}
// 长方形
class Rectangle : Shape
{
private double Length;
public double GetLength() { return this.Length; }
public void SetLength(double length)
{
if (length < 0) { throw new Exception("…"); }
this.Length = length;
}
private double Width;
public double GetWidth() { return this.Width; }
public void SetWidth(double width)
{
if (width < 0) { throw new Exception("…"); }
this.Width = width;
}
public double Perimeter()
{
return (this.Length + this.Width) * 2;
}
}
// 圆形
class Circle : Shape
{
private double Radius;
public double GetRadius() { return this.Radius; }
public void SetRadius(double radius)
{
if (radius < 0) { throw new Exception("…"); }
this.Radius = radius;
}
public double Perimeter()
{
return 2 * Math.PI * Radius;
}
}
接着编写ComputePerimeter函数并调用:
string ComputePerimeter(Shape shape)
{
return shape.GetName() + '的周长是' + shape.Perimeter();
}
Square square = new Square();
square.SetLength(5);
ComputePerimeter(square);
Circle circle = new Circle();
circle.setRadius(5);
ComputePerimeter(circle);
多态的作用在此刻显现:
由于可以把子类对象当做父类对象来处理,所以square和circle都可以作为Shape对象传入为ComputePerimeter的参数;
GetName和Perimeter都是Shape类的方法,所以调用它们也不会有任何问题;
不同形状的Perimeter方法实现各不相同,这样就可以执行与形状相对应的周长算法。
如果此时要增加三角形,要怎么改呢?答案是不用改,只需新增代码即可:
// 三角形类
class Triangle : Shape
{
private double sideA;
private double sideB;
private double sideC;
public double GetSideA() { return this.sideA; }
public double GetSideB() { return this.sideB; }
public double GetSideC() { return this.sideC; }
public void SetSides(double a, double b, double c)
{
if (a < 0 || b < 0 || c < 0)
{
throw new Exception('...');
}
// 两边之和大于必须第三边
if (a + b <= c || a + c <= b || b + c <= a)
{
throw new Exception('...');
}
// 两边之差的绝对值必须小于第三边
if (Math.Abs(a - b) >= c || Math.Abs(a - c) >= b || Math.Abs(b - c) >= a)
{
throw new Exception('...');
}
this.sideA = a;
this.sideB = b;
this.sideC = c;
}
public override double Perimeter()
{
return this.sideA + this.sideB + this.sideC;
}
}
var triangle = new Triangle();
triangle.setSides(3, 4, 5);
ComputePerimeter(triangle);
小结
开放-封闭原则,即对扩展开放、对修改封闭,是面向对象的重要原则。其核心思想是对抽象编程,而不对具体编程。通过继承和多态机制,可以实现对抽象体(如Shape类)的继承,再通过覆写其方法(如不同形状的Perimeter方法)来改变行为的实现细节。
严格来说,Javascript并不是一门面向对象的语言,因为它没有原生提供完整的面向对象机制。但它的语言特性又允许我们去模拟大部分这些机制。
new操作符
Javascript中也用new操作符创建类的实例,例如:
var arr = new Array(10); // 创建长度为10的数组
var date = new Date; // 不需要传参数给构造函数时,括号可以省略
与C#不同的是,Javascript中new的是函数而不是class,这个函数即为类的构造函数。在构造函数中,可以声明属性和方法。例如:
function Square() {
this.length = 1;
this.perimeter = function() {
return this.length * 4;
};
}
var square = new Square();
square.perimeter(); // 4
square.length = 10;
square.perimeter(); // 40
虽然上面的代码看上去很正常,但实际上存在一个缺陷:
var square1 = new Square();
var square2 = new Square();
square1.perimeter === square2.perimeter; // false
由于每次创建Square对象执行构造函数时都创建了新的函数perimeter,所以多个Square对象的perimeter并非指向同一个函数。这样会造成内存的浪费。要解决这个问题,可以使用原型链。
原型链
Javascript中的对象都有一个内部属性__proto__(在新浏览器中已经变成可读可写的外部属性了)指向其构造函数的prototype;构造函数的prototype也是一个对象,所以它也有一个__proto__属性指向它的构造函数的prototype……如此逐层查找,直到__proto__属性的值是null为止。这就是原型链。下面以代码证实这一规则:
var arr = new Array();
arr.__proto__ === Array.prototype; // true
那么Array.prototype.__proto__又是什么呢?在控制台打印出来可以发现,是一个Object对象,所以:
Array.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__; // null
Object类是所有类型的基类,所以它的prototype的__proto__属性为null。最后得出arr的原型链为:
arr.__proto__
Array.prototype
Array.prototype.__proto__
an Object object
object.__proto__
Object.prototype
Object.prototype.__proto__
null
原型链的用处在于:当访问对象的某个属性或方法时,如果对象本身没有这个属性或方法,就会在原型链中由浅到深进行查找(浅处优先)。同样地有代码可以证实这一规则:
var arr = new Array();
// arr本身没有push
arr.hasOwnProperty('push'); // false
// 访问arr.push时实际上访问的是Array.prototype.push。
arr.push === arr.__proto__.push; // true
arr.push === Array.prototype.push; // true
不难发现,即使有多个Array对象,它们也是共享Array.prototype上的方法。所以,借助原型链就可以解决前面提到的多个函数副本浪费内存的问题:
function Square() {
this.length = 1;
}
Square.prototype.perimeter = function() {
return this.length * 4;
};
var square1 = new Square();
var square2 = new Square();
square1.perimeter === square2.perimeter; // true
继承
原型链的层次结构跟面向对象的继承非常相似,所以原型链也可以用于模拟继承。先来看一个简单的例子:
function Shape() {
this.name = '形状';
}
Shape.prototype.perimeter = function() { };
function Square() {
this.length = 1;
}
// Javascript中没有抽象类的概念,所以Shape是可以实例化的
Square.prototype = new Shape(); // important
Square.prototype.perimeter = function() {
return this.length * 4;
};www.111cn.net
var square = new Square();
square.name; // '形状'
square.perimeter(); // 4
其中最为关键的就是把一个Shape对象加入到Square的原型链中去。根据原型链的规则:
访问square.name时,实际上访问的是Square.prototype.name,也就是那个Shape对象的name属性。
调用square.perimeter()时,虽然Square.prototype和Shape.prototype中都存在perimeter方法,但根据浅处优先原则,调用的是Square.prototype.perimeter。
很明显,这跟继承的效果是一样的。
封装
目前Javascript没有任何机制可以控制属性和方法的可访问性,也就是说private和protected都无法实现。但是利用闭包的特性可以实现类似private的效果:
function Square() {
var length = 1;
this.setLength = function(len) {
length = len;
};
this.getLength = function() {
return length;
};
this.perimeter = function() {
return length * 4;
};
}
var square = new Square();
square.perimeter(); // 4
square.setLength(10);
square.perimeter(); // 40
由于length变量的作用域是在Square内,所以外部无法访问,也就达到了私有的效果。但这样一来,三个方法就不能写到Square.prototype上,因为一旦它们脱离了Square的作用域,就无法访问length了。
鉴于封装特性难以实现,实际工作中更多是通过编码规范来进行约束。例如可以规定:名字以双下划线开头的属性或方法是private的,名字以单下划线开头的属性或方法是protected的。代码示例:
function Square() {
this.__length = 1;
}
Square.prototype.setLength = function(len) {
this.__length = len;
};
Square.prototype.getLength = function() {
return this.__length;
};
Square.prototype.perimeter = function() {
return this.__length * 4;
};
var square = new Square();
square.perimeter();
square.setLength(10);
square.perimeter();
小结
最后,我们再来了解一下new操作符的大概执行过程:
创建一个新的空对象;
设置新对象的__proto__属性为构造函数的prototype;
以新对象为this执行构造函数。
如果以代码表示,则为:
// 以new Foo()为例
var obj = { };
obj.__proto__ = Foo.prototype;
Foo.call(obj);
大家不妨以此过程回顾前面的代码段。
在Javascript中,虽然借助原型链就可以实现继承,但这里面还是有很多细节问题的要处理的。分析并解决这些问题后,就可以把创建类的过程写成一个通用函数了。
constructor属性
Javascript中的对象都有一个constructor的属性指向其构造函数。例如:
function A() { }
var a = new A();
a.constructor; // A
确切地说,constructor属性是位于构造函数的prototype上。下面的代码可以证实这一规则:
function A() { }
var a = new A();
console.log(a.constructor); // A
delete A.prototype.constructor; // 删除原型上的constructor属性
console.log(a.constructor); // Object
由于删除了A.prototype下的constructor属性,所以访问a.constructor的时候,在原型链中的查找就得查到Object.prototype上去,而Object.prototype.constructor自然就是Object。
现在看一下简单的原型链继承方案带来的问题:
function A() { }
function B() { }
B.prototype = new A();
var a = new A();
a.constructor; // A
var b = new B();
b.constructor; // A
可见,b的constructor应为B,但却成了A。原因是:b.constructor即B.prototype.constructor,而此时B.prototype是一个A对象,A对象的constructor即A.prototype.constructor,而A.prototype.constructor正是A。
幸好constructor是一个可写的属性,所以只要重新设定这个值,问题就解决了:
function A() { }
function B() { }
B.prototype = new A();
B.prototype.constructor = B; // important
var a = new A();
a.constructor; // A
var b = new B();
b.constructor; // B
instanceof操作符
从字面意思来看,instanceof用于判断某个对象是否某个类的实例,但准确地说,它是用于检测某个对象的原型链中是否包含某个构造函数的prototype。举个例子:
var arr = new Array();
arr instanceof Array; // true
arr instanceof Object; // true
由于Array.prototype和Object.prototype都在arr的原型链中,所以上面的测试结果均为true。另外还要注意,instanceof的检测只跟原型链有关,跟constructor属性没有任何关系。所以,基于原型链的继承不会影响到instanceof的检测。
带参数的构造函数
前面通过原型链实现继承的例子中,构造函数都是不带参数的,一旦有参数,这个问题就复杂很多了。先看看下面的例子:
function A(data) {
this.name = data.name;
}
function B() { }
B.prototype = new A();
B.prototype.constructor = B;
var b = new B();
这段代码运行的时候会产生异常:
Cannot read property 'name' of undefined
出现异常的代码就是A构造函数内的那一行。出现异常的原因是:要访问data.name,就得保证data不为null或undefined,但是执行B.prototype=new A()时,却没有传参数进去,此时data为undefined,访问data.name就会出现异常。
仅解决这个问题并不难,只要在new A()时传入一个不为null且不为undefined的参数就行:
function A(data) {
this.name = data.name;
}
function B() { }
B.prototype = new A({ });
B.prototype.constructor = B;
var b = new B();
b.name; // undefined
然而,实际情况远没有这么简单。
其一,A的参数可能不止一个,其内部逻辑也可能更为复杂,随便传参数进去很有可能导致异常。要彻底解决这个问题,得借助一个空函数:
function A(data) {
this.name = data.name;
}
function B() { }
function Temp() { }
Temp.prototype = A.prototype; // important
B.prototype = new Temp();
B.prototype.constructor = B;
var b = new B();
b.name; // undefined
Temp即为该空函数,它的prototype被更改为A.prototype,即Temp与A共享同一个prototype。因此,在忽略构造函数内部逻辑的前提下,把B.prototype设成Temp的实例跟设成A的实例效果是一样的。但因为Temp内部没有逻辑,所以new Temp()肯定不会产生异常。
其二,很多时候我们需要把子类构造函数的参数传给父类构造函数。比如说达到这样的效果:
var b = new B({ name: 'b1' });
b.name; // 'b1'
这就需要在子类构造函数中调用父类构造函数:
function A(data) {
this.name = data.name;
}
function B() {
A.apply(this, arguments); //important
}
function Temp() { }
Temp.prototype = A.prototype;
B.prototype = new Temp();
B.prototype.constructor = B;
var b = new B({ name: 'b1' });
console.log(b.name);
通过A.apply(this, arguments)就可以确保操作的对象为当前对象(this),且把所有参数(arguments)传到A。
createClass函数
总算是完全解决了这些细节问题,为了不在每次创建类的时候都要写这么一大堆代码,我们把这个过程写成一个函数:
function createClass(constructor, methods, Parent) {
var $Class = function() {
// 有父类的时候,需要调用父类构造函数
if (Parent) {
Parent.apply(this, arguments);
}
constructor.apply(this, arguments);
};
if (Parent) {
// 处理原型链
var $Parent = function() { };
$Parent.prototype = Parent.prototype;
$Class.prototype = new $Parent();
// 重设constructor
$Class.prototype.constructor = $Class;
}
if (methods) {
// 复制方法到原型
for (var m in methods) {
if ( methods.hasOwnProperty(m) ) {
$Class.prototype[m] = methods[m];
}
}
}
return $Class;
}
在这个函数的基础上,把计算周长的问题解决掉:
// 形状类
var Shape = createClass(function() {
this.setName('形状');
}, {
getName: function() { return this._name; },
setName: function(name) { this._name = name; },
perimeter: function() { }
});
// 矩形类
var Rectangle = createClass(function() {
this.setLength(0);
this.setWidth(0);
this.setName('矩形');
}, {
setLength: function(length) {
if (length < 0) {
throw new Error('...');
}
this.__length = length;
},
getLength: function() { return this.__length; },
setWidth: function(width) {
if (width < 0) {
throw new Error('...');
}
this.__width = width;
},
getWidth: function() { return this.__width; },
perimeter: function() {
return (this.__length + this.__width) * 2;
}
}, Shape);
// 正方形类
var Square = createClass(function() {
this.setLength(0);
this.setName('正方形');
}, {
setLength: function(length) {
if (length < 0) {
throw new Error('...');
}
this.__length = length;
},
getLength: function() { return this.__length; },
perimeter: function() {
return this.__length * 4;
}
}, Shape);
// 圆形
var Circle = createClass(function() {
this.setRadius(0);
this.setName('圆形');
}, {
setRadius: function(radius) {
if (radius < 0) {
throw new Error('...');
}
this.__radius = radius;
},
getRadius: function() { return this.__radius; },
perimeter: function() {
return 2 * Math.PI * this.__radius;
}
}, Shape);
function computePerimeter(shape) {
console.log( shape.getName() + '的周长是' + shape.perimeter() );
}
var rectangle = new Rectangle();
rectangle.setWidth(10);
rectangle.setLength(20);
computePerimeter(rectangle);
var square = new Square();
square.setLength(10);
computePerimeter(square);
var circle = new Circle();
circle.setRadius(10);
computePerimeter(circle);
最后
最后总结一下在Javascript中模拟面向对象的要点:
new的是构造函数,而不是类;
属性写在构造函数内,方法写到原型链上;
继承可以通过原型链实现;
封装难以实现,可通过代码规范来约束。
此外,鉴于构造函数是函数,普通函数也是函数,建议通过不同的命名规则区分它们:给构造函数命名时使用Pascal命名法,给普通函数命名时使用驼峰命名法。