面向对象的JavaScript简介

出于某种原因,IT行业倾向于认为如果您不使用面向对象编程(OOP)方法,那么您就不是“真正的程序员”。 这实际上是一种有点愚蠢的立场,因为在很多情况下OOP不是处理问题的最合适方式。 这是像Java这样的语言中的缺陷,无论你是否需要OOP,它都会强制OOP进入每个编程任务。

JavaScript(几乎与Java无关)是一种完全不同的语言。 它提供几乎无限的自由度和多功能性,大多数区域的复杂性降低。 不幸的是,有些东西在JavaScript中更复杂,因为它试图给你带来的自由。

为什么OOP并不总是适合每一项任务,因为它会增加程序的复杂性,并且通常会涉及额外的步骤,更多的工作以及更多可能在您不注意的情况下出错的事情。 但是如果OOP在适当的情况下使用,它也可以提供很多优点。

OOP可以为我们提供的最重要的优势是复制,这意味着我们可以克隆一个对象,并在我们需要的时候在同一个程序中多次重复使用它。 隐含的复杂性,以及JavaScript从一开始就构建为OOP语言(从而增加了更多复杂性)的事实,是OOP代表许多初出茅庐的JavaScript程序员获得成功之前的最终前沿的原因之一。

好吧,这很难,但并不难

在您开始考虑面向对象JavaScript的概念对您来说太过分之前,请考虑您已经在使用OOP,即使您没有意识到它。 纯粹主义者可能不同意,但我认为可以公平地说,如果您已经在使用HTML和CSS,并且偶尔使用JavaScript来操纵网页上的HTML元素,那么您已经是一位经验丰富的OOP程序员。

网页上的每个HTML元素实际上都是一个对象。 它们都适合文档对象模型(DOM)层次结构,这意味着它们具有已定义的类,已定义的属性和已定义的继承。 除非您明确设置属性值,否则所有对象都将使用其默认属性值。 当您编写CSS指令时,实际发生的是您正在使用方法来修改类的一个或多个属性值。

每次编写HTML指令时,都会创建一个类的新实例。 正如您当然已经知道的那样,您可以根据每个对象类型的预定义类创建自己的类(例如,您可以创建<h2 class =“subheading”>,它可能与原始类具有非常不同的属性它是由...创建的。 您可以指定具有此类的H2对象将具有与常规H2对象不同的颜色和大小。 您可以根据需要随时重复使用这些修改过的对象。 原始H2对象是一个对象模板,您的新类派生自模板类。

所以是的,OOP并不容易,但你可能已经在做了,所以有什么可怕的?

下一级:创建自己的对象

使用内置DOM对象太容易了。 你需要更多的挑战。 制作自己的对象是提高OOP水平的第一步。

有了所有的序言,你可能期望创建一个对象是一个大问题,需要很多复杂的代码。 当然,如果您曾尝试使用Java或C#等语言创建自定义对象类,那么您将期望创建一个冗长的类构造函数。 以下是我们在JavaScript中的使用方法:

那是反气候的,对吧? 我们在那里做的是我们创建了一个类“myObject”的空对象。 很明显,空对象很无聊,因为除了占用内存空间外,它们不会做任何事情。 为了有用,对象需要有内容。 让我们考虑一个更实用的课程:

上面显示了一个名为objAlien的对象,它具有在其中定义的所有这些不同的属性(普通变量)和方法(函数)。 从技术上讲,您还可以将对象视为变量和/或函数的数组。

在程序中使用对象

定义对象后,您可以在程序中引用它。 在游戏中,你有多个外星人,但为每个外星人编写代码会使程序过于繁琐。 更好的方法是创建一个数组来存储所有外星人,然后使用外星人类来创建新的外星人。 例如:

这段代码会使20粘糊糊的绿色外星人将110像素分开(因此我们可以从中猜测用于存储外星人的图像是100px宽,并且每个外星人之间有一个10px边距)。 显然,当然,这不是用JavaScript实现游戏的好方法,因为有更好的技术,但本文不是关于制作游戏,而是关于创建和使用对象。

不必总是使用new关键字添加对象。 这是一个项目代码示例,其中一个对象使用另一个对象的值设置自己的属性:

在这里,我们可以看到一种非常复杂的使用对象的方式,其中对象的值被传递给R对象的attr属性。 如果您熟悉JSON(JavaScript Object Notation),那么您可能认为该示例的第一部分是使用带有语法错误的JSON,但实际上它不是JSON代码。

引用除了fill之外的变量名称的原因是为了防止JavaScript处理变量名称中的减号运算符(这是CSS属性)。 由于编写了该程序,因此进行了更改以允许将font-family等CSS属性写为fontFamily,但此遗留代码尚未进行调整以利用该更改。

为何使用物体?

对象最适合需要创建多个实例的情况,或者需要一种简单的方法来分组与特定类型的某些内容相关的数据。 在上面的游戏示例中,我们可以看到可以创建objAlien对象的多个副本,但是我们也可以在添加它之后操纵对象的属性,在示例的情况下是x属性。

什么时候不使用对象?

如果项目并不真正需要它们,则不应使用对象。 没有充分理由,过度复杂化程序是没有意义的。 如果您的程序旨在执行简单的操作,则不需要OOP技术。

为什么JavaScript对象比其他OOP语言中的对象更容易创建

在Java甚至Visual Basic等语言中,创建对象是一项艰巨的任务。 这是因为您需要创建一个类模板(或使用现有模板)来定义对象,然后才能定义它。 这在JavaScript中不是必需的,因为我们给出了一种简单的构造技术(objectname = {...})。 JavaScript中的对象还可以包括任何类型的变量,包括数组,并且类型声明不存在。 返回值是可选的。

无论是好事还是坏事都是一个争论的问题,但如果你试图调用一个不存在的属性值,JavaScript程序也不会失败。 例如,如果您键入:

您非常希望上面的代码行将5放在ID为“par1”的元素中。 但如果你输入类似的东西:

你不会看到外星人最喜欢的味道,你会看到未定义出现在par1中。 对于大多数应用程序来说,这不会是一个问题,但对某些应用程 在这些情况下,您需要为此做好准备,并在依赖它们之前编写测试有效值的代码。

测试的一种方法是:

这种反应有点极端,但你明白了。 请注意,我们正在测试“!==”而不是“!=”,这很容易让人感到困惑。 这是另一种方法:

同样的事情,不同的方式。 您还可以在创建对象后向对象添加属性。 你可以这样做:

显然,您也可以以相同的方式更改属性的值。 要从对象中删除favoriteFlavor属性,我们需要这样做:

极少数情况下这是必要的。

使对象更易于重复使用

您可能已经注意到创建对象的最大潜在问题,即如果您想拥有不同类型的外星人,则需要将objAlien.type属性设为数组。 但还有另一种方法,那就更好了。

这种技术称为对象原型,这意味着您为对象创建基本模板,但不填写所有细节。 在这里,我们也越来越接近向游戏添加对象的真实方式。

您现在可以看到定义了对象的方法,但是没有定义大多数属性。 而不是一个简单的变量,对象声明现在包装在一个函数内,这是因为它实际上并不是一个对象。 它只是一个对象的原型,描述了如何创建对象而不实际创建它。

所以现在基于原型实际创建对象我们可以这样做:

这与执行此操作相同:

因为我们创造了一个原型,所以我们不需要第二种方式,并且声明不同类型的外星人具有不同的速度,武器数量,武器和起始位置要容易得多。

接下来是什么?

这篇文章是对面向对象的JavaScript的介绍,它希望揭开这个主题的神秘面纱并使它看起来不那么令人生畏。 我们介绍了所有基础知识,包括如何创建简单对象,如何添加,删除和修改属性,如何声明和使用方法,以及如何使用原型设计使对象更容易重用。 但是还有很多东西需要学习,所以既然你有一个很好的起点,你就能够自信地接触任何有关更高级OOP的教程或课程。

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。