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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了Javascript中的面向对象入门实例（一），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
在学习Javascript的过程中，面向对象是必须要学会的课题。然而，网络上大部分文章只是简单地讲述如何通过代码实现面向对象，忽略了理论和原理方面的知识。本系列文章将从头开始逐步讲解面向对象编程思想及其在Javascript中的实现与应用。

从一个简单的需求开始

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

有了Shape这个父类，Square、Rectangle、Circle可以重写为： 

// 来自：编程之家 jb51.cc（jb51.cc）

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方法，但实现各不相同，这就是面向对象中的多态——一种定义，多种实现。

多态还有一种重要的作用——把不同的子类对象当作父类对象来处理，屏蔽不同子类对象之间的差异。也就是说可以把变量声明为父类类型，却实例化为子类对象，例如： 

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

封装

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

// 来自：编程之家 jb51.cc（jb51.cc）

Square square = new Square();
square.Length = -10;
很明显，正方形的边长不可能为负数。然而，给Length赋值为负数却是合法的。为了阻止这种非法值，面向对象提供了封装这一特性。

封装是通过访问修饰符来实现的：
public：在类的内部及外部均可访问；
private：在类的内部可以访问；
protected：在类及其子类的内部可以访问。
假如把Square类Length属性的修饰符改成private，它就不能被外部访问了（无论是读还是写）： 

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

解决问题


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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

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

// 来自：编程之家 jb51.cc（jb51.cc）

// 三角形类
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中模拟面向对象机制。 原文链接：https://www.f2er.com/js/527694.html
面向对象面向对象

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作