Web前端最全【面试常见】JS继承与原型、原型链，前端高级面试2024

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

除了原型链继承外，JavaScript还提供了其他几种实现继承的方式，如构造函数继承、组合继承等。在开发中，继承通常用于构建对象之间的关系，使得子类可以共享父类的属性和方法，并有能力添加自己的特定属性和方法。这样可以减少重复的代码编写，提高开发效率和代码的可维护性。

接下来我们详细介绍这些继承方式的原理和使用方法，并提供相应的代码示例。

JavaScript继承方式

1、原型链继承

原型链继承是一种基于原型的继承方式，它通过将父类的实例作为子类的原型来实现继承关系。具体实现如下：

function Animal(name) {
  this.name = name || 'Animal';
}

Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat() {
  Animal.call(this);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
Cat.prototype.name = 'Tom';

var cat = new Cat();

原型链继承的特点包括：

• 实例既是子类的实例，也是父类的实例，继承关系非常纯粹。
• 子类可以访问父类新增的原型方法和属性。
• 实现简单，易于理解和实现。

原型链继承的缺点：

• 子类无法在构造器中新增属性和方法，只能在实例化后添加。
• 无法实现多继承。
• 所有实例共享来自原型对象的属性，包括引用属性。

原型链继承适用于简单的继承关系和单一继承需求的场景。

2、构造继承

构造继承通过在子类构造函数中调用父类构造函数，复制父类的实例属性给子类。具体实现如下：

function Animal(name) {
  this.name = name || 'Animal';
}

Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat(name) {
  Animal.call(this, name);
}

var cat = new Cat();

构造继承的特点包括：

• 解决了原型链继承中子类实例共享父类引用属性的问题。
• 可以在创建子类实例时向父类传递参数。
• 支持多继承，可以调用多个父类构造函数。

构造继承的缺点：

• 子类实例并不是父类的实例，只是子类的实例。
• 无法继承父类的原型属性和方法。
• 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。

构造继承适用于需要继承实例属性、避免引用属性共享以及多继承的场景。

3、实例继承

实例继承通过为父类实例添加新特性，并将其作为子类实例返回。具体实现如下：

function Animal(name) {
  this.name = name || 'Animal';
}

Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat(name) {
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

var cat = new Cat();

实例继承的特点包括：

• 不限制调用方式，无论是new 子类()还是子类()，返回的对象具有相同的效果。

实例继承的缺点：

• 实例是父类的实例，而不是子类的实例。
• 不支持多继承。

实例继承适用于灵活的对象创建需求，可以根据不同情况返回不同的实例。

4、拷贝继承

拷贝继承通过复制父类的属性和方法给子类实现继承。具体实现如下：

function Animal(name) {
  this.name = name || 'Animal';
}

Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat(name) {
  Animal.call(this, name);
}

for (var p in Animal.prototype) {
  if (Animal.prototype.hasOwnProperty(p)) {
    Cat.prototype[p] = Animal.prototype[p];
  }
}

Cat.prototype.constructor = Cat;
var cat = new Cat();

拷贝继承的特点包括：

• 支持多继承。

拷贝继承的缺点：

• 效率较低，内存占用高，因为需要拷贝父类的属性。
• 无法获取父类的不可枚举方法。

拷贝继承适用于多继承的场景，但要注意性能和不可枚举方法的问题。

5、组合继承（原型继承+构造继承）

组合继承结合了原型继承和构造继承的优点，通过调用父类构造函数来继承父类的属性，并将父类实例作为子类原型，实现函数复用。具体实现如下：

function Animal(name) {
  this.name = name || 'Animal';
}

Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

var cat = new Cat();



### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)



://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)