如何回答面试中的JavaScript原型链问题

划重点,这是一道面试必考题,我就问过很多面试者这个问题,✧(≖ ◡ ≖✿)嘿嘿

马上到年底了,相信最近有很多同学会有蠢蠢欲动的想法,JS中的原型是面试中的必考题,很多面试官都喜欢考察原型相关的知识,没错,我就是其中之一

原型作为JS中的核心知识点,可以考察的知识点和细节非常多,当然面试不是为了难住大家,而是希望了解大家的知识边界在哪里,原型知识可以反应大家对JS的了解程度,对技术的兴趣,是否喜欢钻研等

原型的考察,绕不过原型链,面试中如果能把原型链画清楚,一定会加分不少,但我发现大部分面试者在面试中很难画好原型链,于是我不禁陷入深深的思考

站在面试官的角度,我希望面试者能清晰、快速、无误的画出原型链,本文是我思考良久后,总结的快速绘制原型链的方法

题目一

面试中,我经常会考察如何实现原型继承,再下一步才是考察原型链,一般我会写出下面的代码,然后让大家绘制原型链

scala 复制代码
class A {}
class B extends A {}

const b = new B();

面对这个题,我们先来绘制b和B的原型链,这里面涉及到三个对象分别是b,BB.prototype,相信大部分同学能够画清楚这几个的关系,由于是面试中只有笔和纸,又要清晰快速,所以我们可以像下面这样画,箭头代表关系,箭头上面的字代表属性名字

上面包括__proto__constructorprototype三个部分,能画出来上面的只能算是不及格,接下来我们在把A的部分加进去

接下来我们把Function加进去,这一步是大家比较容易忽略的,Function比较特殊的地方就是Function.__proto__指向自己的Function.prototype,图中红色的线

最后再把Object加进去,我们的原型链就大工告成了,可以大家可以慢慢消化一下( ^▽^ )

题目二

基本上面试中能在5分钟内画出来上面的原型链,那么应该能够让面试官满意了,但我一般会再考一些原型链相关的题目,比如下面这个,这道题乍一看容易被绕进去,其实是考察大家对instanceof机制的理解,再结合上面的原型链,就很假单了

javascript 复制代码
// 下面两行语句的结果是,为什么
Function instanceof Object
Object instanceof Function

再比如下面的写法和上面写法的有什么区别?该如何弥补?

javascript 复制代码
function A() {}
function B() {}

B.prototype = Object.create(A.prototype);

const b = new B();

再比如,如何不通过类和函数实现继承?等等,希望大家能够举一反三,灵活应对。

总结

本文围绕面试,给大家讲解了原型链的问题,希望能够帮助大家。

相关推荐
Q741_1479 分钟前
C++ 位运算 高频面试考点 力扣 371. 两整数之和 题解 每日一题
c++·算法·leetcode·面试·位运算
EveryPossible9 分钟前
第一版代码
前端·javascript·css
ObjectX前端实验室21 分钟前
【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现
前端·计算机图形学·图形学
java水泥工30 分钟前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
杨超越luckly33 分钟前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
ObjectX前端实验室1 小时前
【图形编辑器架构】节点树篇 — 从零构建你的编辑器数据中枢
前端·计算机图形学·图形学
ikun778g1 小时前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
IT_陈寒1 小时前
React Hooks 实战:这5个自定义Hook让我开发效率提升了40%
前端·人工智能·后端
三月的一天2 小时前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js