正文

JavaScript实现继承的6种方式详解

/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 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. 原型式继承

原理：使用Object.create()方法来创建一个新对象，这个新对象的原型是父对象。

示例：

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

var child = Object.create(parent);
child.name = 'child';
child.sayName(); // 输出：child

缺点：无法传递参数。

4. 寄生式继承

原理：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回这个对象。

示例：

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

缺点：同原型式继承。

5. 寄生组合式继承

原理：通过组合寄生式继承和原型式继承来继承原型链和构造函数。

示例：

function inheritPrototype(childObject, parentObject) {
  var prototype = Object.create(parentObject.prototype);
  prototype.constructor = childObject;
  childObject.prototype = prototype;
}

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

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

inheritPrototype(Child, Parent);

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

优点：解决了原型链继承和构造函数继承的缺点。

6. Class继承

原理：使用ES6的class关键字来实现继承。

示例：

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }
}

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

优点：语法简洁，易于理解。

以上就是JavaScript中实现继承的六种方式，每种方式都有其优缺点，选择合适的方式取决于具体的应用场景。

-- 展开阅读全文 --