Javascript中的面向对象入门实例（一）

内容摘要
这篇文章主要为大家详细介绍了Javascript中的面向对象入门实例（一），具有一定的参考价值，可以用来参考一下。

在学习Javascript的过程中，面向对象是必须要学会的课题。然而，网络上
文章正文

这篇文章主要为大家详细介绍了Javascript中的面向对象入门实例（一），具有一定的参考价值，可以用来参考一下。

在学习Javascript的过程中，面向对象是必须要学会的课题。然而，网络上大部分文章只是简单地讲述如何通过代码实现面向对象，忽略了理论和原理方面的知识。本系列文章将从头开始逐步讲解面向对象编程思想及其在Javascript中的实现与应用。

从一个简单的需求开始

假设我们需要在程序中计算各种形状的周长，代码可能是这样的： 

// 来自：php教程（www.idcnote.com）

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类（正方形）： 

// 来自：php教程（www.idcnote.com）

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操作符创建对象： 

// 来自：php教程（www.idcnote.com）

Square square = new Square();
square.Perimeter(); // 构造函数中给Length属性赋值为1，因此结果为4
square.Length = 10;
square.Perimeter(); // 给Length属性赋值为10，因此结果为40
接下来声明矩形类和圆形类： 

// 来自：php教程（www.idcnote.com）

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方法应该如何实现呢？ 

// 来自：php教程（www.idcnote.com）

class Shape
{
    public string Name;
    public double Perimeter()
    {
        // do what?
    }
}
答案是不实现。在面向对象的概念中，所有对象都是通过类来描绘的，但是反过来，并不是所有的类都是用来描绘对象的。某些类中没有包含足够的信息来描绘具体的对象，也就无法实例化，只能作为基类存在，这样的类就是抽象类。而Shape正是这样一个类： 

// 来自：php教程（www.idcnote.com）

abstract class Shape
{
    public string Name;
    public abstract double Perimeter();
}
抽象类通过abstract关键字声明，可以包含抽象方法。抽象方法只有方法声明，没有具体实现，它存在的意义是，强制子类必须存在这样一个方法并且实现它。有了Shape这个父类，Square、Rectangle、Circle可以重写为： 

// 来自：php教程（www.idcnote.com）

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方法，但实现各不相同，这就是面向对象中的多态——一种定义，多种实现。多态还有一种重要的作用——把不同的子类对象当作父类对象来处理，屏蔽不同子类对象之间的差异。也就是说可以把变量声明为父类类型，却实例化为子类对象，例如： 

// 来自：php教程（www.idcnote.com）

Shape shape = new Circle();
不过要注意，此时shape变量仍然是Shape类型，而非Circle类型，所以不能访问它的Radius属性： 

// 来自：php教程（www.idcnote.com）

Shape shape = new Circle();
shape.Radius = 10; // 编译失败
但这样写是没有问题的： 

// 来自：php教程（www.idcnote.com）

Circle circle = new Circle();
circle.Radius = 10;
Shape shape = circle;

封装

先来看看以下代码有什么问题： 

// 来自：php教程（www.idcnote.com）

Square square = new Square();
square.Length = -10;
很明显，正方形的边长不可能为负数。然而，给Length赋值为负数却是合法的。为了阻止这种非法值，面向对象提供了封装这一特性。封装是通过访问修饰符来实现的：
public：在类的内部及外部均可访问；private：在类的内部可以访问；protected：在类及其子类的内部可以访问。
假如把Square类Length属性的修饰符改成private，它就不能被外部访问了（无论是读还是写）： 

// 来自：php教程（www.idcnote.com）

class Square
{
    private double Length;
    // 其他照抄
}
Square square = new Square();
double length = square.Length; // 读操作，编译失败
square.Length = 10;  // 写操作，编译失败
那么问题来了，如果要访问Length的值，该怎么办？答案就是通过public的方法： 

// 来自：php教程（www.idcnote.com）

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对传入的参数进行了判断，如果是非法值就抛出异常，这样就保证了值是合法的。

解决问题

掌握了以上知识，开头提到的缺陷就可以解决了。结合继承、多态、封装的特性，先编写几种形状类： 

// 来自：php教程（www.idcnote.com）

// 形状
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函数并调用： 

// 来自：php教程（www.idcnote.com）

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方法实现各不相同，这样就可以执行与形状相对应的周长算法。如果此时要增加三角形，要怎么改呢？答案是不用改，只需新增代码即可： 

// 来自：php教程（www.idcnote.com）

// 三角形类
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中模拟面向对象机制。

注：关于Javascript中的面向对象入门实例（一）的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇Python Hello World!的解决办法下一篇HTML移动端利用flex布局实现css图片垂直居中

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！