原型链-(前端面试 2024 版)

来讲一讲原型链

原型链只存在于函数之中

四个规则

1、引用类型,都具有对象特性,即可自由扩展属性。

2、引用类型,都有一个隐式原型 __proto__ 属性,属性值是一个普通的对象。

3、引用类型,隐式原型 __proto__ 的属性值指向它的构造函数的显式原型 prototype 属性值

4、当你试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么它会去它的隐式原型 __proto__(也就是它的构造函数的显式原型 prototype)中寻找

四个知识点

  • Object 是所有对象的爸爸,所有对象都可以通过 __proto__ 找到它
  • Function 是所有函数的爸爸,所有函数都可以通过 __proto__ 找到它
  • 函数的 prototype 是一个对象
  • 对象的 __proto__ 属性指向原型, __proto__ 将对象和原型连接起来组成了原型链

const obj = {};
const arr = [];
const fn = function() {}obj.__proto__ == Object.prototype // true
arr.__proto__ === Array.prototype // true
fn.__proto__ == Function.prototype // true

new 做了什么

var obj = new F();
//  做了什么
var obj  = {};
obj.__proto__ = F.prototype;
F.call(obj);

第一行,我们创建了一个空对象obj;

第二行,我们将这个空对象的__proto__成员指向了F函数对象prototype成员对象;

第三行,我们将F函数对象的this指针替换成obj,然后再调用F函数.

我们可以这么理解: 以 new 操作符调用构造函数的时候,函数内部实际上发生以下变化:

1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用,并且最后隐式的返回 this.

prototype和__proto__

1. __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性。

2. __proto__指向的是当前对象原型对象,而prototype指向的,是以当前函数作为构造函数构造出来的对象原型对象
你的__proto__来自你构造函数的prototype;所有对象字面量都是通过Object()构造出来的,换言之,对象字面量__proto__ 属性都指向Object.prototype

  • prototype: 显式原型

每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象。

通过Function.prototype.bind方法构造出来的函数是个例外,它没有prototype属性
JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf().

Object.prototype 这个对象是个例外,它的__proto__值为null

隐式原型指向创建这个对象的函数(constructor)的prototype

作用是什么:显式原型的作用:用来实现基于原型的继承与属性的共享。
 


 

  • __ proto__: 隐式原型

隐式原型的作用:构成原型链,同样用于实现基于原型的继承。举个例子,当我们访问obj这个对象中的x属性时,如果在obj中找不到,那么就会沿着__proto__依次查找。

__proto__的指向:__proto__的指向到底如何判断呢?根据ECMA定义 'to the value of its constructor’s "prototype" ' ----指向创建这个对象的函数的显式原型。所以关键的点在于找到创建这个对象的构造函数,接下来就来看一下JS中对象被创建的方式,一眼看过去似乎有三种方式:(1)对象字面量的方式 (2)new 的方式 (3)ES5中的Object.create() 但是我认为本质上只有一种方式,也就是通过new来创建。为什么这么说呢,首先字面量的方式是一种为了开发人员更方便创建对象的一个语法糖,本质就是 var o = new Object(); o.xx = xx;o.yy=yy; 再来看看Object.create(),这是ES5中新增的方法,在这之前这被称为原型式继承,

构造函数的prototype和其实例的__proto__是指向同一个地方的,这个地方就叫做原型对象

Function和Object

构造函数的prototype和其实例的__proto__是指向同一个地方的,咱们可以来验证一下

  • 函数是Function构造函数的实例
  • 对象是Object构造函数的实例

那Function构造函数和Object构造函数他们两个又是谁的实例呢?

  • function Object()其实也是个函数,所以他是Function构造函数的实例
  • function Function()其实也是个函数,所以他也是Function构造函数的实例,没错,他是他自己本身的实例


 

console.log(Function.prototype === Object.__proto__) // true
console.log(Function.prototype === Function.__proto__) // true

constructor和prototype是成对的,你指向我,我指向你

function fn() {}console.log(fn.prototype) // {constructor: fn}
console.log(fn.prototype.constructor === fn) // true

原型链

什么是原型链呢?其实俗话说就是:__proto__的路径就叫原型链

原型继承


说到原型,就不得不说补充一下原型继承这个知识点了,原型继承就是,实例可以使用构造函数上的prototype中的方法

instanceof

作用:判断B的prototype是否在A的原型链上


A instanceof B

【JS】图解原型链相关练习题,带你彻底搞懂原型链!!!(这可能是掘金画原型链画的最正的😃) - 掘金

第一题

主要坑是 f的构造函数是 F F的构造函数是Obj,

f的所有方法从以下找

f.__proto__ === F.protyotype F.__proto__ === obj.protyotype obj.proto=== null

F的所有方法从以下找

F.__proto__ === Function.protyotype Function.__proto__ === obj.protyotype obj.proto=== null

var F = function() {};Object.prototype.a = function() {console.log('a');
};Function.prototype.b = function() {console.log('b');
}var f = new F();f.a();
f.b();F.a();
F.b();

第二题

b的所有方法从以下找

b.__proto__ === A.protyotype A.proto=== obj.protyotype obj.proto=== null

c的所有方法从以下找

b.__proto__ === A.protyotype A.proto=== obj.protyotype obj.proto=== null

本体核心是每次new时使用的都是构造函数最新的prototype ,老的构造函数引用老的prototype 并不会被覆盖

var A = function() {};
A.prototype.n = 1;
var b = new A();
A.prototype = {n: 2,m: 3
}
var c = new A();console.log(b.n);
console.log(b.m);console.log(c.n);
console.log(c.m);

第三题

函数的构造函数一定是Function 对象的构造函数 可能是obj 也可能是new Function

var foo = {},F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';console.log(foo.a);
console.log(foo.b);console.log(F.a);
console.log(F.b);

第四题

new 的时候会函数内this会重新赋值进行覆盖

function A() {}
function B(a) {this.a = a;
}
function C(a) {if (a) {this.a = a;}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;console.log(new A().a); 
console.log(new B().a);
console.log(new C(2).a);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/289855.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二维双指针,滑动窗口

二维双指针 思路:考虑暴力做法,我们统计前缀和,然后枚举以 ( x 1 , y 1 ) (x_1,y_1) (x1​,y1​), ( x 2 , y 2 ) (x_2,y_2) (x2​,y2​)为左上,右下顶点的矩阵有多少是合法的,那么,这样的时间复杂度为 n 4…

纯分享万岳外卖跑腿系统客户端源码uniapp目录结构示意图

系统买的是商业版,使用非常不错有三端uniapp开源代码,自从上次分享uniapp后有些网友让我分享下各个端的uniapp下的各个目录结构说明 我就截图说以下吧,

怎样去保证 Redis 缓存与数据库双写一致性?

解决方案 那么我们这里列出来所有策略,并且讨论他们优劣性。 先更新数据库,后更新缓存先更新数据库,后删除缓存先更新缓存,后更新数据库先删除缓存,后更新数据库 先更新数据库,后更新缓存 这种方法是不推…

基于单片机技术的门禁系统硬件设计研究

摘要:门禁系统在工业领域的应用十分广泛,如何利用单片机技术对门禁系统中的硬件进行管理与控制已经成为相关单位十分重要的研究课题之一。因此,文章设计了一套基于单片机技术的门禁系统硬件方案,旨在充分发挥单片机设备在自动化控制方面的优势,提高门禁系统的自动化水平。…

Uibot6.0 (RPA财务机器人师资培训第5天 ) 报销汇总机器人案例实战

训练网站:泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https…

企业网站建设的方法的相关问题的解决办法的问题

现在市场上比较大的公司都建立了自己的企业网站,比如华为、小米等,在他们的企业网站中,可以充分展示自己产品的优势,介绍公司的优质服务。 这都是让顾客改变购买想法的重要因素。 现在互联网发达了,很多人在购买产品的…

Linux内核之最核心数据结构之一:struct file(三十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

使用脚本自动同步时间(在 Windows 7/8/10/11 中)

你可以使用使用 w32tm 命令的批处理脚本来同步 Windows上的时间。 这是一个用于同步时间的简单批处理脚本: echo off echo 正在同步时间... w32tm /resync echo 时间同步完成。将以上代码保存在扩展名为.bat的文本文件中,例如sync_time.bat。 然后&…

推动制药行业数字化转型:基于超融合架构的MES一体机解决方案

随着中国对信息化重视程度的不断加深,制药行业作为国民经济的重要支柱之一,也在积极寻求通过数字化手段提升产业效率与产品质量。自党的十六大提出“以信息化带动工业化”的战略以来,制药业的这一转型探索尤为迫切。 在现代制药生产中&#…

Svg Flow Editor 原生svg流程图编辑器(四)

系列文章 Svg Flow Editor 原生svg流程图编辑器(一) Svg Flow Editor 原生svg流程图编辑器(二) Svg Flow Editor 原生svg流程图编辑器(三) Svg Flow Editor 原生svg流程图编辑器(四&#xf…

实时数仓之实时数仓架构(Hudi)

目前比较流行的实时数仓架构有两类,其中一类是以FlinkDoris为核心的实时数仓架构方案;另一类是以湖仓一体架构为核心的实时数仓架构方案。本文针对FlinkHudi湖仓一体架构进行介绍,这套架构的特点是可以基于一套数据完全实现Lambda架构。实时数…

LockSupport与线程中断机制

中断机制是个协商机制 Interrupt(): 将中断状态设置为true Interrupted():(静态方法) 1.返回当前线程的中断状态 2.将中断状态清零并设置为false is Interrupted(): 判断当前线程是否被中断 如何停止中断运行中的线程? 一个线程不应该由…

电脑关机速度很慢怎么解决?

给电脑关机,总是要很久才完全关闭。这是因为计算机运行了太长时间,并且打开的程序太多,则关闭时间超过十秒钟,这是正常的现象。还有就是计算机升级或补丁程序更新也将导致计算机缓慢关闭。此时,建议耐心等待关闭完成。…

Redis、Mysql双写情况下,如何保证数据一致

Redis、Mysql双写情况下,如何保证数据一致 场景谈谈数据一致性三个经典的缓存模式Cache-Aside Pattern读流程写流程 Read-Through/Write-Through(读写穿透)Write behind (异步缓存写入) 操作缓存的时候,删除…

实现DevOps需要什么?

实现DevOps需要什么? 硬性要求:工具上的准备 上文提到了工具链的打通,那么工具自然就需要做好准备。现将工具类型及对应的不完全列举整理如下: 代码管理(SCM):GitHub、GitLab、BitBucket、SubV…

探索智慧农业精准除草,基于高精度YOLOv5全系列参数【n/s/m/l/x】模型开发构建农田作物场景下杂草作物分割检测识别分析系统

智慧农业是未来的一个新兴赛道,随着科技的普及与落地应用,会有更加广阔的发展空间,关于农田作物场景下的项目开发实践,在我们前面的博文中也有很堵相关的实践,单大都是偏向于目标检测方向的,感兴趣可以自行…

百度智能云千帆,产业创新新引擎

本文整理自 3 月 21 日百度副总裁谢广军的主题演讲《百度智能云千帆,产业创新新引擎》。 各位领导、来宾、媒体朋友们,大家上午好。很高兴今天在石景山首钢园,和大家一起沟通和探讨大模型的发展趋势,以及百度最近一段时间的思考和…

牛客NC26 括号生成【中等 递归 Java,Go,PHP】

题目 题目链接: https://www.nowcoder.com/practice/c9addb265cdf4cdd92c092c655d164ca 思路 答案链接:https://www.lintcode.com/problem/427/solution/16924 参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参…

Llama模型下载

最近llama模型下载的方式又又变了,所以今天简单更新一篇文章,关于下载的,首先上官网,不管在哪里下载你都要去官网登记一下信息:https://llama.meta.com/llama2 然后会出现下面的信息登记网页: 我这里因为待…

软件工程学习笔记12——运行维护篇

运行维护篇 一、版本发布1、关于软件版本2、版本发布前,做好版本发布的规划3、规范好发布流程,保障发布质量 二、DevOps工程师1、什么是 DevOps 三、线上故障1、遇到线上故障,新手和高手的差距在哪里2、大厂都是怎么处理线上故障的 四、日志管…