正文

JS实现类继承，详解方法和技巧

/0 浏览量
0331

在JavaScript中，实现类继承是面向对象编程的一个重要方面。JavaScript本身并不支持传统意义上的类（class），但我们可以通过构造函数、原型链和ES6的类（class）语法来实现类的继承。下面，我将详细讲解几种常见的类继承方法和技巧。

1. 构造函数继承

构造函数继承是最早的继承方式，通过在子类构造函数中调用父类构造函数来实现。

function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

var child1 = new Child("Tom", 12);
console.log(child1.name); // "Tom"
console.log(child1.age); // 12
console.log(child1.colors); // ["red", "blue", "green"]

技巧：

  • 使用call或apply方法调用父类构造函数，可以传递参数。
  • 需要在子类构造函数中显式调用父类构造函数。

2. 原型链继承

原型链继承是通过设置子类的原型为父类的实例来实现。

function Parent() {
  this.name = "parent";
}

function Child() {}

Child.prototype = new Parent();

var child1 = new Child();
console.log(child1.name); // "parent"

技巧：

  • 子类原型指向父类实例，可以继承父类实例的属性和方法。
  • 需要注意原型链上的引用类型属性被多个实例共享。

3. 组合继承

组合继承结合了构造函数继承和原型链继承的优点，通过调用父类构造函数同时设置原型链。

function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child("Tom", 12);
console.log(child1.name); // "Tom"
console.log(child1.age); // 12
console.log(child1.colors); // ["red", "blue", "green"]

技巧：

  • 优点是结合了构造函数继承和原型链继承的优点。
  • 缺点是调用两次父类构造函数，导致性能损耗。

4. 原型式继承

原型式继承利用Object.create()方法创建一个新对象，使其原型指向父对象。

function createObj(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

var parent = {
  name: "parent",
  colors: ["red", "blue", "green"]
};

var child = createObj(parent);
console.log(child.name); // "parent"
console.log(child.colors); // ["red", "blue", "green"]

技巧：

  • 适用于不需要传递参数的继承。
  • 需要注意原型链上的引用类型属性被多个实例共享。

5. 寄生式继承

寄生式继承通过创建一个仅用于封装传入对象的新对象来实现继承。

function createObj(obj) {
  var clone = Object.create(obj);
  clone.sayHi = function() {
    console.log("hi");
  };
  return clone;
}

var parent = {
  name: "parent",
  colors: ["red", "blue", "green"]
};

var child = createObj(parent);
console.log(child.name); // "parent"
child.sayHi(); // "hi"

技巧：

  • 适用于封装额外方法或属性。
  • 需要注意原型链上的引用类型属性被多个实例共享。

6. 寄生组合式继承

寄生组合式继承是现在最常用的一种继承方式，结合了寄生式继承和组合式继承的优点。

function inheritPrototype(child, parent) {
  var prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);

var child1 = new Child("Tom", 12);
console.log(child1.name); // "Tom"
console.log(child1.age); // 12

技巧：

  • 优点是避免了组合继承中调用两次父类构造函数的问题。
  • 适用于大多数场景。

通过以上几种方法，我们可以实现JavaScript中的类继承。在实际开发中，根据具体需求选择合适的继承方式，以达到最佳性能和代码可维护性。

-- 展开阅读全文 --