JS中的继承

时间：2024-03-16 20:03:15

在 JavaScript 中，有多种实现继承的方法。下面介绍几种常见的继承方式以及它们的优缺点：

原型链继承

原型链继承是 JavaScript 中最基本的一种继承方式。它的原理是通过将父类的实例作为子类的原型（prototype）来实现继承。

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

Parent.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
}

function Child() {}

Child.prototype = new Parent();

var child = new Child();
child.sayHello(); // "Hello, I am Child"

优点：

  • 实现简单，易于理解。
  • 可以复用父类的方法和属性。

缺点：

  • 子类共享父类原型上的所有属性和方法，容易造成命名冲突和对父类实例的污染。
  • 无法向父类传递参数。
  • 不能实现多继承。

构造函数继承

构造函数继承是指在子类构造函数中通过调用父类构造函数来实现继承。这种方式可以实现向父类传递参数。

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

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

var child = new Child('Tom');
console.log(child.name); // "Tom"

优点：

  • 可以向父类传递参数。

缺点：

  • 子类无法访问父类原型上的方法和属性。
  • 不能复用父类的方法和属性。
  • 无法实现多继承。

组合继承

组合继承是指将原型链继承和构造函数继承结合起来使用，通过在子类构造函数中调用父类构造函数来实现向父类传参，并将父类的实例作为子类的原型。

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

Parent.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
}

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

Child.prototype = new Parent();

var child = new Child('Tom');
child.sayHello(); // "Hello, I am Tom"

优点：

  • 可以向父类传递参数。
  • 实现了父类原型上的方法和属性的复用。

缺点：

  • 在父类构造函数调用时会重复执行一次父类的构造函数。
  • 父类原型上的属性和方法会被多次创建，存在复用的浪费。

原型式继承

原型式继承是指通过创建一个空对象来继承另一个对象的属性和方法，然后再利用这个对象作为新对象的原型。

var parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello, I am ' + this.name);
    }
};

var child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // "Hello, I am Child"

优点：

  • 实现简单。

缺点：

  • 子类无法向父类传递参数。
  • 父类的引用类型属性会被所有子类实例共享，容易造成污染。

寄生式继承

寄生式继承是指在一个函数内部封装一个创建对象的方法，并且返回一个拓展了新方法的对象。

function createChild(parent) {
    var child = Object.create(parent);
    child.sayHello = function() {
        console.log('Hello, I am ' + this.name);
    };
    return child;
}

var parent = {
    name: 'Parent'
};

var child = createChild(parent);
child.name = 'Child';
child.sayHello(); // "Hello, I am Child"

优点：

  • 可以实现属性和方法的复用。

缺点：

  • 子类无法向父类传递参数。
  • 父类的引用类型属性会被所有子类实例共享，容易造成污染。

寄生组合式继承

寄生组合式继承是指使用组合式继承的方式，但是在子类原型的创建中使用一个空函数来进行中转。

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

Parent.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
}

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

function F() {}
F.prototype = Parent.prototype;
Child.prototype = new F();

var child = new Child('Tom');
child.sayHello(); // "Hello, I am Tom"

优点：

  • 可以向父类传递参数。
  • 父类的方法和属性得到了复用，避免了多余的创建。

缺点：

  • 实现稍微有些复杂。

综上所述，JavaScript 中实现继承的方式各有优缺点，选择哪种方式取决于具体的场景和需求。

相关文章