JS高级之面向对象的概念

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第四十七篇-《面向对象的概念》

写在前面

概念

面向对象编程的全称为Object Oriented Programming，简称为OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。

例如，对于猫这种常见对象来说，我们可以看到它们具有某些明确的特征（如颜色、名字、体型等），能执行某些动作（如喵喵叫、睡觉、躲起来、逃跑等）。在OOP语义中，这些对象特征都叫做属性，而那些动作则被称为方法。

面向对象编程可以看作是使用一系列对象相互协作的软件设计。面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性。凭借其对模块化的重视，面向对象的代码开发更简单，更容易理解。

面向对象编程的三个主要特征是：

• 封装：所谓封装就是按照要求使用并得到对应的结果，而不需要知道其真实的执行原理是怎么样的。封装主要用于阐述对象中所包含(或封装)的内容，它们通常由两部分组成:

  • 相关的数据(用于存储属性)
  • 基于这些数据所能做的事情

• 继承：继承通常是指类与类之间的关系。如果两个类都有相同的属性或方法，那么可以让一个类继承于另一个类，这样就不需要在前者再次定义同样的属性或方法。

  创建一个或多个类的专门门版本类方式称为继承（只支持单继承）。创建的专门版本的类通常叫做子类，另外的类通常叫做父类。

  在JavaScript中，继承通过赋予子类一个父类的实例并专门]化子类来实现。

• 多态：不同的对象可以定义具有相同名称的方法，方法是作用于所在的对象中。这种不同对象通过相同方法的调用实现各自行为的能力，被称之为多态。

所有的程序是由一定的属性和行为对象组成的，不同的对象的访问通过函数调用来完成，对象间所有的交流都是通过方法调用，通过对封装对象数据，提高复用率。

聚合

所谓的聚合，有的时候也叫组合，其实质上就是将现有的几个对象合并为一个新的对象的过程。总的来说，这个概念强调的就是将多个对象合而为一的能力。通过聚合这种方法，我们可以将一个问题分解为多个更小的问题。这样一来，就可以解决许多困难的问题。

例如，手机是一个非常复杂的对象，我们如果想要知道他启动时发生的全部事情是基本不可以能的，但是如果我们将问题的抽象降低到一定的级别，只关注它几个组件对象的初始化工作，例如屏幕对象、CPU对象、摄像头对象等等，我们就很容易深入了解这些子对象情况，然后再将这些部分的结果合并起来，之前那个复杂问题就迎刃而解了。

构造函数

概念

构造函数又称为构造器或对象模板，是对象中的一个方法，在实例化时构造器被调用。在JavaScript中函数就可以作为构造器使用，因此不需要特别地定义一个构造器方法。

语法结构如下：

function Person(){
  // 属性或者方法
}
var person = new Person();

• 这里的Person()并不是作为函数，而是构造函数。
• 创建person对象需要使用 new 关键字。

构造函数的属性和方法

构造函数的属性实际上就是对象的变量，构造函数的方法实际上就是构造函数的函数。一个对象可以包含多个属性和方法，定义构造函数的属性和方法 时使用this关键字。

语法结构如下：

function Person(){
  this.属性名 = 属性值;
  this.方法名 = function() {
      方法体
  }
}

this关键字：代指利用当前构造函数创建的对象。

创建对象示例代码如下：

function Person(name) {
  this.name = name
}
var person = new Person('一碗周')
console.log('姓名: ' + person.name) // 姓名: 一碗周

构造函数与函数的区别

两者的共同点：

1. 如果不看函数体的话，构造函数的和函数在定义上是没有区别的。
2. 构造函数也是一个函数，创建方式是一样的，不过构造函数习惯首字母大写。

两者的区别：

1. 调用方式不一样，作用也不一样。

   例如

   // * 调用函数 直接使用 Person()
   Person();
   // * 调用构造函数需要使用 new 关键字
   const person = new Person();
   

2. 构造函数内部含有this指针。

{完}

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

• 【建议收藏】总结了42种前端常用布局方案
• 关于v-model语法糖的知识点，这次应该说全了