正文

JavaScript面向对象继承的5种方式详解

/0 浏览量
0402

在JavaScript中，继承是面向对象编程中的一个核心概念，它允许我们创建基于现有对象的新对象，并继承其属性和方法。以下是JavaScript中常见的五种继承方式，我们将逐一进行详细解析。

1. 原型链继承

原型链继承是最简单的继承方式，通过将子类型的原型设置为其父类型的实例来实现。

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

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

Child.prototype = new Parent();

var child1 = new Child();
console.log(child1.name); // 输出: 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 createObj(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}

var parent = {
    name: 'parent'
};

var child = createObj(parent);
console.log(child.name); // 输出: parent

优点：

  • 实现简单，易于理解。

缺点：

  • 与原型链继承类似，无法向父类型构造函数中传递参数。
  • 当父类型原型上的属性是引用类型时，所有子类型实例共享这个属性。

4. 寄生式继承

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

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

var parent = {
    name: 'parent'
};

var child = createObj(parent);
child.sayName(); // 输出: hi

优点：

  • 可以增强对象的功能。

缺点：

  • 与寄生构造函数式继承类似，无法向父类型构造函数中传递参数。

5. 寄生构造函数式继承

寄生构造函数式继承结合了寄生式继承和构造函数继承的优点。

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

function Child(name) {
    var instance = new Parent(name);
    instance.age = 18;
    return instance;
}

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

优点：

  • 可以向父类型构造函数中传递参数。
  • 可以增强对象的功能。

缺点：

  • 函数复用性差，每个子类型实例都创建了一个父类型实例。

总结：

以上五种继承方式各有优缺点，在实际应用中，应根据具体需求选择合适的继承方式。随着ES6的推出，类和继承的概念得到了进一步的发展，使用类和继承可以更加简洁、方便地实现面向对象编程。

-- 展开阅读全文 --