前端面试题每日一练,测测你对JavaScript原型继承和 instanceof 的理解

今天的挑战题目涉及到JavaScript中的原型继承和 instanceof 操作符的使用。我们将通过分析一个关于构造函数和原型链的例子,来探索对象继承的机制,以及如何判断对象的类型。让我们一起深入解析这段代码,看看它会输出什么以及为什么。

代码解析

首先,代码定义了两个构造函数 ShapeCircle

go 复制代码
function Shape() {}
function Circle(radius) {}
  • Shape 是一个简单的构造函数,目前它不执行任何操作。

  • Circle 是一个构造函数,它接受一个参数 radius,但目前也没有执行任何操作。

接下来,代码通过 Object.create 设置了 Circle.prototype 的原型:

go 复制代码
Circle.prototype = Object.create(Shape.prototype);
  • 这行代码的作用是让 Circle 的原型 (Circle.prototype) 继承自 Shape 的原型 (Shape.prototype)。

  • 这意味着通过 new Circle() 创建的对象,它的原型链上会包含 Shape.prototype,即 CircleShape 的子类。

然后,代码创建了一个 Shape 类型的对象:

go 复制代码
const shape = new Shape();
  • 这里我们使用 new Shape() 创建了一个对象 shape。它的原型是 Shape.prototype

最后,代码使用 instanceof 操作符来检查 shape 是否是 Circle 的实例:

go 复制代码
console.log(shape instanceof Circle);

理解 instanceof

instanceof 操作符用于检测某个对象是否是某个构造函数的实例。其工作原理是检查对象的原型链上是否存在该构造函数的 prototype 属性。

在这个例子中:

  • shape 对象的原型链是 Shape.prototype

  • Circle.prototype 的原型是 Shape.prototype

但是,shape 对象的原型链并不直接包含 Circle.prototype,而是直接指向 Shape.prototype,因此:

  • shape instanceof Circle 会返回 false,因为 shape 的原型链中不包括 Circle.prototype

输出结果

根据上述分析,最终的输出结果是:

go 复制代码
console.log(shape instanceof Circle); // 输出 false

结束

这道题目展示了JavaScript中的原型继承和 instanceof 操作符的工作原理。尽管 Circle 的原型链中包含 Shape.prototype,但反过来检查 Shape 的实例是否属于 Circle 并不会成立。理解原型链的层次关系对于正确解答这道题目至关重要。你答对了吗?欢迎在评论区分享你的答案和见解!

每天一道面试题,帮助你提高编程技能,不断进步!记得关注哦!

相关推荐
IT瘾君1 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端2 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
普if加的帕2 小时前
java Springboot使用扣子Coze实现实时音频对话智能客服
java·开发语言·人工智能·spring boot·实时音视频·智能客服
拉不动的猪2 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程2 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常3 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴3 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss