📜  JS++ |类、OOP 和用户定义类型

📅  最后修改于: 2022-05-13 01:54:43.346000             🧑  作者: Mango

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

到目前为止,我们一直在声明变量、循环数据、编写“if”和其他条件语句。这些操作构成了“命令式编程”范式,我们在其中逐步描述程序“如何”操作(或者,更具体地说,逐个语句)。

通常,在现实世界的编程中,我们希望能够描述现实世界的对象。例如,在员工数据库中,我们需要能够描述“员工”——甚至可能是特定类型的员工,例如程序员、经理、销售人员等。在电子游戏中,我们需要能够描述英雄、敌人、子弹、武器、装备和其他物品。这种需求催生了面向对象编程 (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”函数使“Animal”类型的对象开始行走。我们不想意外或潜在地传入“Chair”类型的对象。更改“startWalking”函数调用:

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

尽管我们的 'startWalking'函数是一个不做任何事情的空函数(例如,让一个实际的 'Animal' 对象行走),但我们能够看到如何在实际代码中使用用户定义类型的基础知识以防止错误。如果您编译修改后的 error.jspp 以传入 'dog' 对象,它应该可以成功编译且没有错误。

您现在可以删除 error.jspp。我们将不再需要它了。保持代码干净并删除不再使用的代码总是好的。

实例化

您可能已经注意到我们在之前的代码中多次使用了“new”关键字:

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

“new”关键字用于称为“实例化”的过程。类就像对象的“蓝图”。对象是类的“实例”。在上面的两行代码中,“dog”是“Animal”蓝图(类)的对象实例,“chair”是“Chair”蓝图的实例。由于我们可以拥有该类的多个“实例”,这使我们能够创建多个具有不同属性的狗,例如具有不同名称、不同体重、来自不同品种的狗等。

回顾一下:“class”关键字创建蓝图,“new”关键字创建该蓝图的对象/实例。

设置我们的 OOP 项目

我们现在要开始我们的 OOP 项目。我们将为不同的动物创建类,将它们呈现到网页上,让它们与气泡对话,等等。

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

前往Icofont.com 下载Icofont。 Iconfont 是一种“图标字体”。对于那些熟悉 Windows “Wingdings” 字体的人来说,这是同样的想法。图标字体以字体字符的形式为我们提供了图形和图标,我们可以在应用程序中使用它们。图标字体还有一个额外的优势,就是我们可以简单地通过改变字体颜色来改变图标的颜色。这使得图标字体非常适合 Web 和用户界面。

下载 Icofont 并将其解压缩到您的“libs”子文件夹中。您的目录结构现在应该如下所示:

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

在“style”子文件夹中,创建一个空的“style.css”文件。

在您的“src”子文件夹中,创建一个空的 main.jspp 文件。现在,再次在“src”子文件夹中,创建一个名为“Animals”的文件夹并将以下 *empty* 文件放入其中:

  • 动物.jspp
  • 猫.jspp
  • 狗.jspp
  • 熊猫.jspp
  • 犀牛.jspp

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



JS++ Animals OOP Project





HTML 现在应该很简单了。我们创建了一个“div”元素,它将成为我们将通过 jQuery 和 JS++ 动态生成的内容的容器。新标签用于包含我们用于样式的 CSS 文件。另外值得注意的是指向“build/app.jspp.js”的'script'标签,它将包含我们生成的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