前端必备：5种JS函数继承方式，面试助力50%！

2023-09-26 01:32:13

在前端开发领域，JavaScript函数继承是面试中的常见考察点之一。掌握函数继承的多种方式可以帮助您更好地理解JavaScript的面向对象编程特性，并构建更复杂的应用程序。本文将介绍5种常用的JS函数继承方式，并提供面试技巧，助力您在面试中脱颖而出。

原型链继承

原型链继承是最基础也是最常用的JS函数继承方式。它通过在子函数的原型中指向父函数的原型来实现继承。

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

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

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

Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // "Hello from Parent!"
console.log(child.name); // "Parent"
console.log(child.age); // 20

在上面的例子中，Child函数通过设置其原型为Parent函数的原型来继承Parent函数的属性和方法。因此，Child函数的实例可以访问和使用Parent函数的属性和方法。

构造函数继承

构造函数继承是一种通过在子函数的构造函数中调用父函数的构造函数来实现继承的方式。

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

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

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

const child = new Child("John", 20);
child.sayHello(); // "Hello from Parent!"
console.log(child.name); // "John"
console.log(child.age); // 20

在上面的例子中，Child函数通过在构造函数中调用Parent函数的构造函数来继承Parent函数的属性和方法。因此，Child函数的实例可以访问和使用Parent函数的属性和方法。

组合继承

组合继承是原型链继承和构造函数继承的结合。它通过在子函数的构造函数中调用父函数的构造函数来实现继承，同时在子函数的原型中指向父函数的原型来实现继承。

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

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

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

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child("John", 20);
child.sayHello(); // "Hello from Parent!"
console.log(child.name); // "John"
console.log(child.age); // 20

在上面的例子中，Child函数通过在构造函数中调用Parent函数的构造函数来继承Parent函数的属性和方法。同时，Child函数的原型通过Object.create()方法来创建，并指向Parent函数的原型。这样，Child函数的实例可以访问和使用Parent函数的属性和方法。

寄生组合继承

寄生组合继承是组合继承的改进版本。它通过在子函数的构造函数中创建一个临时对象来继承父函数的属性和方法，然后将临时对象的属性和方法复制到子函数的原型中。

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

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

function Child(name, age) {
  const temp = new Parent(name);
  this.age = age;

  for (const key in temp) {
    if (temp.hasOwnProperty(key)) {
      this[key] = temp[key];
    }
  }
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child("John", 20);
child.sayHello(); // "Hello from Parent!"
console.log(child.name); // "John"
console.log(child.age); // 20

在上面的例子中，Child函数通过在构造函数中创建一个临时对象temp来继承Parent函数的属性和方法。然后，Child函数通过循环遍历temp对象并将其属性和方法复制到自己身上来实现继承。最后，Child函数的原型通过Object.create()方法来创建，并指向Parent函数的原型。这样，Child函数的实例可以访问和使用Parent函数的属性和方法。