Web前端最全【面试常见】JS继承与原型、原型链(1)，2024年最新2024前端面试宝典

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

• 实例对象可以访问构造函数原型对象中的属性和方法。因为它们通过原型链与原型对象关联在一起，如果实例对象访问的属性或方法在自身中找不到，JavaScript引擎会自动沿着原型链向上查找，直到找到对应的属性或方法。
• 当我们修改实例对象的属性时，它会在自身中创建一个与原型对象中同名属性的副本，并在之后的访问中直接使用该副本，而不会影响原型对象中的属性。
• 当我们调用实例对象的方法时，JavaScript引擎会优先在实例对象中查找对应的方法，如果找不到则会继续沿着原型链向上查找，直到找到对应的方法。

什么是JavaScript继承

JavaScript继承是指在前端开发中，使用JavaScript实现对象之间属性和方法的继承关系。继承是面向对象编程的重要概念，它允许我们创建基于现有对象的新对象，并在新对象中拥有原有对象的属性和方法。

在JavaScript中，继承是通过原型链来实现的。每个对象都有一个原型对象，它包含对象的属性和方法。当我们访问一个对象的属性或方法时，如果对象本身没有定义该属性或方法，JavaScript引擎会通过原型链向上查找，直到找到对应的属性或方法为止。这种原型链的查找机制使得对象之间可以共享属性和方法，从而实现继承的效果。

除了原型链继承外，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';
}


### 文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。



个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

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



第二阶段:移动端开发技术

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

第三阶段:前端常用框架

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



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

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。



d0f8d43535f1982ec0da6e4.png)



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

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。