前端学习笔记：JavaScript类和对象

黑马Pink老师的javaScript进阶面向对象ES6教程：
https://www.bilibili.com/video/BV1Kt411w7MP?p=1

本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。

1. 面向对象编程

1.1 两大编程思想

• 面向过程
• 面向对象

1.2 面向过程编程 POP(Process oriented programming)

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

将大象装进冰箱：

1. 打开冰箱门
2. 把大象装进去
3. 关上冰箱门

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。

1.3 面向对象编程 OOP(Object Oriented Programming)

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

将大象装进冰箱：

1. 大象对象

   • 进去

2. 冰箱对象

   • 打开
   • 关闭

3. 使用大象和冰箱的功能

面向对象是以对象功能来划分问题，而不是步骤。

面向对象的特性：

• 封装性
• 封装性
• 多态性

2. ES6中的类和对象

面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物。但是事物分为具体的事物和抽象的事物。

面向对象的思维特点:

1. 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）
2. 对类进行实例化，获取类的对象

面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。

2.1 对象

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

2.2 类 class

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。

类抽象了对象的公共部分，它泛指某一大类（class）

对象特指某一个，通过类实例化一个具体的对象。

2.3 创建类

// 语法
class name {
   
    // class body
}
// 创建实例
var xx = new name();

注：类必须使用new实例化对象

2.4 类中的constructor构造函数

constructor() 方法是类的构造函数（默认方法），用于传递参数，同时返回实例对象。通过 new 命令生成对象实例时，自动调用该方法。如果没有显式定义，类内部会自动给我们创建一个constructor() 。

// 语法
class Person {
   
  constructor(name, age) {
      // constructor 构造方法或者构造函数
      this.name = name;
      this.age = age;
    }
}    
// 创建实例 
var ldh = new Person('刘德华', 18); 
var zxy = new Person('张学友', 20); 
console.log(ldh);
console.log(zxy);

2.5 类添加方法

// 语法
class Person {
   
  constructor(name,age) {
      // constructor 构造器或者构造函数
      this.name = name;
      this.age = age;
    }
   say() {
   
      console.log(this.name + '你好');
   }
} 
// 创建实例
var ldh = new Person('刘德华', 18); 
ldh.say();

注：方法之间不能加逗号分隔，同时不需要添加function关键字。

3. 类的继承

3.1继承

继承：子类可以继承父类的一些属性和方法。

//语法
class Father{
   
    // 父类
}
class Son extends Father {
   
    // 子类继承父类
}

实例：

class Father {
   
      constructor(surname) {
   
        this.surname= surname;
      }
      say() {
   
        console.log('你的姓是' + this.surname);
       }
}
class Son extends Father{
     // 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();      

3.2 super 关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。

案例：调用父类的构造函数

class Person {
      // 父类
     constructor(surname){
   
         this.surname = surname;
     }
} 
class  Student extends Person