正文

掌握JS继承：揭秘多种方式，轻松实现代码复用与扩展

/0 浏览量
0402

JavaScript中的继承是一个核心概念，它允许我们创建一个基于另一个对象的对象，并可以继承它的属性和方法。通过继承，我们可以避免代码重复，提高代码的可维护性和扩展性。本文将详细介绍JavaScript中几种常见的继承方式，帮助你轻松实现代码复用与扩展。

一、原型链继承

原型链继承是最简单的一种继承方式，它利用了JavaScript的__proto__属性。当一个对象被创建时，它内部会包含一个__proto__属性，这个属性指向它的构造函数的原型对象。

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

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

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

Child.prototype = new Parent();

var child1 = new Child();
child1.sayName(); // 输出：parent

这种方式简单易用，但存在一个问题：如果原型对象上的属性是引用类型，那么所有实例都会共享这个属性，修改一个实例的属性会影响到其他实例。

二、构造函数继承

构造函数继承通过在子类型构造函数中调用父类型构造函数来实现继承。这种方式可以解决原型链继承中的引用类型属性共享问题。

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

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

var child1 = new Child();
child1.colors.push('yellow');
console.log(child1.colors); // ['red', 'green', 'blue', 'yellow']

var child2 = new Child();
console.log(child2.colors); // ['red', 'green', 'blue']

这种方式虽然解决了引用类型属性共享问题，但每个子实例都有自己的colors属性，导致父类型构造函数的属性被重复创建。

三、组合继承

组合继承结合了原型链继承和构造函数继承的优点，它通过调用父类型构造函数来继承属性，通过设置原型来继承方法。

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

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

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

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child();
child1.sayName(); // 输出：parent
console.log(child1.colors); // ['red', 'green', 'blue']

这种方式在性能上优于前两种，但它调用了两次父类型构造函数，导致原型上的属性被重复创建。

四、原型式继承

原型式继承通过Object.create()方法来实现，它创建一个新对象，这个对象的原型是传入的参数。

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

var child = Object.create(parent);
child.age = 18;
child.sayName = function() {
  console.log(this.name);
};

child.sayName(); // 输出：parent

这种方式适用于不需要构造函数的情况，可以方便地实现继承。

五、寄生式继承

寄生式继承通过对原型式继承的扩展来实现，它创建一个封装函数，在函数内部调用原型式继承，并返回结果。

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

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

var child = createAnother(parent);
child.sayHi(); // 输出：hi

这种方式可以增加更多的函数或属性，实现更复杂的继承。

六、寄生组合式继承

寄生组合式继承是前面几种方式的综合，它结合了构造函数继承和原型链继承的优点，同时避免了原型链继承中的引用类型属性共享问题。

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

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

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

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

inheritPrototype(Child, Parent);

var child1 = new Child();
child1.sayName(); // 输出：parent
console.log(child1.colors); // ['red', 'green', 'blue']

这种方式在性能上优于其他几种方式，是目前最常用的继承方式。

总结

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

-- 展开阅读全文 --