深入浅出，揭开函数式与类式继承的神秘面纱

2023-07-19 07:46:54

函数式继承与类式继承：JavaScript中两种继承方式的全面解析

理解JavaScript中的继承

在JavaScript中，继承是创建新对象并使其继承自现有对象属性和方法的一种机制。通过继承，我们可以重用代码，促进代码可维护性，并建立清晰的对象层级结构。

函数式继承

函数式继承是一种传统而简单的继承方式。它通过构造函数来创建子对象，并通过原型链将子对象与父对象连接起来。子构造函数通过调用父构造函数来继承父属性，然后添加自己的特有属性。

代码示例：

// 父构造函数
function Phone(brand, model) {
  this.brand = brand;
  this.model = model;
}

// 子构造函数
function SmartPhone(brand, model, os) {
  // 调用父构造函数来初始化父属性
  Phone.call(this, brand, model);

  // 添加子属性
  this.os = os;
}

// 创建子对象
const iPhone = new SmartPhone("Apple", "iPhone 13", "iOS");

优点：

简单易懂
不需要理解类的概念

缺点：

子构造函数必须显式调用父构造函数，否则子对象无法继承父属性。
子对象无法访问父构造函数的私有属性和方法。
父构造函数的原型链被子构造函数污染，可能导致不必要的内存开销和性能问题。

类式继承

类式继承是一种更现代的继承方式，它借鉴了面向对象编程的思想。它通过class来定义类，并使用extends关键字来实现继承。子类通过extends关键字继承父类，并通过super关键字调用父类的构造函数来初始化父属性。

代码示例：

// 父类
class Phone {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
}

// 子类
class SmartPhone extends Phone {
  constructor(brand, model, os) {
    // 调用父类的构造函数来初始化父属性
    super(brand, model);

    // 添加子属性
    this.os = os;
  }
}

// 创建子类对象
const iPhone = new SmartPhone("Apple", "iPhone 13", "iOS");

优点：

语法更加清晰、简洁
避免了函数式继承中的一些缺陷
更好地支持私有属性和方法
不污染父构造函数的原型链

缺点：

语法更加复杂，需要掌握class和extends关键字的使用
无法继承非构造函数属性和方法

函数式继承与类式继承的对比

特征	函数式继承	类式继承
语法	使用构造函数和原型链	使用`class`和`extends`关键字
继承方式	显式调用父构造函数	隐式调用父构造函数
访问父属性	通过子对象原型链访问	通过`super`关键字访问
访问父方法	通过子对象原型链访问	通过`super`关键字访问
污染父原型链	是	否
缺陷	子构造函数必须显式调用父构造函数，子对象无法访问父构造函数的私有属性和方法，父构造函数的原型链被子构造函数污染	语法更加复杂，需要掌握`class`和`extends`关键字的使用