正文

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

/0 浏览量
0410

在JavaScript中，继承是面向对象编程中的一个核心概念，它允许我们创建新的对象，这些对象可以继承并扩展另一个对象（称为父对象或原型）的功能。以下是JavaScript中实现继承的几种常见方式：

1. 原型链继承

原型链继承是JavaScript中最基本的继承方式，通过将子对象的__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

优点：实现简单。

缺点：无法向父类型构造函数传递参数，且原型链上的属性会被所有实例共享。

2. 构造函数继承

构造函数继承通过调用父类型的构造函数来传递参数，并创建父类型实例的副本。

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

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

var child1 = new Child('child1');
console.log(child1.name); // 输出：child1

优点：可以传递参数，避免原型链上的属性被共享。

缺点：方法都在构造函数中定义，每次创建实例都会创建一遍方法，无法复用。

3. 组合继承

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

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

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

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

Child.prototype = new Parent();

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

优点：可以传递参数，避免原型链上的属性被共享，同时复用方法。

缺点：调用两次父构造函数，一次在创建子类型实例时，另一次在设置原型时。

4. 原型式继承

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

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

var child = Object.create(parent);
child.age = 18;
child.sayName(); // 输出：parent

优点：简单易用。

缺点：无法传递参数，且原型链上的属性会被所有实例共享。

5. 寄生式继承

寄生式继承通过创建一个仅用于封装传入参数的函数来实现继承。

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

var person = {
  name: 'person',
  friends: ['Shelby', 'Court', 'Van']
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 输出：hi

优点：简单易用。

缺点：无法传递参数，且原型链上的属性会被所有实例共享。

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 child1 = new Child('child1');
child1.sayName(); // 输出：child1

优点：避免了组合继承中调用两次父构造函数的问题。

缺点：代码稍微复杂。

总结

以上是JavaScript中实现继承的几种常见方式，每种方式都有其优缺点。在实际开发中，应根据具体需求选择合适的继承方式。

-- 展开阅读全文 --