正文

JavaScript面向对象继承的几种方式

/0 浏览量
0402

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

1. 原型链继承

原型链继承是最简单的一种继承方式，它通过将子对象的__proto__属性指向父对象的实例来实现。

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

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

function Child() {
  // 子对象直接继承了父对象实例的属性和方法
}

Child.prototype = new Parent();

var child1 = new Child();
child1.sayName(); // 输出: Parent

优点：

  • 简单易实现。

缺点：

  • 子对象的原型指向父对象的实例，如果父对象实例包含引用类型值，子对象和父对象将共享这个实例。
  • 无法向父类型构造函数中传递参数。

2. 构造函数继承

构造函数继承通过调用父类型的构造函数来继承父类型的属性。

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

function Child(name) {
  Parent.call(this, name); // 继承父类型属性
}

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

优点：

  • 子对象可以继承父对象实例的属性，并且可以传递参数。

缺点：

  • 子对象和父对象实例之间是独立的，父对象实例的属性不会被子对象共享。

3. 组合继承

组合继承结合了原型链继承和构造函数继承的优点，它通过原型链继承实现原型上的属性和方法，通过构造函数继承实现实例上的属性。

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

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

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

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

var child1 = new Child('Child1');
child1.sayName(); // 输出: Child1
console.log(child1.age); // 输出: 18

优点：

  • 既可以继承原型上的属性和方法，也可以继承实例上的属性。

缺点：

  • 调用了两次父类型的构造函数，会带来性能问题。

4. 原型式继承

原型式继承通过Object.create()方法创建一个新对象，这个新对象的原型指向父对象。

function createObj(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

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

var child = createObj(parent);
child.sayName = function() {
  console.log(this.name);
};

child.sayName(); // 输出: Parent

优点：

  • 简单易实现。

缺点：

  • 无法传递参数给父类型构造函数。

5. 寄生式继承

寄生式继承在原型式继承的基础上增加了一些自己的操作，它通过一个简单的函数来封装对象创建的过程。

function createObj(obj) {
  var clone = Object.create(obj);
  clone.sayName = function() {
    console.log(this.name);
  };
  return clone;
}

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

var child = createObj(parent);
child.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;
  this.colors = ['red', 'green', 'blue'];
}

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

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

inheritPrototype(Child, Parent);

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

优点：

  • 性能较好，避免了在组合继承中调用两次父类型构造函数的问题。

缺点：

  • 相对复杂，需要手动编写inheritPrototype函数。

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

-- 展开阅读全文 --