正文

掌握JS对象三种继承方式，轻松实现代码复用与扩展

/0 浏览量
0406

在JavaScript中，继承是一种非常重要的概念，它允许我们创建可重用的代码，并能够轻松地扩展对象的功能。JavaScript主要有三种继承方式：原型链继承、构造函数继承和组合继承。下面，我们将一一探讨这三种方法，并给出相应的代码示例。

原型链继承

原型链继承是JavaScript中最传统的继承方式。它的基本思想是：通过将父对象的构造函数赋值给子对象的原型，使得子对象能够访问父对象的原型上的属性和方法。

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

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

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

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

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

原型链继承的优点是实现简单，但缺点是所有实例共享父对象的原型属性，如果其中一个实例修改了属性，其他实例也会受到影响。

构造函数继承

构造函数继承通过在子类型构造函数中调用父类型构造函数来继承父类型的属性。这种方法可以避免原型链继承中的属性共享问题。

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

function Child() {
  Parent.call(this); // 继承父类型的属性
  this.age = 28;
}

var child2 = new Child();
console.log(child2.name); // 输出：parent
console.log(child2.colors); // 输出：['red', 'blue', 'green']
console.log(child2.age); // 输出：28

构造函数继承的优点是避免了原型链继承中的属性共享问题，但缺点是每次创建子实例时都需要调用父类型构造函数，如果父类型构造函数中有一些不必要的操作，会降低效率。

组合继承

组合继承结合了原型链继承和构造函数继承的优点，通过在子类型构造函数中调用父类型构造函数来继承父类型的属性，同时通过设置子类型原型为父类型实例来实现原型链继承。

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

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

function Child() {
  Parent.call(this); // 继承父类型的属性
  this.age = 28;
}

Child.prototype = new Parent(); // 设置原型链继承

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

组合继承的优点是既保证了父类型的属性私有化，又通过原型链实现了属性的共享，同时避免了每次创建子实例时都调用父类型构造函数的缺点。

通过以上三种继承方式的介绍和代码示例，相信你已经对JavaScript对象继承有了更深入的了解。在实际开发中，根据需求选择合适的继承方式，可以让你轻松实现代码复用与扩展。

-- 展开阅读全文 --