如何回答面试中的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();

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

总结

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

相关推荐
2分钟速写快排19 分钟前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60611 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角2 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!2 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰2 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
Interview Aid1123 小时前
Walmart Global Tech SDE 三轮面经|基础、并发、压力面
面试·职场和发展
mayaairi4 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen4 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马5 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu5 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss