前端技能树，面试复习第 12 天 - 原型与原型链

已于 2022-07-14 07:50:52 修改
阅读量253 收藏 1
点赞数 1
分类专栏： 前端面试复习笔记 文章标签： 前端 原型与原型链
于 2022-06-28 08:26:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ImagineCode/article/details/125495171
版权
本文详细介绍了JavaScript中的原型和原型链概念，包括原型的理解、原型链的形成和查找机制、原型的修改与重写，以及如何获取对象非原型链上的属性。通过实例解析，帮助读者深入理解原型链的终点和对象继承的原理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 对原型、原型链的理解

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确地说，这些属性和方法定义在 Object 的构造器函数(constructor functions)之上的 prototype 属性上，而非对象实例本身。

理解对象的原型（可以通过Object.getPrototypeOf(obj)或者已被弃用的

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Javascript原型与原型链由浅入深，让你再不害怕大小厂面试官，满满干货，遇到原型链的题就开心
luolvzhou的博客
12-25 1383
什么是原型？有铁子肯定会霸气回怼，ES6没出class 类的时候，Javascript想要实现面向对象这一层面的数据共享，想要占用的内存更小一点，想要保持自己面向对象特征下的封装，继承，多态，然后提供了原型和原型链来方面实现这一特性。当然，这话是没错的，可是你拿这个东西真正去理解原型和原型链的时候，你又懵了，因为面试官又会问，ES6的class跟原型之间什么关系，有什么共性？然后又答不上来。
Web前端面试指导(二十七)：原型是什么？原型链是什么？
热门推荐
雄领IT的专栏
10-06 1万+
题目点评 这道题目是属于JavaScript比较难理解的知识点，涉及到的知识也非常抽象深奥，属于JavaScript面向对象思维范畴，如果没有一点面向对象的编程思维的同学，想必是难倒了，即使有一定OOP的同学要回答起来也是比较费劲，不是一时半会能说清楚。但面试官问到了，说明他是懂技术的，用比较专业的术语来回答就好，这样会比较言简意赅。 解题思路 原型是什么？ 在JavaScript中原型是
前端面试总结——原型和原型链
weixin_44858541的博客
03-15 348
1.class class People { constructor(name) {this.name=name;} eat(){ console.log(this.name+'is eating something') } } const zhangsan=new People(张三); console.log(zhangsan.name); zhangsan.eat(); class Student extends People{ constructor(name,numbe
前端面试常考 | js原型与原型链
云创网络工作室官方账号
01-03 726
前端面试常考 “原型与原型链”
【web前端面试必问2】js原型和原型链的理解（透彻）
m0_56349322的博客
02-17 907
原型 function Fn() {} 1）Fn是一个构造函数，每个构造函数都会自动生成一个prototype属性，指向一个空对象，这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。 2）原型对象中有一个属性constructor，它指向函数对象 console.log(Date.prototype.constructor===Date) function函数有一个prototype属性 ===》 显示原型属性 var fn = new Fn() 这里的fn就是一个...
前端面试：啥是原型？啥又是原型链？
小隐的博客
05-09 1285
原型与原型链 # 原型 概念 ES6以前，js有面向对象的特性但是没有明确的语法规范例如class关键字来生成对象，还是靠function来完成的（不得不吐槽ES6之前的js真的是一坨ES6语法以后再谈，还是先挖坑）以至于出现了这种情况。 console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true //函数是对象构造的 对象也是函数构造的，俩者即是函数也是对象 js的原型
前端面试复习2---面向对象编程/原型及原型链
EthanSmile
06-04 90
每个 JavaScript 对象都有一个内部属性，称为原型（prototype），它指向另一个对象。当我们引用对象的属性或方法时，JavaScript 引擎首先在对象自身上查找，如果找不到，就会沿着原型链向上查找，直到找到属性或方法或者到达原型链的顶部（Object.prototype）。
前端面试题：JS中的原型和原型链
欢迎来到我的博客
07-24 8951
JS的原型和原型链算是前端面试题的热门题目了，也是参加了几场面试，感觉好多次都被问到对原型和原型链的理解，所以今天也是索性把他给整理出来，一方面方便自己以后复习查看，另一方面也是给大家分享一下我对原型和原型链的理解。 ES6之前中并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。 什么是原型 每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。 这么说可能会有点
前端常见面试题之js基础(手写深拷贝-原型和原型链-作用域和闭包).md
04-08
- 准备前端面试的人员：提供常见面试题的详细解答和代码示例，助力面试准备。 - 想要深入学习 JavaScript 的开发者：深入探讨 JavaScript 的底层原理和特性，提升编程能力。 ### 使用场景及目标 - **学习场景**：...
前端面试资料-来呀-前端面试资料
06-18
这份名为"前端面试资料-来呀-前端面试资料"的压缩包，显然包含了为前端工程师准备的面试复习资源。为了帮助你更好地理解和掌握这些知识点，以下是一些核心的前端技术及其在面试中常见的考察点。 1. HTML与CSS基础：...
vue前端开发JavaScript与Vue核心概念解析：闭包、原型链、作用域链及Vue生命周期详解
04-03
对于JavaScript，文档解释了闭包、原型链、作用域链、箭头函数、this指向、Promise、事件轮询等关键概念，并简要提及了ES6的新特性如let、const、解构赋值、修饰符、模块化和继承。此外，还介绍了DOM操作、JSON处理...
[JS]深入理解原型和原型链以及区别(包含面试题详解)
wyy7293的博客
05-09 1803
原型 一个可以被复制（或者叫克隆）的一个类，通过复制原型可以创建一个一模一样的新对象，也可以说原型就是一个模板，在设计语言中更准确的说是一个对象模板 原型是定义了一些公用的属性和方法，利用原型创建出来的新对象实例会共享原型的所有属性和方法 所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 所有引用类型的__proto__属性指向它构造函数的prototype 说说对原型的理解(面试题) 在 Jav
HTML 文本省略号
修炼魔法中....
06-10 483
本文详细介绍了实现文本省略号的多种方式，包括单行、省略多行、响应式适配和自定义样式等。其中，单行省略通过设置 white-space、overflow 和 text-overflow 属性实现；多行省略推荐使用 -webkit-line-clamp，兼容性不佳时可用伪元素或 JavaScript 实现。文章还探讨了在表格、响应式设计中应用省略号的技巧，并提供了常见问题排查、兼容性处理、性能优化和最佳实践建议，帮助前端开发者灵活高效地处理文本溢出问题。
前端面试专栏-基础篇：6. 跨域方案全对比（CORS/JSONP/Nginx）与安全攻防
爱分享的程序员
06-13 953
协议（Protocol）：如http、https、ftp等域名（Domain）：包括主域名和子域名端口（Port）：默认端口可以不显式写出只有当这三个要素完全相同时，才被认为是同源。以下是一些典型示例说明：（HTTP协议）（HTTPS协议）→ 不同源（主域名）（子域名）→ 不同源（完整域名）（不同顶级域名）→ 不同源（8080端口）（8081端口）→ 不同源（默认80端口）（指定8080端口）→ 不同源。
滚动—横向滚动时，如何直接滚动到对应的内容板块
qq_45475788的博客
06-11 385
参数的兼容性可能稍差一些，特别是在一些较旧的浏览器中。会滚动浏览器的视口。：默认行为，滚动会立即发生，可能会导致页面快速跳动。，则元素的顶部会尽可能地与视口的顶部对齐。，则元素的底部会尽可能地与视口的底部对齐。：根据当前滚动位置，选择最接近的对齐方式。：根据当前滚动位置，选择最接近的对齐方式。：滚动会以平滑的方式进行，用户体验更好。：元素的左边界会与视口的左边界对齐。：元素的右边界会与视口的右边界对齐。：元素的顶部会与视口的顶部对齐。：元素的中心会与视口的中心对齐。：元素的底部会与视口的底部对齐。
如何判断一个bug，是前端还是后端的？
海姐软件测试的博客
06-10 1115
**摘要：**作为测试工程师，精准判断Bug归属（前端/后端）的核心方法包括：1）通过抓包工具分析接口请求/响应数据，请求异常属前端，响应错误属后端；2）验证数据库与日志，数据未更新可能为后端问题；3）DOM操作验证UI层问题。典型前端Bug包括布局错乱、事件失效等，后端Bug多表现为5xx错误或逻辑缺陷。建议结合Mock测试、日志追踪和团队协作模板（如Jira+Swagger），基于数据证据而非主观猜测定位问题。掌握这套方法可高效解决90%的Bug归属问题。
随记 minio的图片跨域问题
zqx_7的博客
06-11 270
文章摘要：开发时使用IP访问无问题，上线后因IP与域名不同源出现跨域问题。尝试通过nginx代理但误指向前端静态资源。解决方案是单独为图片访问地址配置子域名：先绑定IP，申请SSL证书（支持动态域名），然后正确配置nginx代理规则。最终可通过配置好的专属域名访问图片资源，有效解决跨域问题。整个处理过程涉及域名绑定、SSL配置和nginx代理设置三个关键步骤。（148字）
vue mod方法
张晨光老师的播客
06-12 358
row.age + “”：将年龄转为字符串，防止数值类型导致的问题（如表单绑定的输入框要求字符串）。mod(row) 方法用于将指定行 (row) 的数据加载到编辑表单中，并显示对话框供用户修改。password：清空密码字段，可能是为了安全考虑（如编辑时不修改密码）或区分新增/编辑逻辑。row.sex + “”：性别字段同理，可能原始数据为布尔值或枚举，需统一为字符串格式。原因：确保对话框完全渲染后，再将数据填充到表单，避免因DOM未就绪导致的数据绑定问题。若不允许修改，可移除密码字段或添加提示说明。
Fast API 中的用户认证：深入理解 JWT（JSON Web Tokens）
最新发布
m0_53827889的博客
06-14 474
本文深入探讨了在FastAPI中利用JWT实现安全API认证的方案。文章首先强调了API认证的重要性，对比了基于会话和基于令牌两种认证方式的优缺点。重点剖析了JWT的结构(Header,Payload,Signature)及其无状态认证的工作原理，特别指出JWT虽可验证但未加密的特性，以及安全密钥保护的必要性。随后介绍了使用passlib和bcrypt进行密码哈希存储的方法。最后展示了如何将这些技术整合到FastAPI应用中，通过SQLModel实现用户注册、登录和JWT认证的完整流程。文章为开发者提供了构
前端面试必读：JS内置对象与原型链深度解析
总结来说，本书为前端开发人员提供了一个非常有用的面试题集，它不仅包括常见的前端面试题目，还深入讲解了JavaScript的核心概念，如内置对象和原型链。这些知识点对于想要通过前端技术面试的程序员来说是必须掌握的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值