正文

JavaScript实现继承的多种方式实例详解

/0 浏览量
0404

在JavaScript中，继承是面向对象编程中的一个重要概念，它允许一个对象继承另一个对象的属性和方法。以下是JavaScript中实现继承的几种常见方式，以及相应的实例详解。

1. 原型链继承

原理

原型链继承是利用构造函数的原型对象来实现继承。

实例

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

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

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

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

// 实例化
var child = new Child();
child.sayName(); // 输出: parent

2. 构造函数继承

原理

构造函数继承通过在子类构造函数中调用父类构造函数来实现。

实例

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

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

function Child(name) {
  Parent.call(this, name); // 继承父类构造函数
}

// 实例化
var child = new Child('child');
child.sayName(); // 输出: child

3. 组合继承

原理

组合继承结合了原型链继承和构造函数继承的优点。

实例

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

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

function Child(name) {
  Parent.call(this, name); // 继承父类构造函数
}

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

// 实例化
var child = new Child('child');
child.sayName(); // 输出: child

4. 原型式继承

原理

原型式继承利用Object.create()方法创建一个新对象，该对象的原型是父对象。

实例

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

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

Child.prototype = Object.create(Parent.prototype);

// 实例化
var child = new Child();
console.log(child.name); // 输出: parent

5. 寄生式继承

原理

寄生式继承在原型式继承的基础上，增加了一些自己的逻辑。

实例

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

var parent = {
  sayName: function() {
    console.log('parent');
  }
};

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

6. 寄生组合式继承

原理

寄生组合式继承是结合了寄生式继承和组合继承的优点。

实例

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('child');
child.sayName(); // 输出: child

通过以上实例，我们可以看到JavaScript中实现继承的多种方式，每种方式都有其优缺点。在实际开发中，我们需要根据具体需求选择合适的继承方式。

-- 展开阅读全文 --