[JavaScript] 您需要的 7 个 OOP 基础知识！

面向对象编程是编程中最流行的方法之一。在面向对象编程出现之前，指令列表会被逐一执行。但在面向对象编程中，我们处理的是对象以及这些对象之间的交互方式。

JavaScript 支持面向对象编程，但支持方式与其他 OOP 语言（C++、PHP、Java 等）不同。

JavaScript 与其他语言的主要区别在于，JavaScript 中没有类的概念，而类对于创建对象至关重要。不过，我们可以通过一些方法在 JavaScript 中模拟类的概念。另一个重要区别是数据隐藏。JavaScript 中没有像 public、private 和 protected 这样的访问说明符，但我们可以使用函数中的变量作用域来模拟这个概念。

面向对象编程概念

1）对象
2）类
3）构造函数
4）继承
5）封装
6）抽象
7）多态性

准备工作区

创建一个新文件oops.html并写入以下代码。我们将所有 JavaScript 代码都写入此文件。

<html>
  <head>
    <title>[JavaScript] 7 OOP fundamentals you will need!</title>
  </head>
  <body>
    <script type="text/javascript">
      //Write your code here.....
    </script>
  </body>
</html>

1）对象

任何实时实体都被视为一个对象。每个对象都具有一些属性和功能。例如，假设一个人是一个对象，那么他将具有姓名、年龄等属性，以及行走、说话、吃饭、思考等功能。现在让我们看看如何在 JavaScript 中创建对象。如前所述，在 JavaScript 中创建对象的方法有很多，例如：

//1)Creating Object through literal
var obj = {};
//2)Creating with Object.create
var obj = Object.create(null);
//3)Creating using new keyword
function Person() {}
var obj = new Person();

我们可以使用上述任何一种方式来创建对象。

2）类

正如我之前所说，JavaScript 中没有类，因为它是基于原型的语言。但我们可以使用 JavaScript 函数来模拟类的概念。

function Person() {
  //Properties
  this.name = "Ben";
  this.age = "18";
  //functions
  this.sayHi = function() {
    return this.name + " Says Hi";
  };
}
//Creating person instance
var p = new Person();
alert(p.sayHi());

3）构造函数

实际上，构造函数是类中的一个概念。构造函数用于在使用 new 运算符创建对象时为类的属性赋值。在上面的代码中，我们使用 name 和 age 作为Person 类的属性，现在我们将在为Person 类创建新对象时赋值，如下所示。

function Person(name, age) {
  //Assigning values through constructor
  this.name = name;
  this.age = age;
  //functions
  this.sayHi = function() {
    return this.name + " Says Hi";
  };
}
//Creating person instance
var p = new Person("Ben", 18);
alert(p.sayHi());
//Creating Second person instance
var p = new Person("Mel", 21);
alert(p.sayHi());

4）继承

继承是将一个类的属性和功能传递给另一个类的过程。例如，我们来考虑Student一个类，其中 Student 类也拥有 Person 类中用到的 name 和 age 属性。因此，获取 Person 类的属性比重新创建这些属性要好得多。现在，让我们看看如何在 JavaScript 中实现继承的概念。

function Student() {}
//1)Prototype based Inhertance
Student.prototype = new Person();
//2)Inhertance throught Object.create
Student.prototype = Object.create(Person);
var stobj = new Student();
alert(stobj.sayHi());

我们可以通过以上两种方式进行继承。

5）封装

在深入探讨封装和抽象之前，我们首先需要了解什么是数据隐藏，以及如何在 JavaScript 中实现它。日期隐藏是指保护数据不被作用域外访问。例如，在 Person 类中，我们有一些应该受到保护的出生日期 (DOB) 属性。让我们看看如何实现。

function Person() {
  //this is private variable
  var dob = "17/06/2002";
  //public properties and functions
  return {
    age: "18",
    name: "Ben",
    getDob: function() {
      return dob;
    }
  };
}
var pobj = new Person();
//this will get undefined
//because it is private to Person
console.log(pobj.dob);
//Will get dob value we using public
//funtion to get private data
console.log(pobj.getDob());

Wrapping up of public and private data into a single data unit is called Encapsulation. The above example is the one that best suites Encapsulation.

6) Abstraction

Abstraction means hiding the inner implementation details and showing only outer details. To understand Abstraction we need to understand Abstract and Interface concepts from Java. But we don’t have any direct Abstract or Interface in JS. Ok! now in order to understand abstraction in JavaScript lets takes an example from JavaScript library Jquery. In Jquery we will use

$("#ele");

to select select an element with id ele on a web page. Actually this code calls negative JavaScript code

document.getElementById("ele");

But we don’t need to know that we can happy use the $("#ele") without knowing the inner details of the implementation.

7) Polymorphism

The word Polymorphism in OOPs means having more than one form. In JavaScript an Object, Property, Method can have more than one form. Polymorphism is a very cool feature for dynamic binding or late binding.

function Person() {
  this.sayHI = function() {};
}
//This will create Student Class
function Student() {}
Student.prototype = new Person();
Student.prototype.sayHI = function(l) {
  return "Hi! I am a Student";
};
//This will create Teacher Object
function Teacher() {}
Teacher.prototype = new Person();
Teacher.prototype.sayHI = function() {
  return "Hi! I am a Teacher";
};
var sObj = new Student();
//This will check if the student
//object is instance of Person or not
//if not it won't execute our alert code.
if (sObj instanceof Person) {
  alert("Hurry! JavaScript supports OOps");
}

Conclusion

JavaScript supports Object Oriented Programming(OOP)Concepts. But it may not be the direct way. We need to create some simulation for some concepts.

文章来源：https://dev.to/yumatsushima07/javascript-7-oop-fundamentals-you-will-need-4hk8