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

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

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

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

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

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Javascript原型与原型链由浅入深，让你再不害怕大小厂面试官，满满干货，遇到原型链的题就开心
luolvzhou的博客
12-25 1518
什么是原型？有铁子肯定会霸气回怼，ES6没出class 类的时候，Javascript想要实现面向对象这一层面的数据共享，想要占用的内存更小一点，想要保持自己面向对象特征下的封装，继承，多态，然后提供了原型和原型链来方面实现这一特性。当然，这话是没错的，可是你拿这个东西真正去理解原型和原型链的时候，你又懵了，因为面试官又会问，ES6的class跟原型之间什么关系，有什么共性？然后又答不上来。
vue前端开发JavaScript与Vue核心概念解析：闭包、原型链、作用域链及Vue生命周期详解
04-03
对于JavaScript，文档解释了闭包、原型链、作用域链、箭头函数、this指向、Promise、事件轮询等关键概念，并简要提及了ES6的新特性如let、const、解构赋值、修饰符、模块化和继承。此外，还介绍了DOM操作、JSON处理...
Web前端面试指导(二十七)：原型是什么？原型链是什么？
热门推荐
雄领IT的专栏
10-06 1万+
题目点评 这道题目是属于JavaScript比较难理解的知识点，涉及到的知识也非常抽象深奥，属于JavaScript面向对象思维范畴，如果没有一点面向对象的编程思维的同学，想必是难倒了，即使有一定OOP的同学要回答起来也是比较费劲，不是一时半会能说清楚。但面试官问到了，说明他是懂技术的，用比较专业的术语来回答就好，这样会比较言简意赅。 解题思路 原型是什么？ 在JavaScript中原型是
前端面试总结——原型和原型链
weixin_44858541的博客
03-15 366
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 771
前端面试常考 “原型与原型链”
【web前端面试必问2】js原型和原型链的理解（透彻）
m0_56349322的博客
02-17 929
原型 function Fn() {} 1）Fn是一个构造函数，每个构造函数都会自动生成一个prototype属性，指向一个空对象，这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。 2）原型对象中有一个属性constructor，它指向函数对象 console.log(Date.prototype.constructor===Date) function函数有一个prototype属性 ===》 显示原型属性 var fn = new Fn() 这里的fn就是一个...
前端面试：啥是原型？啥又是原型链？
小隐的博客
05-09 1340
原型与原型链 # 原型 概念 ES6以前，js有面向对象的特性但是没有明确的语法规范例如class关键字来生成对象，还是靠function来完成的（不得不吐槽ES6之前的js真的是一坨ES6语法以后再谈，还是先挖坑）以至于出现了这种情况。 console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true //函数是对象构造的 对象也是函数构造的，俩者即是函数也是对象 js的原型
前端面试复习2---面向对象编程/原型及原型链
EthanSmile
06-04 110
每个 JavaScript 对象都有一个内部属性，称为原型（prototype），它指向另一个对象。当我们引用对象的属性或方法时，JavaScript 引擎首先在对象自身上查找，如果找不到，就会沿着原型链向上查找，直到找到属性或方法或者到达原型链的顶部（Object.prototype）。
前端面试题：JS中的原型和原型链
欢迎来到我的博客
07-24 9099
JS的原型和原型链算是前端面试题的热门题目了，也是参加了几场面试，感觉好多次都被问到对原型和原型链的理解，所以今天也是索性把他给整理出来，一方面方便自己以后复习查看，另一方面也是给大家分享一下我对原型和原型链的理解。 ES6之前中并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。 什么是原型 每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。 这么说可能会有点
前端常见面试题之js基础(手写深拷贝-原型和原型链-作用域和闭包).md
04-08
- 准备前端面试的人员：提供常见面试题的详细解答和代码示例，助力面试准备。 - 想要深入学习 JavaScript 的开发者：深入探讨 JavaScript 的底层原理和特性，提升编程能力。 ### 使用场景及目标 - **学习场景**：...
前端面试资料-来呀-前端面试资料
06-18
这份名为"前端面试资料-来呀-前端面试资料"的压缩包，显然包含了为前端工程师准备的面试复习资源。为了帮助你更好地理解和掌握这些知识点，以下是一些核心的前端技术及其在面试中常见的考察点。 1. HTML与CSS基础：...
[JS]深入理解原型和原型链以及区别(包含面试题详解)
wyy7293的博客
05-09 1856
原型 一个可以被复制（或者叫克隆）的一个类，通过复制原型可以创建一个一模一样的新对象，也可以说原型就是一个模板，在设计语言中更准确的说是一个对象模板 原型是定义了一些公用的属性和方法，利用原型创建出来的新对象实例会共享原型的所有属性和方法 所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 所有引用类型的__proto__属性指向它构造函数的prototype 说说对原型的理解(面试题) 在 Jav
Vue开发工具使用技巧
2509_93946471的博客
11-24 287
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
MyBatis + PageHelper 分页内幕，PageHelper 是如何动态构建 LIMIT 分页 SQL 的
最新发布
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
11-26 215
若依系统中有很多的表格数据、后端接口实体中并没有看到有接收分页大小和页码的属性，在系统的mapper层面SQL语句中并没有看到对应的分页限制。它是如何实现这个分页效果的呢？是将所有的数据查询出来，然后再分页吗？这样效率岂不是非常低。带着这样的疑问，稍微研究了一下这个系统的分页方法。更多详细文章后端是通过从 HttpServletRequest 对象中获取分页的页码和大小，然后创建Page分页对象，在执行sql查询的时候，动态构建分页限制条件。从而实现分页，并不是在查询到所有数据之后再进行的分页处理。
一文让你了解UI自动化测试
HUACE4600的博客
11-26 524
这些资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。
Python全栈开发项目——AI智能聊天机器人
qiao_yue的博客
11-24 789
本项目实现了AI聊天功能，具有语音输入和聊天背景自定义等亮点功能
Spring Boot 实战篇（四）：实现用户登录与注册功能
2509_94010201的博客
11-23 1012
在构建 Web 应用程序时，用户登录与注册功能是常见且重要的部分。以下将详细介绍在 Spring Boot 项目中实现用户登录与注册功能的步骤，并附上相应的代码示例。
Rust在Web中的前端框架
2509_93947499的博客
11-26 192
Yew用了虚拟DOM来优化渲染，组件状态管理也简单，举个例子，你写个计数器组件，代码结构清晰，还能用Rust的强类型系统避免运行时错误。Seed不用虚拟DOM，直接操作DOM，性能可能更好，但代码写起来得小心点，别把浏览器搞崩了。想想看，用户点个按钮，背后可能触发一堆异步操作，要是用JavaScript，一不小心就内存泄漏或者变量污染，调试起来头大。另外，Rust的性能接近C++，编译成WASM后，在浏览器里执行效率高，能处理复杂计算或者图形渲染，比如游戏或者数据可视化应用，加载速度嗖嗖的。
React性能问题导致的页面卡顿处理
2509_93941399的博客
11-23 255
打开React DevTools的Profiler录制功能，操作表格筛选时发现某个子组件在每次输入框变化时都会重新渲染。明明数据没变化，整个子树却跟着刷新的元凶就是：父组件传递的props是每次重新生成的匿名对象！性能优化没有银弹，关键是要理解React的渲染机制，对症下药才能药到病除。在实际项目中还遇到了一个隐藏很深的性能陷阱：Context引起的全局重渲染。当我们在根组件提供主题配置Context时，任何主题值的变动都会导致所有消费组件重渲染，哪怕它们只使用了Context中的部分数据。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

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

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

打赏作者

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

抵扣说明：

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

余额充值