【渐入佳境】—— 看完可以装到面试官的原型和原型链详细讲解

最新推荐文章于 2023-10-27 15:10:40 发布

置顶石添的编程哲学

最新推荐文章于 2023-10-27 15:10:40 发布

阅读量851

点赞数 7

分类专栏：渐入佳境文章标签： javascript 原型原型链

本文链接：https://blog.csdn.net/qq_36386908/article/details/121625738

版权

渐入佳境专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有初学的小朋友私信问不夜【原型和原型链】【封装函数】【模块化】等学的不是很清楚，为了程序届的发展毅然决然启动一个【渐入佳境】系列，旨在帮助入门小白解决Java和前端问题，慢慢从疑惑、迷茫、焦虑到渐入佳境。欢迎投稿

另外求关注，良心博主，每周坚持输出优质文章，您的支持是我最大的动力，动动手指帮我突破千人关注大关吧，谢谢！

技术性问题

在这里插入图片描述

方向性问题：

前言

本篇摘录前端技术性问题，说一下前端在面试过程中，也是前端基础中非常重要的话题 原型 和 原型链，又经过自行深造现写出这篇文章。如果喜欢请点赞关注加转发吧，看完这篇文章面试官就会被你装到。

友情提示：文章较长，需要动手动脑理解消化，适合收藏多次阅读。如果你是初学者看不懂也没关系，当你写得多了，功力老道再看也无妨。

一、构造函数

在典型的OOP语言中，都存在类的概念，类就是对象的模板，对象就是类的实例，以汽车为例就是，在生产车间有一套模具或者一款汽车的设计方案，这个模具就是类，我们通过一线工人利用这套模具做出一辆辆具体的汽车，具体的汽车就是对象，我们真正使用的就是这个具体的对象。

在ES6之前，JS中并没有引入类的概念，所以在ES6之前对象并不是根据类创建的，而是根据构造函数创建的

1.1、构造函数创建对象

我们创建一个Car的构造函数
之后利用该构造函数使用new创建出两个对象使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>

<script>
  /*
  利用构造函数创建 汽车 对象
  1、首先使用function声明一个函数
  2、Car为函数名，一个汽车构造函数
  3、brand：汽车品牌，type：汽车类型
  */
  function Car(brand,type) {
    this.brand = brand;
    this.type = type;
    // run函数，是每个车都会跑
    this.run = function() {
      console.log("我可以跑");
    }
  }

  // 使用 new 创建对象使用
  var han = new Car("比亚迪-汉","轿车");
  var tang = new Car("比亚迪-唐","SUV");
  console.log(han);
  console.log(tang);
</script>
</html>

运行结果如下：
在这里插入图片描述
对象函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总和new一起使用。我们将对象的公共属性和方法抽取出来，然后封装到这个函数里面。

1.2、构造函数创建对象的内存浪费问题

我们先用一张图表示一下构造函数在创建对象时的内存浪费问题，创建对象在内存中开辟空间存储，这是必然的，但是对象中有函数，函数是一种特殊的类型，他有得开辟新的空间，但是这多个对象的run函数是一样的，新开辟空间岂不浪费？开辟空间还需要时间，造成了空间和时间双重浪费。
在这里插入图片描述
之后代码验证，发现两个run确实不一样，它们的逻辑功能一样，但是开辟了两块内存，造成空间浪费，聪明的前端工程师们就使用构造函数原型 prototype来解决这一问题

二、原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。就不需要单独开辟内存空间了。
JavaScript规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。这个 prototype 就是一个对象，prototype 翻译过来叫 “原型”，所以又称 原型对象，它的作用就是这个原型对象的所有属性和方法，都会被构造函数所拥有，言下之意就是多个对象有相同的属性或方法不需要另外开辟空间，而是在对象中存储一个原型对象，这个原型对象指向一个共享数据。

2.1、验证代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>

<script>
  function Car(brand,type) {
    this.brand = brand;
    this.type = type;
    // run函数，是每个车都会跑
    this.run = function() {
      console.log("我可以跑");
    }
  }

  // 验证 构造函数 中是否包含 prototype 对象
  // 注意，上边的构造函数可没有添加任何内容哦
  console.dir(Car);
</script>
</html>

输出结果中确实存在一个 prototype对象 ，也就是原型对象
在这里插入图片描述

2.2、原型对象怎么用

我们可以将那些不变的方法，直接定义到原型对象(prototype对象)上，这样所有实例就可以共享这些方法，不需要另开辟空间了。

通过一下代码将原本构造函数的 run 方法给构造函数的原型对象：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>

<script>
  function Car(brand,type) {
    this.brand = brand;
    this.type = type;
  }

  // 将run方法给原型对象
  // 因为JS是一门动态语言，所以可以使用以下语法
  Car.prototype.run = function() {
    console.log("我可以跑");
  }

  // 创建实例，验证是否可以使用run函数
  var han = new Car("汉","轿车");
  var tang = new Car("唐","SUV");

  console.log(han);
  console.log(tang);
  // 调用run函数
  han.run();
  tang.run();
</script>
</html>

输出结果正常
在这里插入图片描述

此时再来使用 === 比较两个run函数他们的结果就是 true了，因为无论是tang对象还是 han对象，里边都存储了同一个原型对象，这个原型对象中有run函数，所以作比较当然相同啦

在这里插入图片描述
小结：

在ES6之前没有类，创建对象都是使用构造函数创建的
构造函数有一个缺点，当方法(例如：run)放在构造函数里面，每创建一个对象，都会为该方法(例如：run)开辟空间，浪费内存
我们可以将这些公共的方法(例如：run)定义在原型对象中，实现方法共享
原型是一个对象，每一个构造函数系统都帮我们定义好了原型对象
属性(例如：brand、type)它们是基本数据类型，而且每个对象的值都不一样，所以跟着对象存储就行啦

一定要思考哦，看到这里说明您的毅力还是很强的，这里适合停一停再往下看，一定要搞明白原型。

记着别让泪水代替笑容,别让健康透支为零,累了就去点个赞。

在这里插入图片描述

三、对象原型 proto

有人就好奇了，han和tang两个对象中压根就没有run函数，是怎么调用到的捏。因为对象都会有一个属性 __ proto __ 指向构造函数的 prototype 原型对象，之所以对象可以使用构造函数prototype原型对象的属性和方法，是因为 __ proto __的存在。

代码输出验证：

<script>
  function Car(brand,type) {
    this.brand = brand;
    this.type = type;
  }

  // 将run方法给原型对象
  // 因为JS是一门动态语言，所以可以使用以下语法
  Car.prototype.run = function() {
    console.log("我可以跑");
  }
  // 创建实例，验证是否可以使用run函数
  var han = new Car("汉","轿车");
  var tang = new Car("唐","SUV");
  // 输出han对象，看结果中是否包含 __ proto __
  console.log(han);
</script>

在老版浏览器中输出为：
在这里插入图片描述
新版浏览器将 __ proto __ 的显示替换成了 Prototype ，里边包含 __ proto __

在这里插入图片描述
如上图，虽然对象中没有 run 函数，但是对象身上系统添加了一个 __ proto __ 指向了构造函数中的原型对象，而原型对象中定义了 run函数，所以您是可以调用的，所以有一个结论就是

对象的 __ proto__ 和构造函数的 prototype 是等价的

通过代码验证也确实如此
在这里插入图片描述

这里有一个很重要的方法查找规则：

当我们调用一个方法方法时，首先看对象（例如：tang）本身是否有方法（例如：run）
如果有就执行对象（例如：tang）上的方法（例如：run）
如果没有（例如：run）这个方法，因为有 __ proto __ 的存在就去构造函数中的原型对象身上查找这个方法（例如：run）

注意：__ proto __ 对象原型的意义是为对象查找机制提供一个方向，并不是一个标准属性，所以在开发中不可以使用这个属性，不用进行赋值等操作，它仅仅发挥内部指向原型对象prototype的作用

四、构造函数、实例、原型对象三者的关系

下边的图说明三者的关系，您最好可以自己画出来，理解它们之间的关系，这样基础就非常牢靠了
在这里插入图片描述

五、原型链

当访问一个对象属性时，先在自身查找，找到就返回。如果没有找到就会沿着 proto （原型）这条链向上查找，找到就返回结果，找不到就返回undefind。在这个过程中通过对象中记录的原型属性查找所以叫原型链也可以称为隐式原型链。如下我们通过han对象为大家详细介绍一下，这里请结合上下文理解。

汉对象中有一个原型对象（原型对象1），它的构造函数指向的是Car这个构造函数，原型对象也是一个对象，所以他里边还有一个Prototype（原型对象2）
在这里插入图片描述
原型对象2中的构造函数指向一个Object对象，说明原型对象2是通过Object创建出来的，对象都会有一个 proto 原型属性，这个属性记录了它所在的对象实例的原型属性的指向。也就是指向了Object

最终Object对象中的 proto 指向一个null，这个指向链结束
在这里插入图片描述

总结

每个函数都有一个prototype属性，称为显示原型属性
每个实例对象都有 __ proto __ 属性，隐式原型属性
__ proto __ 属性是创建对象时自动添加的
程序员可以操作显示原型，但是不能直接操作隐式原型
对象调用方法，自下而上的查询过程是通过原型链实现的
原型链最终会指向Object对象，而Object对象的__ proto __指向最后的null

另外求关注，良心博主，每周坚持输出优质文章，您的支持是我最大的动力，动动手指帮我突破千人关注大关吧，谢谢！

石添的编程哲学

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
【渐入佳境】—— 看完可以装到面试官的原型和原型链详细讲解

有初学的小朋友私信问不夜【原型和原型链】【封装函数】【模块化】等学的不是很清楚，为了程序届的发展毅然决然启动一个【渐入佳境】系列，旨在帮助入门小白解决Java和前端问题，慢慢从疑惑、迷茫、焦虑到渐入佳境。欢迎投稿另外求关注，良心博主，每周坚持输出优质文章，您的支持是我最大的动力，动动手指帮我突破千人关注大关吧，谢谢！技术性问题方向性问题：文章目录前言一、构造函数1.1、构造函数创建对象1.2、构造函数创建对象的内存浪费问题二、原型 prototype2.1、验证代码2.2、原型对象怎么用三、对
复制链接

扫一扫