详解js中class的多种函数封装方法

下面是“详解js中class的多种函数封装方法”的完整攻略。

什么是类（class）？

类是JavaScript中的一种面向对象的编程范式，是ES6中增加的新特性，能够更好地封装数据和行为。它是复杂对象的一种抽象描述，用于描述具有相同特征（属性）和行为的对象的集合。

类的多种函数封装方法

1. 构造函数封装

通过构造函数实现类的定义和方法的调用。构造函数不需要返回值，通过 this 关键字来指向当前实例，所以方法也都放在构造函数中。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

let p = new Person("Tom", 18);
p.sayHello(); // Hello, my name is Tom.

构造函数封装便于初学者理解，但随着类的复杂度增加，构造函数中的方法会越来越多，因此不是很推荐使用此种封装方法。

2. prototype原型链

JavaScript中的每个函数都有一个prototype属性，prototype就是原型。我们可以往原型中添加属性和方法。通过使用prototype，共享相同的方法，实现类的封装。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
}

let p = new Person("Tom", 18);
p.sayHello(); // Hello, my name is Tom.

3. 利用ES6的class语法糖

使用ES6的class关键字实现类的定义和方法的调用。class中封装了一组属性和方法，更加直观简洁。同时，支持使用 extends 继承其他类。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

let p = new Person("Tom", 18);
p.sayHello(); // Hello, my name is Tom.

示例说明

示例一：定义一个名为Rectangle的类，实现计算矩形面积和周长的方法

采用ES6的class语法糖：

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }

  getPerimeter() {
    return 2 * (this.width + this.height);
  }
}

let r = new Rectangle(5, 6);
console.log(r.getArea()); // 30
console.log(r.getPerimeter()); // 22

示例二：定义一个名为Person的类，并且该类能够根据姓名、性别、年龄等属性生成自我介绍

采用prototype原型链：

function Person(name, gender, age) {
  this.name = name;
  this.gender = gender;
  this.age = age;
}

Person.prototype.introduce = function() {
  console.log(`My name is ${this.name}, I'm a ${this.gender}, and I'm ${this.age} years old.`);
}

let p = new Person("Tom", "male", 18);
p.introduce(); // My name is Tom, I'm a male, and I'm 18 years old.

以上两种示例都可以使用不同的封装方法实现，并且可以根据需求选取最适合的封装方法。