JavaScript继承

2023-09-20 07:08:21

原型链继承

JavaScript中最传统的继承方式是原型链继承，其基本思想是通过将父类的原型对象赋给子类的原型对象来实现继承。这种方式可以简单理解为：子类继承父类的属性和方法，子类可以访问和修改这些继承的属性和方法，但父类不能访问和修改子类独有的属性和方法。

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

Parent.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

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

Child.prototype = new Parent();

Child.prototype.sayHello = function() {
  console.log("Hello from the child!");
};

const parent = new Parent("John");
const child = new Child("Mary");

parent.greet(); // Hello, my name is John
child.greet(); // Hello, my name is Mary
child.sayHello(); // Hello from the child!

缺点：

内存开销： 由于每个子类都会创建一个新的原型对象，因此原型链继承可能导致内存开销。
属性共享： 由于所有子类共享父类的原型对象，因此父类的属性和方法在子类之间是共享的。这意味着对父类属性或方法的更改将影响所有子类。
方法调用开销： 由于每次调用子类方法时都需要沿着原型链搜索，因此原型链继承可能导致方法调用开销。

ES6 class继承

ES6中引入了新的class，提供了更简洁和更现代的继承语法。ES6 class继承本质上仍然是原型链继承，但它提供了更清晰和更易于理解的语法。

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

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

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

  sayHello() {
    console.log("Hello from the child!");
  }
}

const parent = new Parent("John");
const child = new Child("Mary");

parent.greet(); // Hello, my name is John
child.greet(); // Hello, my name is Mary
child.sayHello(); // Hello from the child!