层层嵌套的 JS 对象，和类方法有什么联系？

在学习了基础的 JS 语法之后，其中一种最基础，也是最重要的编程思想就是“面向对象”。js 中的面向对象编程是利用“类”的方式实现的。本文将以响应式数据的类结构实例，带你了解 JS 中的类/接口/继承的使用。

响应式数据

响应式数据实现

一种基于 JS 对象嵌套的“响应式”数据的简单实现

基于 JS 对象的“响应式”数据在开发中是一种被广泛采用的机制。

const data = {
  firstName: '张',
  lastName: '三',
  age: 18,
  gender: '男',
  getAddress: function () {
    return '北京市朝阳区'
  },
  print: function () {
    console.log(this.firstName, this.lastName, this.age, this.gender, this.getAddress())
  }
}

这是一种简单的对象结构。这种基于 JS 对象的嵌套方式能很好地实现“响应式”数据，但是如果对象嵌套层次过多，就容易出现难以维护和调用函数的方法等问题。

如何解决 JS 对象嵌套层次过多带来的问题

解决这个问题的一个办法是通过类（class）来定义一个对象的结构，使得我们可以通过类的实例化来创建对象，这样就可以避免对象嵌套层次过多的问题。

class Person {
  constructor(firstName, lastName, age, gender) {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
    this.gender = gender
  }

  getAddress() {
    return '北京市朝阳区'
  }

  print() {
    console.log(this.firstName, this.lastName, this.age, this.gender, this.getAddress())
  }
}

const data = new Person('张', '三', 18, '男')
data.print()

类定义了对象的结构，并提供了实例化对象的方法，这样就可以通过类的实例化来创建对象。

JS 的面向对象编程方法

类

定义类

在 JS 中，用 class 来定义类。类定义了对象的结构，并提供了实例化对象的方法。

class Person {
  constructor(firstName, lastName, age, gender) {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
    this.gender = gender
  }

  getAddress() {
    return '北京市朝阳区'
  }

  print() {
    console.log(this.firstName, this.lastName, this.age, this.gender, this.getAddress())
  }
}

实例化对象

通过类的实例化来创建对象。

const data = new Person('张', '三', 18, '男')

接口

定义接口

在 JS 中，用 interface 关键字来定义接口。接口定义了对象的行为，但没有实现这些行为。

interface IPerson {
  firstName: string
  lastName: string
  age: number
  gender: string
  getAddress(): string
  print(): void
}

实现接口

类可以实现接口。类实现接口时，必须实现接口中定义的所有行为。

class Person implements IPerson {
  constructor(firstName, lastName, age, gender) {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
    this.gender = gender
  }

  getAddress() {
    return '北京市朝阳区'
  }

  print() {
    console.log(this.firstName, this.lastName, this.age, this.gender, this.getAddress())
  }
}

继承

定义继承

在 JS 中，用 extends 关键字来定义继承。继承允许类从另一个类继承属性和行为。

class Student extends Person {
  constructor(firstName, lastName, age, gender, school) {
    super(firstName, lastName, age, gender)
    this.school = school
  }

  getSchool() {
    return this.school
  }
}

实例化继承类

通过继承类的实例化来创建继承类对象。

const student = new Student('张', '三', 18, '男', '清华大学')

总结

JS 的面向对象编程方法主要包括类、接口和继承。类定义了对象的结构，并提供了实例化对象的方法。接口定义了对象的行为，但没有实现这些行为。类可以实现接口。继承允许类从另一个类继承属性和行为。