（day 17）JavaScript学习笔记（面向对象）

概述

        这是我的学习笔记，记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript，那么这一系列的学习笔记可能会对你有所帮助。

        今天学习面向对象的内容，主要是定义class、成员方法、实现继承、成员变量、静态成员等。

1.定义class

        在ES6（ECMAScript 2015）中，JavaScript引入了class关键字，它提供了一种更简洁、更易于理解的方式来定义和使用面向对象编程中的类。尽管JavaScript中的class在底层仍然基于原型链，但使用class语法可以让我们以更传统的方式组织代码。

        如下代码是定义类，并初始化实例：

class Students {
  //下面是定义构造方法，与前面学过的定义构造函数是一样的。
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}
//初始化对象一个实例，使用new关键字定义实例变量
var stu1 = new Students(1001, "夏雪");
console.log(stu1);

        上面我们log得到的是如下内容：

        从上面可以看到他的原型是Students类。

2.成员方法

         在类里定义方法很简单，不需要写function关键字，直接写方法名，后面就跟正常的函数写法一样，它也可以用this引用自身的属性，如下代码示例：

class StudentsA {
  //下面是定义构造方法，与前面学过的定义构造函数是一样的。
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }

  //定义成员方法
  Eat() {
    console.log(this.name + "吃饭");
  }
}
var stu2 = new StudentsA(1002, "夏雨");
stu2.Eat(); // 输出：夏雨吃饭
console.log(stu2.name);

        类中的方法也有stters和getters，如下代码示例：

class StudentsB {
  //下面是定义构造方法，与前面学过的定义构造函数是一样的。
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }

  //定义成员方法
  Eat() {
    console.log(this.name + "吃饭");
  }

  //定义getters方法
  get infor() {
    return this.id + ", " + this.name;
  }

  //定义setters方法
  set infor(info) {
    let [id, name] = info.split(",");
    this.id = id;
    this.name = name;
  }
}
var stu3 = new StudentsB(1003, "夏冰雹");
console.log(stu3.infor); //输出：1003, 夏冰雹
//重新设置id和name
stu3.infor = "1003,刘星";
console.log(stu3.infor); //输出：1003, 刘星
console.log(stu3.id, stu3.name); //输出:1003 刘星

3.实现继承

        在面向对象中实现继承通过关键字extends来实现，子类可以继承父类所有的属性和方法。如下代码示意：

class Monitor extends StudentsB {}
//Monitor是StudentsB的子类，StudentsB是Monitor的父类，一个子类只能有一个父类。
var stu5 = new Monitor(1005, "夏天");
console.log(stu5);

        运行结果如下：

        从原型链的关系上可以看出，Monitor是StudentsB的子类，StudentsB是Monitor的父类，一个子类只能有一个父类。我们再调用一下方法，如下代码示例，能够正常调用，说明它继承了父类的 方法。

stu5.Eat(); // 输出：夏天吃饭

         我们给对象添加属性，可以使用原始的方式，如下代码示例：

stu5.position = "班长";
console.log(stu5.position); // 输出：班长

        但是这样不符合面向对象的规范，我们可以在定义子类的时候在构造方法里或成员方法里用super关键字继承父类的属性及方法，如下代码示例：

//用super关键字
class MonitorA extends StudentsB {
  constructor(id, name, position) {
    super(id, name); //用super关键字继承父类属性
    this.position = position;
  }
  Eat() {
    super.Eat(); //用super关键字继承父类方法
    console.log("这是额外的信息"); //增加新的内容
  }
}

var stu6 = new MonitorA(1006, "夏季", "班长");
console.log(stu6);//MonitorA {id: 1006, name: '夏季', position: '班长'}
stu6.Eat(); // 输出：夏季吃饭  这是额外的信息

4.成员变量

        成员变量是指在类里面定义的变量，如下代码示意，height便是成员变量。

class Student {
  height = ""; //height是成员变量，它不写在构造方法中
}

var stu7 = new Student();
console.log(stu7); //Student {height: ''}

         成员变量与构造函数的区别是，构造函可以添加一下初始化逻辑，如下代码示意：

class StudentA {
  constructor(name) {
    this.name = "学生姓名：" + name; //这里添加了一些初始化逻辑
  }
}

var stu8 = new StudentA("夏夏");
console.log(stu8.name); //输出：学生姓名：夏夏

         成员变量只能在初始化的给一个值，但是放在构造方法中就可以方便操作，而成员变量的代码确实比较简单，这个还是根据实际需求来使用吧。

5.静态成员

        静态成员变量是class级别的，它是用static修饰的，只能通过类名来访问，用实例无法访问，如下代码示意，

class Page {
  static count = 0;
}

console.log(Page.count); //可以访问到，输出：0

Page.count++;
console.log(Page.count); //可以访问到，输出：1

var page = new Page(); //实例化类
console.log(page.count); //无法访问，输出：undefined

        静态成员方法与静态成员变量类似，如下代码示意：

class PageA {
  //静态成员变量
  static count = 0;
  //静态成员方法
  static fun() {
    PageA.count++;
  }
}
console.log(PageA.count); //输出：0
PageA.fun(); //调用方法，自增1；
console.log(PageA.count); //输出：1

        使用静态成员变量和方法有很多的好处：

        ①代码复用和逻辑封装：静态成员变量和方法属于类本身，而不是类的实例。这意味着我们可以在不创建类实例的情况下直接通过类名来访问它们。这允许我们将一些与类本身相关但不依赖于特定实例的逻辑和数据封装在类中，从而实现代码的复用和逻辑封装。

        ②逻辑清晰和易于维护：静态成员变量和方法通过将某些逻辑和数据定义为静态的，我们可以更清晰地表示它们与类本身的关联，而不是与类的某个特定实例的关联。这有助于使代码结构更清晰，更易于理解和维护。

        ③节省资源：由于静态成员变量和方法属于类本身，它们只会在内存中存储一份，而不是每个实例都存储一份。这有助于节省内存资源，特别是在创建大量类实例的情况下。

        ④避免实例间的数据共享问题：在JavaScript中，如果不使用静态成员变量，而是将变量定义在类的方法中或使用实例属性，那么每个类的实例都会有自己的变量副本。这可能导致在多个实例之间共享数据时出现问题。通过使用静态成员变量，你可以确保所有实例共享相同的数据，避免了这类问题。

        ⑤便于组织工具函数：有时候，我们需要在类中定义一些与类实例无关的工具函数。这些函数通常不需要访问或修改实例的状态，因此将它们定义为静态方法是非常合适的。这样可以使类的结构更清晰，同时也便于其他代码调用这些工具函数。

        注意：静态成员方法和静态成员变量是ES2015（也称为ES6）中引入的类特性。要确保浏览器支持这些特性，你需要确保浏览器版本至少是支持ES6的。

        以上便是今天的学习内容，如果对你有所帮助，请点个赞再走吧。