52 – 类的继承 & 53 – 什么是 Mixins ?

原文地址：https://dev.to/bhagatparwinder/class-inheritance-l3l

这篇文章将对类的继承进行大概得介绍。

我们使用 new 关键字来创建类的实例。若我们想继承基础类，我们可以通过 extends 关键字。

class Person {
    name;
    age;

    constructor(name) {
        this.name = name;
        this.age = 33;
    }
    getName() {
        return this.name;
    }
}

// creating new instance of a class Person
const person = new Person("Parwinder");
console.log(person.getName()); // Parwinder

我们使用 extend 来继承 Person 类：

class Person {
    name;
    age;

    constructor(name) {
        this.name = name;
        this.age = 33;
    }
    getName() {
        return this.name;
    }
}

const person = new Person("Parwinder");
console.log(person.getName()); // Parwinder

class Female extends Person {
    gender;
    constructor(name) {
        super(name);
        this.gender = "Female";
    }
}

const female = new Female("Lauren");

console.log(female.getName()); // Lauren
console.log(female instanceof Female); // true
console.log(female instanceof Person); // true

super 关键字让我们可以使用父类的构造函数，我们通过可以使用 super 来调用父类/基类的方法。

ES6 中的类支持：

• 原型继承
• super 关键字
• 实例和静态方法

介绍

从我博客中的所有文章里，我们已经意识到 JavaScript 中原型继承工作的很好，这是我们早已知道。可是每个对象只有一个 [[Prototype]]，意味着一个对象只能从另一个对象继承，类也是一样只能继承一个其他类。JavaScript 中不支持多继承。

mixin 是一个类且具有能使我们从其它类获取所需而不需要继承 mixin 类的方法。这就是向对象添加属性而不要继承。

理论上，它应该像这样：

• 类的继承

class B extends A {}

• 通过 mixin 继承

class B extends A with M1 {}

• 从多个 mixins 继承

class B extends A with M1, M2, M3 {}

mixins的完整秘诀在于Object.assign!

实现

对象

const employee = {
    name: "John Smith",
    age: 30,
    gender: "male"
}

const payroll = {
    duration: "monthly",
    amount: 7000,
    currency: "dollars"
}

const benefits = {
    retirement: true,
    savings: true,
    health: true,
    dental: false
}

const employeeProfile = Object.assign({}, employee, payroll, benefits);

console.log(employeeProfile);

控制台将会输出类似下面的内容：

{ name: 'John Smith',
  age: 30,
  gender: 'male',
  duration: 'monthly',
  amount: 7000,
  currency: 'dollars',
  retirement: true,
  savings: true,
  health: true,
  dental: false 
}

这就是 mixin 的作用，它使我们能聚合多个不同对象的属性到一个对象上。Object.assign 从一个或多个对象复制属性到目标对象上，第一个参数就是模板对象，后面的都是源对象。

类

let employeeDetails = {
    returnName() {
        console.log(`The employee is ${this.name}`);
    },
    subscribesToDental () {
        console.log(`Employee ${this.name} does ${(this.dental) ? "" : "not "}subscribe to dental benefits`);
    }
};

class Employee {
    name;
    dental;
    constructor(name, dental) {
        this.name = name;
        this.dental = dental;
    }
}

Object.assign(Employee.prototype, employeeDetails);

new Employee("Parwinder", false).returnName();
// The employee is Parwinder
new Employee("Parwinder", false).subscribesToDental();
// Employee Parwinder does not subscribe to dental benefits
new Employee("Robert", true).subscribesToDental();
// Employee Robert does subscribe to dental benefits

现在，JavaScript 支持 super 关键字了。由于 super 是词法绑定所以 mixin 无法支持。