JavaScript中的面向对象编程

Object-Oriented Programming is a popular style of programming that has taken root in JavaScript since the beginning.

面向对象编程是一种流行的编程风格，自一开始就扎根于JavaScript。

It's so deeply rooted in JavaScript that many of JavaScript's native functions and methods are written in the Object Oriented style; you'll also find many popular libraries written in the Object Oriented style as well.

它深深扎根于JavaScript，以至于许多JavaScript的本机函数和方法都是以面向对象的风格编写的。 您还会发现许多流行的以面向对象风格编写的库。

If you already have prior experience with Object Oriented Programming in another language, please put aside the knowledge you know, and read through the entire module with a beginner's mind.

如果您已经具有使用另一种语言的面向对象编程的经验，请撇开您所了解的知识，并以初学者的心态通读整个模块。

This is because Object Oriented Programming in JavaScript is very different from Object-Oriented Programming in other languages. If you hold on to your current ideas, you might make Object Oriented Programming in JavaScript exponentially more difficult than it is.

这是因为JavaScript中的面向对象编程与其他语言中的面向对象编程大不相同。 如果坚持当前的想法，可能会使JavaScript中的面向对象编程比现在困难得多。

Now, let's begin by finding out what Object Oriented Programming is about.

现在，让我们开始了解什么是面向对象的编程。

Object-Oriented Programming is about two things:

面向对象编程涉及两件事：

1. Creating individual objects from a common object
   从公共对象创建单个对象
2. Inheritance
   遗产

For this article, we'll only cover the first part. We'll look at inheritance in another article.

对于本文，我们将仅介绍第一部分。 我们将在另一篇文章中讨论继承。

从公共对象创建对象 ( Creating Objects From A Common Object )

You know that objects in JavaScript have properties and methods. These objects can resemble real-life things (even people!).

您知道JavaScript中的对象具有属性和方法。 这些对象可能类似于现实生活中的事物（甚至是人！）。

Let's say you're trying to construct a Human object in JavaScript. A human has a firstName, lastName and an age. You could add these attributes as properties in JavaScript.

假设您正在尝试使用JavaScript构造Human对象。 一个人有一个firstName ，一个lastName和一个age 。 您可以将这些属性添加为JavaScript中的属性。

In addition to having names and ages, humans can also say their name. You can write a sayName function as a method in the human object as well.

除了具有名称和年龄之外，人类还可以说出自己的名字。 您也可以在human对象sayName函数编写为方法。

const human = {
  firstName: 'Zell'
  lastName: 'Liew',
  age: 29,
  sayName () {
    console.log(`I am Zell Liew`)
  }
}

human.sayName() // I am Zell Liew

Since humans are very similar to each other, you can also create another human object with the same properties (firstName, lastName, age ) and methods (sayName).

由于人类彼此非常相似，因此您还可以创建另一个具有相同属性（ firstName ， lastName ， age ）和方法（ sayName ）的人类对象。

Unfortunately, you can't call it human anymore because the human variable is taken up.

不幸的是，您无法再将其称为human ，因为human变量已被占用。

const human2 = {
  firstName: 'Vincy',
  lastName: 'Zhang',
  age: 28,
  sayName () {
    console.log(`I am Vincy Zhang`)
  }
}

Assuming you know Vincy, it's kinda weird to call her human2, right? You'll probably call her Vincy instead.

假设您了解Vincy，称她为human2 ，对吗？ 您可能会改称她为Vincy。

So, instead of naming our human objects human and human2, it makes more sense to call them Zell and Vincy.

因此， human2将我们的人类对象命名为human和human2 ， human2将它们命名为Zell和Vincy 。

const Zell = {
  firstName: 'Zell'
  lastName: 'Liew',
  age: 29,
  sayName () {
    console.log(`I am Zell Liew`)
  }
}

const Vincy = {
  firstName: 'Vincy',
  lastName: 'Zhang',
  age: 28,
  sayName () {
    console.log(`I am Vincy Zhang`)
  }
}

There we go, much better.

我们去了，更好。

Now, what if you need to create another human? You'll have to write the entire object from scratch, but that's a chore, right? You're copy-pasting so much code!

现在，如果您需要创建另一个human怎么办？ 您必须从头开始编写整个对象，但这很麻烦，对吗？ 您正在复制粘贴太多代码！

// Ugh, creating another human by writing a new object
const Nicolas = {
  firstName: 'Nicolas',
  lastName: 'Tze',
  age: 30,
  sayName () {
    console.log(`I am Nicolas Tze`)
  }
}

At this point, you'll notice that human are slightly different from each other—we have different names, and we're of different ages.

在这一点上，您会注意到人与人之间略有不同-我们有不同的名字，而且年龄也不同。

But we do have a common point—we can say our name.

但是我们确实有一个共同点-我们可以说出我们的名字。

Wouldn't it be nice if you could create a function (or something similar) that makes individuals?

如果您可以创建一个可以使个人产生作用的功能（或类似功能），那不是很好吗？

Turns out, you can! All you need to do is to construct a function that has a this keyword, and you can create individuals with a new keyword.

原来，你可以！ 您需要做的就是构造一个具有this关键字的函数，并且可以使用new关键字创建个人。

Here's what it looks like:

看起来是这样的：

function Human (firstName, lastName, age) {
  // Note: Don't worry about 'this' yet. You'll understand it later. Follow along for now.
  this.firstName = firstName
  this.lastName = lastName
  this.age = age

  this.sayName = function () {
    console.log(`I am ${firstName} ${lastName}`)
  }
}

// Creating a new person with the `new` keyword
const zell = new Human('Zell', 'Liew', 29)

If you console.log(zell), you'll see that he's a human with a firstName, a lastName, an age and he has the ability to sayName.

如果您console.log(zell) ，您会看到他是一个具有firstName ， lastName和age并且他具有sayName的能力。

The created human has firstName, lastName and age properties. It also has a sayName method.

From this point onwards, you can create any number of humans you want with the same syntax. Each person you create will retain their individuality, and they will all be able to say their name!

从现在开始，您可以使用相同的语法创建任意数量的人类。 您创建的每个人都会保留自己的个性，并且每个人都可以说出自己的名字！

const vincy = new Human('Vincy', 'Zhang', 28)
const nicolas = new Human('Nicolas', 'Tze', 30)

vincy.sayName() // I am Vincy Zhang
nicolas.sayName() // I am Nicolas Tze

Cool, isn't it?

不错，不是吗？

And that's what the object-construction part of Object Oriented Programming is in a nutshell—you construct a function (Human) that can create instances (people like zell, vincy and nicolas). Each instance you create needs to be able to contain individual data that are different from other instances.

这就是“面向对象编程”的对象构造部分的基本内容，即构造一个 可以创建实例 （诸如zell ， vincy和nicolas类的实例 ） 的函数 （ Human ）。 您创建的每个实例都必须能够包含与其他实例不同的单独数据。

The function you use to construct instances is called the constructor.

用于构造实例的函数称为构造函数 。

命名构造函数和实例 ( Naming constructors and instances )

In Object Oriented Programming, the first letter of the constructor is capitalized (Human), while each instance is written like a normal variable (zell, vincy, nicolas).

在面向对象编程中， 构造函数的第一个字母大写 （ Human ），而每个实例的写法均像普通变量 （ zell ， vincy ， nicolas ）。

This small differentiation instantly shows you the difference between constructors and instances in your code.

这种微小的区别立即向您显示了代码中的构造函数和实例之间的区别。

这是什么”？ ( What's "this"? )

this is a keyword in JavaScript. When it is used in a constructor, it refers to the instance that is created with the constructor.

this是JavaScript中的关键字。 在构造函数中使用它时，它指的是用构造函数创建的实例。

If you tried to console.log(this) in a constructor, you'd notice its the same as logging the instance itself.

如果尝试在构造函数中使用console.log(this) ，则会注意到其与记录实例本身相同。

function Human (firstName, lastName, age) {
  // Other properties and methods
  console.log(this)
}

const zell = new Human('Zell', 'Liew', 29)

this in a constructor points to the instance

this指向实例

this is a very important concept in Object Oriented Programming. So you need to be familiar with it. Here's an article that explains this in detail.

this是面向对象编程中非常重要的概念。 因此，您需要熟悉它。 这是一篇文章 ，详细解释了this 。

结语 ( Wrapping up )

One of the main parts of Object Oriented Programming is about creating instances from constructors. Each instance you create should retain its individuality, so they're different from other instances.

面向对象程序设计的主要部分之一是关于从构造器创建实例 。 您创建的每个实例都应保留其个性，因此它们与其他实例不同。

When you create a constructor, you should capitalize the first letter of its name (like Human) to differentiate it from instances (like zell).

创建构造函数时，应大写其名称的第一个字母（例如Human ）以将其与实例（例如zell ）区zell 。

If you loved this article, you'd love Learn JavaScript—a course that helps you learn to build real components from scratch with Javascript.

如果您喜欢本文，那么您会喜欢Learn JavaScript（学习JavaScript） ，该课程可帮助您学习使用Javascript从头开始构建实际组件。

翻译自: https://scotch.io/tutorials/object-oriented-programming-in-javascript