经常会采坑的javascript原型应试题

news2024/11/20 12:20:41

一. 前言

原型和原型链在面试中历来备受重视,经常被提及。说难可能也不太难,但要真正完全理解,吃透它,还是要多下功夫的。

下面为大家简单阐述我对原型和原型链的理解,若是觉得有说的不对的地方,还请帮忙指正,或者关闭页面不浪费您的宝贵时间(害怕)

二. 正文

原型

1.  JavaScript所有的对象本质上都是通过new 函数创建的,包括对象字面量的形式定义对象(相当于new Object()的语法糖)。

2.  所有的函数本质上都是通过new Function创建的,包括ObjectArray
(隐式执行,是我们看不到的但在执行过程中发生过的)

3.  所有的函数都是对象。

剖析

Prototype(显式原型)

222.png

每个函数都有一个属性prototype,它就是原型,默认情况下它是一个普通Object对象,这个对象是调用该构造函数所创建的实例的原型。

__proto__(谷歌浏览器已更新为[[prototype]],隐式原型)

JavaScript中所有对象(除了null)都具有一个__proto__属性,该属性指向该对象的原型。

上图中,函数身上的属性,会被显式的继承到,即  //this.name=’wn’, 此时显式的不存在,所以继承不到,但是函数的原型上有属性,就会被隐式的继承到,即

[[Prototype]]: Object
name: “小南”

contructor属性

333.png

参考 前端进阶面试题详细解答

JavaScript同样存在由原型指向构造函数的属性:constructor,即Func.prototype.constructor --> Func

原型链

实例对象在查找属性时,如果查找不到,就会沿着__proto__去与对象关联的原型上查找,如果还查找不到,就去找原型的原型,直至查到最顶层,这也就是原型链的概念。

原型树状图.png

通过这张图我们可以注意到,构造函数Foo的原型prototype 和 构造函数Foo所创建出来的对象实例f1,f2的原型__proto__是一样的都指向Foo().prototype.

这里我们可以继续思考,往下探索一下,既然Foo().prototype也是一个对象,那是不是Foo().prototype也有自己的对象原型__proto__呢.答案是肯定的,图中我们也可以看到Foo().prototype的对象原型__proto__指向的是Object.prototype. Object作为最顶端的构造函数,可以看到所有的对象都会通过原型链指向它.这就是为什么新建的对象为什么能够使用 toString() 等方法的原因.

但是我们可以发现Object.prototype也有自己的__proto__ 但是却指向的是null,null为原型链的终点.

注意!!!

那么这里还个问题,细心的小伙伴已经发现了,构造函数有自己的原型prototype,但是构造函数也是对象啊,构造函数也有没有__proto__呢.答案是有的.因为每个 JavaScript 函数实际上都是一个 Function 对象。运行 function(){}).constructor === Function // true 便可以得到这个结论。

而且通过图我们也可以发现 Foo__proto__指向Function.prototype,而且这里还有个特例,上文也说明了每个 JavaScript 函数实际上都是一个 Function 对象,所以Function的构造函数原型prototype和对象原型__proto__都是指向同一个Function.prototype.

结语

原型和原型链算是js里的一座大山,比较偏概念性,在面试时是经常出现的,所以闲时可以多拿出来琢磨。
鄙人写的也略有浅显,希望能帮到查阅的小伙伴呀。
码字不易,还望看到这里的小伙伴用用发财的小手点点赞,与君共勉!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

必备技能,MySQL 查找并删除重复行

本文讲述如何查找数据库里重复的行。这是初学者十分普遍遇到的问题。方法也很简单。这个问题还可以有其他演变,例如,如何查找“两字段重复的行”(#mysql IRC 频道问到的问题) 如何查找重复行 第一步是定义什么样的行才是重复行。…

碳酸钾碱性溶液除钙镁软化树脂

碳酸钾是重要的基本无机化工、医药、轻工原料之一,主要用于光学玻璃、电焊条、电子管、电视显像管、灯泡、印染、染料、油墨、照相药品、泡花碱、聚酯、炸药、电镀、制革、陶瓷、建材、水晶、钾肥皂及药物的生产。用作气体吸附剂,干粉灭火剂,…

Spring Boot 整合 Groovy 脚本,实现动态编程

Groovy简介 Groovy 是增强 Java 平台的唯一的脚本语言。它提供了类似于 Java 的语法,内置映射(Map)、列表(List)、方法、类、闭包(closure)以及生成器。脚本语言不会替代系统编程语言&#xff…

「Redis数据结构」哈希对象(Hash)

「Redis数据结构」哈希对象(Hash) 文章目录「Redis数据结构」哈希对象(Hash)一、概述二、编码ZipListHashTable三、编码转换一、概述 Redis中hash对象是一个string类型的field和value的映射表,hash特别适合用于存储对…

RabbitMQ:消息模型

RabbitMQ 提供了 6 种消息模型,分别为:单生产单消费模型(Hello World)、消息分发模型(Work queues)、Fanout 消息订阅模式(Publish/Subscribe)、Direct 路由模式(Routing…

基于JSP的手工艺品在线网站

摘 要 在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括手工艺品在线网站的网络应用,在外国手工艺品已经是很普遍的方式,不过国内的手工艺品可能还处于起步阶段。手工艺品在线网站具有在线下单功能。手…

详解vue中watch的用法

前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作。但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法。 watch? 因为 vue…

DocuWare平台——用于文档管理和工作流程自动化的内容服务平台详细介绍(上)

DocuWare平台——用于文档管理和工作流程自动化的内容服务平台 成功实现办公自动化所需的一切 DocuWare 是一个先进的平台,可让您集中、快速、有效地管理、处理和利用业务信息。 我们的文档管理和工作流程解决方案的各项功能可以集成到任何 IT 系统中,…

源码解析:从 kubelet、容器运行时看 CNI 的使用

这是 Kubernetes 网络学习的第三篇笔记。 深入探索 Kubernetes 网络模型和网络通信认识一下容器网络接口 CNI(本篇)源码分析:从 kubelet、容器运行时看 CNI 的使用从 Flannel 学习 Kubernetes VXLAN 网络Cilium CNI 与 eBPF... 在上一篇中&…

web前端期末大作业 基于HTML+CSS+JavaScript程序员个人博客模板(web学生作业源码)

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

翻译: ChatGPT 的激发敬畏、恐惧、特技和试图绕过其护栏的尝试

来自 OpenAI 的新聊天机器人正在激发敬畏、恐惧、特技和试图绕过其护栏的尝试。 以下是 DALL-E 2 在给出提示时生成的内容,“采用 AI 聊天机器人形式的分布式语言超级大脑。” “A distributed linguistic superbrain that takes the form of an A.I. chatbot.” 信…

WPS文件转Excel文件怎么转?建议看看这些方法

小伙伴们平时在接收文件的时候,有没有发现有些文件是以WPS格式进行保存的。这种格式的文件,如果没有使用相关的软件是没办法直接打开的。这种时候,其实我们可以将WPS转成其它office格式就可以打开它,进行编辑了。那你们知道WPS转E…

面试官:你说说Springboot的启动过程吧(5万字分析启动过程)

文章目录前言一、Springboot是什么二、启动流程2.1 构建Spring Boot项目2.2 启动的日志2.3 启动流程分析说明2.3.1 第一部分:SpringApplication的构造函数A、webApplicationType(web应用类型)B、引导注册初始化器C、设置初始化器D、设置监听器…

嵌入式开发-STM32硬件SPI驱动TFT屏

嵌入式开发-STM32硬件SPI驱动TFT屏这次用到的TFT屏CubeMX设置代码编写增加的内容需要注意问题代码下载这次用到的TFT屏 现在的TFT屏幕已经很便宜了,65536色屏幕,2.8英寸,分辨率320X240的液晶屏才20元,我为了图省事,多配…

[附源码]Nodejs计算机毕业设计基于JAVA快递配送平台Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分…

SpringBoot整合GitLab-CI实现持续集成

写在前面 🍁个人主页:微枫Micromaple ✨本期专栏:《0到1项目搭建》欢迎订阅学习~ 📌源码获取:GitCode、GitHub、码云Gitee 持续更新中,别忘了 star 喔~ 在企业开发过程中,我们开发的功能或者是修…

python之筛选图像中是否存在黑白背景

python之筛选图像中是否存在黑白背景 紧接上篇文章的需求,需要进行功能增加 某些图片存在背景丢失问题,出现黑白背景现象,这种需要排查,同样交给了自动化处理。 这次不比上次了,我搜罗了一堆资料,全是什么…

【实时数仓】DWD层需求分析及实现思路、idea环境搭建、实现DWD层处理用户行为日志的功能

文章目录一 DWD层需求分析及实现思路1 分层需求分析2 每层的职能3 DWD层职能详细介绍(1)用户行为日志数据(2)业务数据4 DWD层数据准备实现思路二 环境搭建1 创建maven工程2 修改配置文件(1)添加依赖&#x…

Faster RCNN精读

Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks Faster R-CNN:使用区域建议网络实现实时目标检测 优异的网络模型总是经得起时间的推敲,Faster RCNN便是其中一员。 目录 一、摘要 二、结论 三、介绍和相关工作 …

R语言析因设计分析:线性模型中的对比

对比度可用于对线性模型中的处理进行比较。 常见的用途是使用析因设计时,除析因设计外还使用控制或检查处理。在下面的第一个示例中,有两个级别(1和2)的两个处理(D和C),然后有一个对照 处理。此…