正文

JavaScript中深入浅出详解对象继承的5种方式

/0 浏览量
0331

在JavaScript中，对象继承是一个核心概念，它允许我们创建基于现有对象的新对象，并共享其属性和方法。以下是五种常用的对象继承方式，我们将逐一深入浅出地进行分析。

1. 构造函数继承

构造函数继承是利用原型链，通过在父类构造函数中创建一个临时对象，将父类的属性和方法复制到这个临时对象上，然后将其赋值给子类的原型，从而实现继承。

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

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

function Child(name, age) {
  Parent.call(this, name); // 继承父类的属性和方法
  this.age = age;
}

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

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;
}

function Child(name) {
  var parent = new Parent(name);
  parent.colors = ["red", "blue", "green"];
  return parent;
}

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

4. 寄生式原型链继承

寄生式原型链继承是结合原型链继承和寄生构造函数继承，在原型链上创建一个临时对象，然后将其赋值给子类的原型。

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

function Child() {}

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

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

5. 组合式继承

组合式继承是结合构造函数继承和原型链继承，在子类构造函数中调用父类构造函数，并将父类的实例赋值给子类的原型。

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

function Child(name, age) {
  Parent.call(this, name); // 继承父类的属性和方法
  this.age = age;
}

Child.prototype = new Parent();

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

以上五种方式各有优缺点，在实际开发中，我们可以根据具体需求选择合适的继承方式。希望这篇文章能帮助你更好地理解JavaScript中的对象继承。

-- 展开阅读全文 --