[暑假]什么叫做原型?原型链?原型对象? [待补充]

原创 已于 2022-08-23 13:37:06 修改 · 217 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#原型模式 #javascript #开发语言

于 2022-08-23 13:29:18 首次发布
本文介绍了JavaScript中的原型和原型链概念。原型是函数的prototype属性，用于创建公共区域，存放对象共有的属性和方法。原型链是由__proto__属性连接的原型构成，当查找对象属性时，会在自身及原型链上进行搜索。通过原型链，对象可以继承和访问构造函数原型上的属性和方法。理解这一机制对于深入学习JavaScript的继承和原型非常重要。

JS 语言的继承机制原型和原型链

什么叫做原型?

原型就是 prototype

原型说白了指的就是函数的一个prototype属性, 同时原型也是个普通对象

  我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype
      这个属性对应着一个对象，这个对象就是我们所谓的原型对象

   如果函数作为普通调用prototype时是没有任何作用的
   当函数以构造函数调用时，它所创建的对象都会有一个隐含的属性，
      指向该构造函数的原型对象，我们可以通__proto__来访问该属性

      原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象
          我们可以将对象中共有的内容，统一设置到原型对象中

        当我们访问对象的一个属性或方法时，它会现在对象自身中寻找  如果有则直接使用
      如果没有则去对象自身的原型对象中去找

    我们创建函数时，可以将这些对象共有的属性和方法，统一添加到构造的原型对象中
        这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
 

原型链是什么?

__proto__是原型的链接点

原型链是由proto链接而成的链

字节跳动暑期实习生一面面经 大三
LimonSea的博客
04-11 7020
身份：双非本科大三，大二从小程序开始学起前端，之后自学前端。 自我介绍 了解box-sizing吗？ 这里脑子没转，说了不太了解。。面试官特别好，是会引导着你去回答问题的。 了解盒模型吗？ 了解的，盒模型分为标准盒模型和IE盒模型。标准盒模型是包括margin，padding，border，content。标准盒模型的width只包括content。而IE盒模型width包括了borde...
大三后端暑期实习面经总结——SSM&微服务框架篇
欢迎来到 Baret-H 的博客
05-28 4233
博主现在大三在读，从三月开始找暑期实习，暑假准备去tx实习啦！总结下了很多面试真题，希望能帮助正在找工作的大家！相关参考都会标注原文链接，尊重原创！ 目录1. mvc、mvp、mvvmMVC架构MVP模式MVVM模式2. Java服务器有哪些3. 跨域及其解决方式4. MyBatis优缺点5. #{}和${}的区别是什么6. 简述Mybatis的插件运行原理，如何编写一个插件7. Spring是什么8. 对AOP的理解9. 对IoC的理解10. 如何实现一个IoC容器11. BeanFactory和..
动画：什么是闭包？
小鹿动画学编程
11-09 4952
写在前边 、 正在学习初学前端小伙伴，会感觉 HTML 和 CSS 太简单了，没什么挑战性。那是你没有学过 JS ，JS 中太多的概念初期学习的时候也是很懵逼的，比如 this、原型链、闭包等，即是重点，又是难点。但是你懂了之后会发现很简单，很好理解。 因为小鹿暑假去面试，每场面试基本都是必问的，不仅要知道理论，还要问你在实际项目中的实践，这部分内容很多人常常在实战中忽略掉。 今天的内容，就是...
你逛过凌晨4点的校园吗？ -- 前端人的漫漫长路
热门推荐
小丞同学
12-14 2万+
时间一晃而过，弹指之间，2021 年已经接近尾声，回首望去，过往皆是青春，来看看这个前端新人的漫漫成长经历吧~
斯坦福大学 Design School 所倡导设计思维的原则和步骤是什么？
BM_Uranus的博客
01-23 1万+
彭奕亨，工业设计幼儿园在读 知乎用户、潘橙、知乎用户 等人赞同 在知乎上搜了一下，发现没有太多关于Design Thinking的讨论，特地来总结一下（多图警告！手机党慎入！！）。 我于2012年暑假参加了一个在Stanford University办的交流项目，叫 Exchange for Social Entrepreneurs and Leaders (XSEL), 主办
一个博士生接受怎样的训练是完整、全面的科研训练？
qq_41854911的博客
07-10 6148
我粗算了一下对机器学习（偏理论和方法论 不偏工程）大概30个技能点吧（可能增加）每个点我分成 高中初 三个级别 即总共90分 为了方便理解 默认本科毕业送基础分10分 凑到100分以我自己为例 我入学博士的时候是英国本科 大致上7+10=17分博一（21分）：上数学系博士课和机器学习的入门课 并多次参加kaggle 第一次使用tensorflow但不会读paper 更不会写 找了几个做ML的老师结果都被拒了 试着了解了几个女生但没遇到合适的博二上（31分）：刚开学遇到了我现在的导师 开始了第一个线性模型项目
（转）从入门到精通：如何零基础做一款Roguelike游戏？
lMonster81
07-09 4635
本文转自：从入门到精通：如何零基础做一款Roguelike游戏 供自己学习和收藏 在游戏行业，Roguelike是最受独立游戏开发者青睐的玩法之一，凭借随机生成的地图、不可挽回的单向进程、非线性故事和复杂的系统，这类游戏的重复性极高，近年来国内独立开发者也对Roguelike十分感兴趣。 而且比较特别的是，这个品类的开发者与玩家之间的界限很模糊，不少都是因为热爱某个游戏，想要制作...
如何为编程爱好者设计一款好玩的智能硬件（三）——该选什么样的MCU呢？
weixin_33830216的博客
10-09 262
一、我的构想：如何为编程爱好者设计一款好玩的智能硬件（一）——即插即用、积木化、功能重组的智能硬件模块构想 二、别人家的孩子：如何为编程爱好者设计一款好玩的智能硬件（二）——别人是如何设计硬件积木的！ 三、MCU选型： 　　搬砖的很勤劳、很努力也很能坚持，但大多数都只是赚血汗钱。我搬过砖，那是在高考完的暑假，在我的强烈要求下跟...
[OS] mmap | fd是什么 | inode机制 | vfs封装
一个人知道自己为什么而活，他就能够接收任何一种生活
04-15 681
学的越多就越感觉和跳表的设计相类似，一层存储不行，我们就再加一层目录，来进行 指针偏移量的访问
腾讯实习生招聘笔试题目【附加链接】
自留地
10-06 1327
2013-4-13腾讯实习生招聘笔试题目 转http://www.itmian4.com/forum.php?mod=viewthread&tid=2392 题目不完整，欢迎大家补充。。。。。 先将就看下题目，围观一下，有些选项真的记不住了，有些慢慢补充，还有分析，me 表示有些鸭梨大。还是原来的思路，me 认为的正确答案标注为蓝色，me 选的答案，可能是错的，标注为红色。(题目处于更新中，
22届春招实习试水之路汇总（前端+后端）
ycsss的博客
07-19 1910
目录写在前面时间线记录第一批投递（后端）第二批投递（前端）第三批投递（前端+后端）面经5.29 搜狐前端实习一面（焦点）- 视频面45min - 口头offer被鸽自我介绍+项目相关计算机网络+数据结构前端知识算法题闲聊反问口头offer被鸽6.1 贝壳找房前端一面 - 视频面30min自我介绍+项目前端知识+计网git知识算法题反问6.1 贝壳找房前端二面 - 视频面50min开放性问题+聊项目前端知识+计算机网络算法题反问6.3 贝壳找房hr面 - 视频面20min6.2 北京思特奇前端笔试+面试 -
GOF23设计模式【更新ing】
小源同学的博客
05-23 782
用来解决软件设计中常见的问题。它们像是经验丰富的老手总结出来的“诀窍”，可以让你更轻松地写出好的、易维护的代码。每个模式都像一个蓝图，您可以自定义以解决代码中的特定设计问题。而且，设计模式并不是一种死板的规定，而是一种思维模式，你可以根据自己的情况和需求来运用它们。设计模式通常包括了问题的描述、解决方案的结构、使用场景以及相应的优缺点。常见的设计模式按照目的可以分为创建型模式、结构型模式和行为型模式。创建型模式：单例模式、工厂模式、抽象工厂模式、建造者模式、原型模式。结构型模式。
C++学习总结
习惯有你
01-10 1545
序言 今天是2021年12月31日，也是2021年的最后一天，时间过得很快，也很慢，回想年初在江边玩耍的时候定下学习目标，仿佛就是昨天的事，细想来从定下目标的那一天至今我已完成了很多课程的学习，复盘今年，好像我走哪都只有学习的那种感觉给我留下的印象最深刻，我都怀疑如果不是学习，也许我现在根本想不起今年都去到了哪里，干了些什么。今年出了两趟远门，去了趟上海出差，在酒店的桌子上学习链表。去了趟河南的丈母娘家，在书桌上学习动静态库的引用和作用域、链接属性等。年初时周末为了不被家里小孩打扰，在弟弟的新房里学...
二十三种设计模式(四)--原型模式
万波的技术博客
11-29 686
原型模式实现深拷贝 原型模式通过复制现有对象创建新对象，避免复杂构造过程。
技术演进中的开发沉思-225 Prototype.js 框架
你的天空阅读专栏
12-02 719
Prototype.js 虽然现在已逐渐淡出主流开发视野，但它在前端发展史上的地位举足轻重。它第一次系统性地封装了原生 JavaScript 的核心能力，让开发者意识到 “原生 JS 可以更简洁”；它的元素选择器、表单处理、Ajax 封装等设计，直接启发了后续 jQuery 等框架的诞生 ——jQuery 的符号选择器，就能看到 Prototype.js 的影子。它就像前端开发的 “启蒙老师”，用优雅的封装告诉开发者：前端代码可以不用充满冗长的兼容性判断和重复逻辑，也可以写得简洁、优雅、易于维护。
Next.js 零基础开发博客后台管理系统教程（一）：环境搭建与项目初始化
祈澈菇凉
12-02 595
✅ 确定了使用 Next.js 的理由。✅ 检查并准备了开发环境。✅ 初始化了一个基于 App Router 和 TypeScript 的 Next.js 项目。✅ 初步了解了项目结构并成功运行了应用。在下一篇教程中，我们将开始构建后台管理界面的基础布局，并集成一个常用的 UI 组件库（例如 Ant Design 或继续使用 Tailwind CSS），为我们的管理系统打造一个漂亮、实用的侧边栏和顶部导航栏。
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 602
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 471
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
【免费云平台部署指南】按场景选型+全维度对比（附直达地址）
最新发布
分享技术干货，聚焦AI前沿科技
12-03 806
免费云平台已能覆盖从静态网站到AI模型部署的大部分场景，核心是根据项目类型（静态/后端/AI）、访问地区（国内/国外）和功能需求（数据库/容器/GPU）选择适配平台。新手建议从简单场景入手（如GitHub Pages部署博客、Hugging Face Spaces部署AI Demo），熟悉后再尝试全栈或容器化部署。
什么是原型?什么是原型链
05-13
### JavaScript 中原型和原型链的作用与实现方式 #### 原型 (Prototype) 的概念 在 JavaScript 中，`prototype` 是函数的一个特殊属性，它是一个对象。当创建一个函数时，默认会为其分配一个 `prototype` 属性[^4]。这个 `prototype` 对象包含了可以通过该函数构造出来的所有实例共享的属性和方法。 例如，在定义一个构造函数时： ```javascript function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayName = function() { console.log(this.name); }; const person1 = new Person('Alice', 25); const person2 = new Person('Bob', 30); person1.sayName(); // 输出 'Alice' person2.sayName(); // 输出 'Bob' ``` 在这个例子中，`sayName` 方法被挂载到了 `Person.prototype` 上，因此所有的 `Person` 实例都可以访问到这个方法[^5]。 --- #### 隐式原型 (`__proto__`) 和显式原型 (`prototype`) 每个 JavaScript 对象都有一个内部属性 `[[Prototype]]`，通常通过 `__proto__` 访问。它是对某个对象的引用，表示当前对象的原型。而 `prototype` 则是构造函数上的一个属性，用于指定新创建的对象的原型。 以下是两者的关系说明： - 当使用 `new` 关键字调用构造函数时，新创建的对象的 `__proto__` 被设置为构造函数的 `prototype`。 - 如果尝试在一个对象上查找不存在的属性或方法，则会沿着 `__proto__` 构成的链条向上查找，直到找到或者到达原型链的末端（即 `null`）为止[^2]。 代码示例： ```javascript function Test() {} console.log(Test.prototype); // 显示 Test 函数的 prototype 对象 console.log((new Test()).__proto__); // 显示由 Test 创建的新对象的 __proto__ ``` --- #### 原型链的工作机制 原型链是由多个对象通过它们的 `__proto__` 连接而成的一种结构。这种连接使得子对象可以继承父对象的行为和特性。具体来说： 1. **起点**：任何基于构造函数创建的对象，其 `__proto__` 指向构造函数的 `prototype`。 2. **中间节点**：如果找不到所需的属性或方法，JavaScript 就会在 `__proto__` 所指向的对象中继续寻找。 3. **终点**：最终，所有原型链都会终止于 `Object.prototype`，因为这是最顶层的基础对象。再往上则是 `null`，意味着无法进一步查找[^3]。 代码演示： ```javascript function Animal() {} Animal.prototype.speak = function() { console.log("This animal speaks"); }; function Dog() {} Dog.prototype = Object.create(Animal.prototype); Dog.prototype.bark = function() { console.log("Woof!"); }; const myDog = new Dog(); myDog.bark(); // 输出 "Woof!" myDog.speak(); // 输出 "This animal speaks" ``` 在这里，`Dog` 继承自 `Animal`，所以它的实例既可以直接调用自己的方法（如 `bark`），也能间接调用来自祖先的方法（如 `speak`）[^1]。 --- #### 原型和原型链的实际作用 1. **资源共享**：通过将公共方法放置在 `prototype` 上，减少了内存占用，提高了效率。 2. **继承支持**：利用原型链实现了面向对象编程中的继承功能，允许开发者构建复杂的类层次关系。 3. **动态扩展能力**：即使是在运行期间，也可以随时修改 `prototype` 或者添加新的成员给现有类型增加行为。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值