JS全解（二）JS的继承机制：构建原型链，解锁函数式多态性

2024-02-23 11:27:29

一、原型链：JS中独特的继承之道

在JavaScript世界中，没有严格意义上的"类"和"子类"，而是通过"原型链"的概念实现继承。简而言之，原型链是一条特殊的对象链接，允许一个对象访问另一个对象的属性和方法，从而实现继承行为。

二、构建原型链：从函数到对象

在JS中，函数不仅可以作为代码块执行，还可作为构造函数创建对象。

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

当使用 new 调用此构造函数时，它将创建一个新对象，该对象将继承 Person 函数的属性和方法。这种方式正是原型链发挥作用的场景。

三、原型链的妙用：多态性与代码复用

多态性是面向对象编程的一大特性，允许对象以统一的方式响应不同消息。在JS中，我们可以利用原型链实现多态性。例如：

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

Employee.prototype.getSalary = function() {
  return this.salary;
};

在这个例子中，Employee 函数继承了 Person 函数的属性和方法，同时添加了额外的属性和方法，如 salary 和 getSalary() 方法。通过这种方式，我们可以轻松地创建各种类型的对象，如 Manager 和 Salesperson，它们都继承自 Employee 函数，并具有各自的特性。

四、原型链的局限：理解与权衡

虽然原型链为JS带来了独特的多态性，但它也存在一些局限性。例如：

原型链可能会变得很长，难以维护。
更改原型链可能会对所有继承自该原型的对象产生影响。

五、ES6的革新：Class语法，更好的继承方式

ES6引入了一种新的class语法，提供了一种更接近传统面向对象语言的继承方式，使得代码更加易读和易维护。

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

  getName() {
    return this.name;
  }
}

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}