正文

JavaScript面向对象编程：深入浅出理解继承的多种方式

/0 浏览量
0403

JavaScript 作为一种基于原型的编程语言，虽然不像 Java 或 C++ 那样直接支持类（class）的概念，但它提供了多种方式来实现面向对象编程（OOP）。其中，继承是 OOP 中的一个核心概念，它允许我们创建新的对象，这些对象可以继承并扩展另一个对象（称为父对象或基类）的功能。本文将深入浅出地介绍 JavaScript 中实现继承的多种方式。

原型链继承

在 JavaScript 中，每个对象都有一个原型（prototype）属性，它指向另一个对象。如果这个原型对象也存在原型，那么它指向的对象的原型又指向另一个对象，以此类推，直到原型链的末端，通常是 Object.prototype。

示例：

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

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child() {
  this.age = 10;
}

// 继承 Parent 的原型
Child.prototype = new Parent();

var child = new Child();
child.sayName(); // 输出: Parent

这种方法简单易行，但存在一个问题：如果 Parent 的原型上有一个引用类型属性，而所有的实例都会共享这个属性，那么一旦这个属性被修改，所有实例都会受到影响。

构造函数继承

构造函数继承通过调用父类的构造函数来继承父类的属性。

示例：

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

function Child(name) {
  Parent.call(this, name); // 继承 Parent 的属性
  this.age = 10;
}

var child = new Child('ChildName');
console.log(child.name); // 输出: ChildName
console.log(child.age); // 输出: 10

这种方法可以避免原型链继承中的问题，但每个实例都有自己的属性副本，这可能会增加内存的使用。

组合继承

组合继承结合了原型链继承和构造函数继承的优点，既可以通过原型链继承共享方法，又可以通过构造函数继承属性。

示例：

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

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name) {
  Parent.call(this, name); // 继承 Parent 的属性
  this.age = 10;
}

// 继承 Parent 的原型
Child.prototype = new Parent();

var child = new Child('ChildName');
child.sayName(); // 输出: ChildName

这种方法是目前最常用的继承方式，但存在一个小问题：如果父类构造函数中有 this 的引用，那么它会被覆盖。

原型式继承

原型式继承使用一个现有的对象来提供新对象的原型。

示例：

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

var parent = {
  name: 'Parent',
  sayName: function() {
    console.log(this.name);
  }
};

var child = createObject(parent);
child.sayName(); // 输出: Parent

这种方法简单，但与原型链继承类似，存在引用类型属性共享的问题。

寄生式继承

寄生式继承通过一个简单的方式创建一个自定义对象，然后继承另一个对象。

示例：

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

var parent = {
  name: 'Parent',
  sayName: function() {
    console.log(this.name);
  }
};

var another = createAnother(parent);
another.sayHi(); // 输出: hi
another.sayName(); // 输出: Parent

这种方法适用于创建一个简单的新对象，但与原型式继承类似，存在引用类型属性共享的问题。

寄生组合式继承

寄生组合式继承是前面几种方法的综合，它避免了构造函数继承和原型链继承的缺点。

示例：

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

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

Parent.prototype.sayName = function() {
  console.log(this.name);
};

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

inheritPrototype(Child, Parent);

var child = new Child('ChildName');
child.sayName(); // 输出: ChildName

这种方法是目前最推荐的使用方式，因为它既避免了原型链继承中的引用类型属性共享问题，又避免了构造函数继承中属性副本的问题。

总结

JavaScript 中的继承方式多种多样，但每种方式都有其优缺点。在实际开发中，我们需要根据具体需求选择合适的继承方式。本文介绍了多种继承方式，希望对您有所帮助。

-- 展开阅读全文 --