前端经典面试题:js必懂的原型和原型链
一. 前言
原型和原型链在面试中历来备受重视,经常被提及。说难可能也不太难,但要真正完全理解,吃透它,还是要多下功夫的。
下面为大家简单阐述我对原型和原型链的理解,若是觉得有说的不对的地方,还请帮忙指正,或者关闭页面不浪费您的宝贵时间(害怕)
二. 正文
原型
1. JavaScript
所有的对象本质上都是通过new 函数
创建的,包括对象字面量的形式定义对象(相当于new Object()
的语法糖)。
2. 所有的函数本质上都是通过new Function
创建的,包括Object
、Array
等 (隐式执行,是我们看不到的但在执行过程中发生过的)
3. 所有的函数都是对象。
剖析
Prototype(显式原型
每个函数都有一个属性prototype
,它就是原型,默认情况下它是一个普通Object
对象,这个对象是调用该构造函数所创建的实例的原型。
__proto__(谷歌浏览器已更新为[[prototype]],隐式原型)
JavaScript
中所有对象(除了null
)都具有一个__proto__
属性,该属性指向该对象的原型。
上图中,函数身上的属性,会被显式的继承到,即 //this.name=’wn’, 此时显式的不存在,所以继承不到,但是函数的原型上有属性,就会被隐式的继承到,即
[[Prototype]]: Object
name: "小南"
contructor属性
JavaScript
同样存在由原型指向构造函数的属性:constructor
,即Func.prototype.constructor --> Func
原型链
实例对象在查找属性时,如果查找不到,就会沿着__proto__
去与对象关联的原型上查找,如果还查找不到,就去找原型的原型,直至查到最顶层,这也就是原型链的概念。
通过这张图我们可以注意到,构造函数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里的一座大山,比较偏概念性,在面试时是经常出现的,所以闲时可以多拿出来琢磨。 鄙人写的也略有浅显,希望能帮到查阅的小伙伴呀。 码字不易,还望看到这里的小伙伴用用发财的小手点点赞,与君共勉!
前端经典面试题:js必懂的原型和原型链相关推荐
- Web前端经典面试试题(二)
上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题 一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...
- 前端多图片上传怎么控制顺序_Web前端经典面试题有哪些 如何能走向高薪之路...
Web前端经典面试题有哪些?如何能走向高薪之路?Web前端在近几年是越来越火热了,很多人看到了前端的高薪资,更看到了前端行业的发展前景,所以纷纷投入到学习前端技术学习中来.下面给大家总结整理一些Web ...
- Web前端经典面试题-JavaScript
Web前端经典面试题-JavaScript 看看银行卡余额,看看工资条,看看房价,动力就来了,大二狗,加油~~ JavaScript 原型链.类.继承.作用域.闭包.js运行机制/单线程.js数据类型 ...
- 2018最新Web前端经典面试试题及答案
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案.马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识 ...
- JavaScript前端经典面试题之ES6面试题汇总es6
推荐阅读: vue3面试题:最新vue3.0前端经典面试试题及答案(持续更新中--)_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使 ...
- 前端经典面试题(一)-李游Leo-专题视频课程
前端经典面试题(一)-89人已学习 课程介绍 在鱼龙混杂的前端行业中,面试一直是一门非常重要的课程,尤其是笔试题. 本课程精选了22道出现率颇高的经典的前端面试题,从浅入深的了解认知这 ...
- 前端经典面试题(二)-李游Leo-专题视频课程
前端经典面试题(二)-80人已学习 课程介绍 在鱼龙混杂的前端行业中,面试一直是一门非常重要的课程,尤其是笔试题. 本课程精选了14道出现率颇高的经典的前端面试题,从浅入深的了解认知这 ...
- 前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)
(以下所有答案仅供参考) 简答题 1.什么是防抖和节流?有什么区别?如何实现? 参考答案 防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路: 每次触发事件 ...
- Web前端经典面试试题(一)
本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案.眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端 ...
最新文章
- 应用案例 | Blink 有何特别之处?菜鸟供应链场景最佳实践
- angular点击按钮弹出页面_Axure RP8:如何做出点击按钮切换页面效果?
- java+arrayblockquene_java集合(五)Queue集合之ArrayBlockingQueue 详解
- 箱线图的四分位怎么计算_Minitab图形 | 箱线图—3解释结果
- scikit-learning_特征分析(数据挖掘入门与实践-实验7)
- 根据extension field搜索product的技术实现
- android 获取程序,Android获取桌面应用程序
- python package安装包_安装Python包(第三方库)
- python爬取京东手机参数_python抓取京东小米8手机配置信息
- 遍历系统进程和对应模块以及创建进程
- 集群资源管理与任务调度系统综述
- anaconda怎么打开python文件_anaconda 运行.py文件
- 网络开盘选房微信抢房软件下载及使用教程
- Syzmlw 蜗居大结局f
- Cutting Bamboos【主席树+二分】
- 想要更高效地使用云计算,推荐学习云计算部署的五大策略
- 20220317北京雪
- Daily Practice 5th:Educational Codeforces Round 120 (Rated for Div. 2)
- 论文投稿指南——中文核心期刊推荐(计算机技术)
- STM32超低功耗入门之停止模式