JS++ 类、OOP和用户定义的类型

到目前为止，我们一直在声明变量，在数据上循环，以及编写 “如果 “和其他条件语句。这些操作包含了 “命令式编程 “范式，在这种范式中，我们一步一步地描述程序是如何运行的（或者，更具体地说，是逐条语句地描述）。

很多时候，在现实世界的编程中，我们希望能够描述现实世界的对象。例如，在一个雇员数据库中，我们需要能够描述 “雇员”–甚至可能是特定类型的雇员，如程序员、经理、销售人员等等。在一个视频游戏中，我们需要能够描述英雄、敌人、子弹、武器、设备和其他物品。这种需求催生了面向对象的编程（OOP）范式，最引人注目的是C++编程语言（尽管OOP本身早于C++），然后扩展到Java、Python、C#、PHP、Objective-C、Swift和许多其他现代语言。

JS++通过类提供了对面向对象编程（OOP）的访问，它也创建了用户定义的类型。JS++是JavaScript ECMAScript 3规范的扩展，它没有提供类的支持。此外，JS++的类与那些试图将OOP添加到JavaScript的类系统和库是不同的，JavaScript是一种 “动态类型 “的语言–数据类型在运行时确定（正如我们之前所探讨的）。相反，JS++类在运行时自然地使用了许多静态类型和静态分析的概念（数据类型和错误在编译时被分析和检查）：名义类型、方法重载、参数多态性（通用编程）、编译时重载解析、虚拟方法等等。这样一来，JS++中的面向对象编程与C++、Java和C#中的OOP非常相似。因此，在上述编程语言中，从银行到火箭，经过几十年的经验发展出来的设计模式和最佳实践，也立即适用于JS++。

在本章中，我们将通过创建动物对象来介绍JS++中的基本OOP，我们将把这些对象渲染到网页上。然后我们将逐步为这些动物对象添加互动性，以说明核心的OOP概念。我们还将涵盖OOP的四个基本要素：抽象、封装、继承和多态性。

类和用户定义的类型

类是JS++中面向对象编程的基本基础。我们可以使用 “class “关键字来声明一个类。

class Animal
{
}

通过声明一个类，你也在创建你自己的用户定义的数据类型。用一个游戏开发的比喻，如果你想声明一个操作子弹的函数，你不希望代表药水对象的数据有可能被操作。这又回到了我们之前探讨的Js++提供的正确性保证。

由于类允许我们创建自己的用户定义的数据类型，让我们来探索如何在实践中使用它。创建一个名为 “OOP “的文件夹。在’OOP’文件夹内，创建一个名为error.jspp的文件并输入以下代码。

class Animal
{
}
class Chair
{
}

void startWalking(Animal a) {
}

Animal dog = new Animal();
Chair chair = new Chair();
startWalking(chair); // intentional, let's see the error

试着进行编译。你应该看到这个编译错误。

[  ERROR  ] JSPPE5024: No overload for `startWalking' matching signature `startWalking(Chair)' at line 13 char 0 at error.jspp

我们希望我们的’startWalking’函数能够让一个’动物’类型的对象开始行走。我们不希望意外地或有可能地传入一个’椅子’类型的对象。改变’startWalking’函数的调用。

// startWalking(chair); // intentional, let's see the error
// to:
startWalking(dog);

虽然我们的’startWalking’函数是一个空函数，不做任何事情（例如让一个实际的’动物’对象行走），但我们能够看到用户定义的类型如何在现实世界的代码中使用，以防止错误的基本原理。如果你编译修改后的error.jspp以传入’dog’对象，它应该能成功编译，没有错误。

你现在可以删除error.jspp了，我们不再需要它了。保持你的代码清洁并删除不再使用的代码总是好的。

实例化

你可能已经注意到，在我们之前的代码中，我们使用了几次 “new “关键字。

Animal dog = new Animal();
Chair chair = new Chair();

new “关键字用于一个叫做 “实例化 “的过程。类就像对象的 “蓝图”。这些对象是类的 “实例”。在上面的两行代码中，”狗 “是 “动物 “蓝图（类）的对象实例，”椅子 “是 “椅子 “蓝图的实例。由于我们可以有多个类的 “实例”，这使我们能够创建多个具有不同属性的狗，例如具有不同名字的狗、不同体重的狗、不同品种的后代，等等。

简而言之：”class “关键字创建蓝图，”new “关键字创建该蓝图的对象/实例。

设置我们的OOP项目

我们现在要开始我们的OOP项目。我们将为不同的动物创建类，把它们渲染到网页上，让它们用语音泡泡说话，等等。

首先，我们需要下载一些资源。在 “OOP “项目文件夹中，创建四个子文件夹：”build”、”libs”、”src “和 “style”。

到Icofont.com去下载Icofont。Icofont是一种 “图标字体”。对于那些熟悉Windows “Wingdings “字体的人来说，这是个相同的想法。图标字体给了我们图形和图标–以字体字符的形式–我们可以在我们的应用程序中使用。图标字体还有一个优点，即我们可以通过改变字体颜色来改变图标的颜色。这使得图标字体成为网络和用户界面的理想选择。

下载并解压Icofont到你的 “libs “子文件夹。你的目录结构现在应该是这样的。

OOP
|_ build
|_ libs
     |_ Icofont
          |_ css
          |_ fonts
|_ src
|_ style

在’style’子文件夹中，创建一个空的’style.css’文件。

在你的’src’子文件夹中，创建一个空的main.jspp文件。现在，同样在’src’子文件夹中，创建一个名为’Animals’的文件夹，并在里面放入以下*空的文件。

Animal.jspp
Cat.jspp
Dog.jspp
Panda.jspp
Rhino.jspp

最后，在我们的根 “OOP “项目文件夹中，用以下代码创建一个 “index.html “文件。

<!DOCTYPE html>
<head>
<title>JS++ Animals OOP Project</title>
<link rel="stylesheet" type="text/css" href="lib/icofont/css/icofont.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>

<div id="content"></div>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="build/app.jspp.js"></script>
</body>
</html>

现在的HTML应该是很简单的了。我们创建了一个 “div “元素，它将成为我们通过jQuery和Js++动态生成内容的容器。新的标签是用来包括我们用于造型的CSS文件。同样值得注意的是’script’标签，它指向 “build/app.jspp.js”，它将包含我们生成的JS++应用程序。(当Js++编译多个输入源文件时，默认的输出名称通常是 “app.jspp.js”)。

你的最终目录结构应该看起来像这样。

OOP
|_ build
|_ libs
     |_ Icofont
          |_ css
               |_ icofont.css
          |_ fonts
               |_ icofont.eot
               |_ icofont.svg
               |_ icofont.ttf
               |_ icofont.woff
|_ src
     |_ Animals
          |_ Animal.jspp
          |_ Cat.jspp
          |_ Dog.jspp
          |_ Panda.jspp
          |_ Rhino.jspp
     |_ main.jspp
|_ style
     |_ style.css
index.html