JavaScript基础知识系列：面向对象的编程

JavaScript Basics is a series that explore some core concepts that every frontend software engineer should understand. Those concepts are not only important for success in job interviews but also for a career as a developer.

“ JavaScript基础知识”系列探讨了每个前端软件工程师都应理解的一些核心概念。这些概念不仅对于求职面试的成功至关重要，而且对于开发人员的职业也很重要。

Object-oriented programming (OOP) is one of the many programming paradigms used in the world of programming languages. Its ability to capture and represent the world in an intuitive way has earned it a great deal of popularity, to the extent that most modern languages, such as Java, JavaScript, Python, provide some level of support for it. Let’s jump right in and learn more about it using JavaScript! :)

面向对象编程(OOP)是编程语言领域中使用的众多编程范例之一。它以直观的方式捕获和表示世界的能力赢得了极大的欢迎，在某种程度上，大多数现代语言(例如Java，JavaScript，Python)为此提供了一定程度的支持。让我们直接进入并使用JavaScript进一步了解它！ :)

Object-oriented programming is the process of using ‘objects’ as the basis for building applications. OOP aims to describe real-life objects, like a car, house, human, or cat, using 4 main concepts:

面向对象的编程是使用“对象”作为构建应用程序基础的过程。 OOP旨在使用以下4个主要概念来描述现实生活中的对象，例如汽车，房屋，人或猫：

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

Encapsulation

封装形式

It’s the fact of bundling all the contents of the object into a ‘capsule’ that is referred to as a class. The class contains variables and functions, called methods, that allow it to perform specific tasks. You can think of it as a toolbox; the toolbox allows you to put all related tools in one place. Of course, you wouldn’t place your toothbrush in there, right? Only household tools are supposed to go in that box. For example, you could have a Car class that has a variable for the brand name. In JavaScript, classes are defined using the following notation:

这是将对象的所有内容捆绑到称为“ 类 ”的“胶囊”中的事实。该类包含称为方法的变量和函数，使它们可以执行特定任务。您可以将其视为工具箱。该工具箱使您可以将所有相关工具放在一个地方 。当然，您不会将牙刷放在那里，对吗？该盒子中只能放入家用工具。例如，您可能有一个带有品牌变量的Car类。在JavaScript中，使用以下符号定义类：

class ClassName {    //Definition goes here}

The convention is to use an uppercase letter for the class name and camel-casing if it consists of multiple words. For instance, ‘car show’ would become class CarShow. Let’s go ahead and define a Car class:

约定是对类名使用大写字母，如果由多个单词组成，则使用骆驼式大写字母。例如，“ 汽车展”将变成class CarShow 。让我们继续定义Car类：

class Car {}

This class will allow us to create copies of it later, called instances of the class. When defining a class, you want to use something called a constructor to assign values to its instances. In our case, we can use a constructor to assign a brand name to the car object.

此类将使我们以后可以创建其副本，称为实例班上的。在定义一个类时，您想使用一种称为构造函数的东西来为其实例分配值。在我们的例子中，我们可以使用构造函数为汽车对象分配品牌名称。

class Car {        constructor(brand) {             this.carname = brand;       }}

The keyword this represents an instance of the car and ‘carname’ is called a property of the car. Now, that we have defined our Car class, we can create an instance (a copy) of it and give it a name.

关键字this代表汽车的实例，“ carname”被称为汽车的属性。现在，我们已经定义了Car类，我们可以为其创建一个实例(副本)并为其命名。

let myCar = new Car("Toyota");   //Create a Car instanceconsole.log(myCar.carname);      //Output it to the console

Output: Toyota

输出： Toyota

Encapsulation enables us to create a single Car class with any number of properties and make as many copies of it as we’d like! Isn’t that amazing! Whenever we need to change a property and have it affect our instances, we can simply change it in the class definition itself without having to change every single one of them! Amazing!

封装使我们能够创建具有任意数量的属性的单个Car类，并根据需要复制任意数量的Car类！那不是太神奇了！每当我们需要更改一个属性并使它影响我们的实例时，我们都可以在类定义本身中简单地更改它，而不必更改每个属性！惊人！

We can further enhance our class by giving it a function that represents the sound it makes.

我们可以通过给它一个表示其声音的函数来进一步增强我们的类。

class Car {    constructor(brand) {           this.carname = brand;     }     sound(){            return "Vroom!!!"     }}

We can then log it out: console.log(myCar.sound())

然后我们可以注销它： console.log(myCar.sound())

Output: Vroom!!!

输出： Vroom!!!

Awesome!

JavaScript基础知识系列：面向对象的编程相关推荐

javascript基础知识系列：DOM学习
访问节点: 短距离的旅行: parentNode:获得父节点. firstChild:获得第一个子节点. lastChild:获得子节点的最后一个. 访问节点的文本: var x=[a.paragr ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
网页游戏开发基础——JavaScript基础知识
对于初学编程的朋友来说,这篇文章有点长,而且会有点难懂.但是请不要放弃,我尽量以通俗的语言解释相关的编程概念,这里只讲解编写一个游戏需要的相关编程概念(如需要会在后面的文章中随时补充相关概念),对其余 ...
javascript基础知识大全
发些javascript基础知识,便于大家学习,也便于我自己查看 1.javascript的数组API [js] <pre>//定义数组 var pageIds = new Arr ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
线程基础知识系列(三）线程的同步
本文是系列的第三篇,前面2篇,主要是针对单个线程如何管理,启动等,没有过多涉及多个线程是如何协同工作的. 线程基础知识系列(二)线程的管理 :线程的状态,控制,休眠,Interrupt,yield等 ...
c#物联网_C# 基础知识系列- 16 开发工具篇
0. 前言这是C# 基础知识系列的最后一个内容讲解篇,下一篇是基础知识-实战篇.这一篇主要讲解一下C#程序的结构和主要编程工具. 1. 工具工欲善其事必先利其器,在实际动手之前我们先来看看想要编写 ...
JavaScript 基础知识
JavaScript 基础知识文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
JavaSE基础知识(五)--面向对象代码实现初步(实现一个简单的类类型代码)
Java SE 是什么,包括哪些内容(五)? 本文内容参考自Java8标准一.面向对象(代码实现): 首先,在这里我需要说明一个根本性的问题:实际上,面向对象编程包括了两部分,一个是你的编程思想,一 ...

JavaScript基础知识系列：面向对象的编程

JavaScript基础知识系列：面向对象的编程相关推荐

最新文章

热门文章