JavaScript中的面向对象编程

OOP is a widely used concept in programming. Almost all modern languages, except C language, follow OOP principles. The concept is related to classes and objects. Classes are the design or blueprint of an object, which defines the core properties and functions. Objects are instances of classes, which contains property and methods. JavaScript is not a class-based object-oriented language. But it still has ways of using object oriented programming (OOP).

OOP是编程中广泛使用的概念。 除C语言外，几乎所有现代语言都遵循OOP原则。 该概念与类和对象有关。 类是对象的设计或蓝图，它定义了核心属性和功能。 对象是类的实例，其中包含属性和方法。 JavaScript不是基于类的面向对象语言。 但是它仍然具有使用面向对象编程(OOP)的方法。

How do we implement a class and an object in JavaScript?

我们如何在JavaScript中实现类和对象？

To make it more understandable, let’s see an example. To create a Movie class, we need movie’s name and director when we initialize the instance. So the Class will look like the following.

为了使它更易于理解，我们来看一个示例。 要创建Movie类，在初始化实例时，我们需要电影的名称和导演。 因此，该类将如下所示。

https://gist.github.com/GAierken/a2ba3678e9745bb97c440ee26bd45e36 https://gist.github.com/GAierken/a2ba3678e9745bb97c440ee26bd45e36

After we define the class, when we create Employee instances, like “john” in the example above, “john” object will have “name” and “id” attributes that we can call to get the result we want: john.name will give us “John” and john.id will show us “001”.

定义完类后，当我们创建Employee实例时，如上例中的“ john”，“ john”对象将具有“ name”和“ id”属性，我们可以调用它们来获得所需的结果：john.name将给我们“ John”，john.id将向我们显示“ 001”。

Other than class and object, object oriented programming has four principles:

除了类和对象之外，面向对象的编程还具有四个原则：

• Encapsulation
  封装形式
• Abstraction
  抽象化
• Inheritance
  遗产
• Polymorphism
  多态性

封装形式 (Encapsulation)

Encapsulation describes the idea of bundling data and methods that work on that data within one unit, e.g., a class in JavaScript. To make it sound simple, it is used to hide the internal representation, or state of an object from the outside.

封装描述了捆绑数据的思想以及在一个单元(例如JavaScript中的类)内处理该数据的方法。 为了使其听起来简单，它用于从外部隐藏内部表示或对象的状态。

Let’s say we create another Movie object, and want to console log a description. Name and director are inaccessible outside of the scope. Datas are hidden, encapsulated inside Movie.

假设我们创建了另一个Movie对象，并希望控制台记录描述。 在此范围之外无法访问姓名和董事。 数据被隐藏并封装在Movie中。

https://gist.github.com/GAierken/57445f0072b33ae9891dd9a39d4d3b7e https://gist.github.com/GAierken/57445f0072b33ae9891dd9a39d4d3b7e

抽象化 (Abstraction)

Abstraction is a way of hiding the implementation details and showing only the functionality to the users. In other words, it ignores the irrelevant details and shows only the required one. In the following example, we set name and director as private variables and description as a private method. Class methods can invoke private methods inside the class scope, but the implementation of the details is not shown when we call on the “titanic“ instance.

抽象是一种隐藏实现细节并仅向用户显示功能的方法。 换句话说，它忽略了无关的细节，只显示了所需的细节。 在下面的示例中，我们将name和Director设置为私有变量，并将description设置为私有方法。 类方法可以在类范围内调用私有方法，但是当我们调用“ titanic”实例时，未显示详细信息的实现。

https://gist.github.com/GAierken/78d266500f9a4f860584c4d574d8cbd3.js https://gist.github.com/GAierken/78d266500f9a4f860584c4d574d8cbd3.js

遗产 (Inheritance)

In the classical inheritance, methods from base class (parent class) can be copied into derived class (child class). In JS, inheritance is supported by using prototype object. This allows developers to reuse the common logic while still maintaining a unique hierarchy. With “extends”, the Employee class inherits the constructor and toString method from Person class.

在经典继承中，可以将基类(父类)中的方法复制到派生类(子类)中。 在JS中，通过使用原型对象支持继承。 这使开发人员可以重用通用逻辑，同时仍保持唯一的层次结构。 通过“扩展”，Employee类从Person类继承构造函数和toString方法。

https://gist.github.com/GAierken/240714c249517994e92f93c7d01e3b1a https://gist.github.com/GAierken/240714c249517994e92f93c7d01e3b1a

多态性 (Polymorphism)

As shown in the name: “poly” = “many” and “morphism” = “form”, polymorphism provides a way to perform a single action in many forms. The program will determine which meaning or usage is necessary for each execution of that object, cutting down the need to duplicate code. In the following example, all movies have same function with different forms.

如名称中所示：“ poly” =“许多”和“ morphism” =“ form”，多态性提供了一种以多种形式执行单个动作的方法。 该程序将确定该对象每次执行所需的含义或用法，从而减少了重复代码的需要。 在以下示例中，所有电影都具有相同的功能，但格式不同。

https://gist.github.com/GAierken/5c69346d0dd6fc00784ce38d594d18c4 https://gist.github.com/GAierken/5c69346d0dd6fc00784ce38d594d18c4

These are the basic concepts and examples of OOP in JavaScript. I hope this helps you to understand the basics of OOP. ;)

这些是JavaScript中OOP的基本概念和示例。 希望这有助于您了解OOP的基础知识。 ;)

资源资源 (Resources)

普通英语JavaScript (JavaScript In Plain English)

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！

翻译自: https://medium.com/javascript-in-plain-english/object-oriented-programming-in-javascript-688c13b988a1