关于原型和原型链的学习和实践

在前端面试中,原型和原型链始终是一个避不开的问题,今天就弄明白!

原型和原型链

  • 对象的创建方式
    • 工厂模式
    • 构造函数模式
    • 原型模式
  • 原型和原型链
  • 实践

对象的创建方式

原型和原型链都是关于对象的内容,先来看一下JavaScript中对象的构建方式。

工厂模式

function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { console.log(this.name); }; return o; 
} 
let person1 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

构造函数模式

function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function() { console.log(this.name); }; 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg 

要创建 Person 的实例,应使用 new 操作符。以这种方式调用构造函数会执行如下操作。
(1) 在内存中创建一个新对象。
(2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
(3) 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。
(4) 执行构造函数内部的代码(给新对象添加属性)。
(5) 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

原型模式

function Person() {} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function() { console.log(this.name); 
}; 
let person1 = new Person(); 
person1.sayName(); // "Nicholas" 
let person2 = new Person(); 
person2.sayName(); // "Nicholas" 
console.log(person1.sayName == person2.sayName); // true 

无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个 prototype 属性(指向
原型对象)。默认情况下,所有原型对象自动获得一个名为 constructor 的属性,指回与之关联的构
造函数。对前面的例子而言,Person.prototype.constructor 指向 Person。然后,因构造函数而
异,可能会给原型对象添加其他属性和方法。

原型和原型链

  1. Person.prototype.constructor == Person // 准则1:原型对象(即Person.prototype)的constructor指向构造函数本身
  2. person01.proto == Person.prototype // 准则2:实例(即person01)的__proto__和原型对象指向同一个地方

构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。

实例的隐式原型指向构建该实例的类的显式原型。
验证一下这句话:
在这里插入图片描述
p.proto===person.prototype
person.prototype.proto===Object.prototype
Object.prototype.proto===null

注意有的浏览器可能已经废除了__proto__属性,改用Object.getPrototypeOf()方法来获取对象的原型。
在这里插入图片描述
原型链例子:
在这里插入图片描述
在这里插入图片描述

示意图:
在这里插入图片描述
注意:如果通过对象自变量的方式添加新方法,会导致原型链失效
在这里插入图片描述

实践

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录(day3)有序数组的平方

暴力求解法: 注意:需要确定范围,比如nums.sort()是在for循环之外,根据函数的功能来确定 return返回的是nums,而不是nums[i]因为返回的是整个数组 class Solution(object):def sortedSquares(self, nums):for i in r…

人话学Python-基础篇-数字计算

一:数字类型 对于最常见的数据类型,数字在Python中分为三类: 整型(int) 表示的是整数类型的所有数字,包括正整数,负整数和0。和C语言不同的是,Python中的int型没有范围的限制,理论上可以从无限小的整数取到…

react基础语法,模板语法,ui渲染,jsx,useState状态管理

创建一个react应用 这里使用create-react-app的脚手架构建项目(结构简洁,基于webpack-cli), npx create-react-app [项目名称] 使用其他脚手架构建项目可以参考:react框架,使用vite和nextjs构建react项目…

数学建模国赛入门指南

文章目录 认识数学建模及国赛认识数学建模什么是数学建模?数学建模比赛 国赛参赛规则、评奖原则如何评省、国奖评奖规则如何才能获奖 国赛赛题分类及选题技巧国赛赛题特点赛题分类 国赛历年题型及优秀论文数学建模分工技巧数模必备软件数模资料文献数据收集资料收集…

白蛇插画:成都亚恒丰创教育科技有限公司

白蛇插画:古韵今风,情深意长 在浩瀚的艺术长河中,插画作为一种独特的艺术形式,以其生动形象的画面、丰富多彩的色彩和深邃悠远的意境,成都亚恒丰创教育科技有限公司深受人们喜爱。而“白蛇插画”,作为融合…

bug - while parsing file included at

bug 如下 找到这个对应文件tb_top.sv的对应行,发现是一个 include "inc_tb_tests_xxx.sv" 问题点:头文件,重复定义,那么 解决方法- 在被include的文件首尾加入 ifndef MY_TRANSACTION__SV define MY_TRANSACTION__SV …

GenAI 技术堆栈架构师指南 - 十种工具

这篇文章于 2024 年 6 月 3 日首次出现在 The New Stack 上。 我之前写过关于现代数据湖参考架构的文章,解决了每个企业面临的挑战——更多的数据、老化的Hadoop工具(特别是HDFS)以及对RESTful API(S3)和性能的更大需求…

前端--第一个前端程序

第一个前端程序 第一步: 使用记事本,编写代码 在你的一个磁盘里面创建一个文件夹,名为前端,然后在里面新建一个记事本,在里面写如下代码,注意一定要使用英文,然后把后缀名称改为.html。 第二…

你明白C++中的多态吗?(暑假提升-多态专题)

内不欺己,外不欺人。———孔子 有趣的多态 1、前言2、概念3、多态定义与产生条件4、多态的重要组成成员-(虚函数)5、虚函数的重写(覆盖)6、辅助关键字override与final(了解即可)7、重载,重定义(隐藏),重写(覆盖)8、抽象类9、多态的原理9、1、…

PHP老照片修复文字识别图像去雾一键抠图微信小程序源码

🔍解锁复古魅力,微信小程序黑科技大揭秘!老照片修复&更多神奇功能等你来试! 📸 【老照片修复,时光倒流的美颜术】 你是否珍藏着一堆泛黄的老照片,却因岁月侵蚀而模糊不清?现在…

实验02 黑盒测试(组合测试、场景法)

1. 组合测试用例设计技术 指出等价类划分法和边界值分析法通常假设输入变量相互独立,但实际情况中变量间可能存在关联。全面测试:覆盖所有输入变量的所有可能组合,测试用例数量随输入变量的增加而指数增长。 全面测试需要对所有输入的各个取…

2008年上半年软件设计师【上午题】真题及答案

文章目录 2008年上半年软件设计师上午题--真题2008年上半年软件设计师上午题--答案 2008年上半年软件设计师上午题–真题 2008年上半年软件设计师上午题–答案

按模版批量生成定制合同

提出问题 一个仪器设备采购公司,商品合同采购需要按模版生成的固定的文件,模板是固定的,只是每次需要替换信息,然后打印出来寄给客户。 传统方法 如果手工来做这个事情,准备好数据之后,需要从Excel表格中…

高效应对网络攻击,威胁检测响应(XDR)平台如何提升企业应急响应能力

在数字化时代,企业面临的网络攻击威胁持续增加,如恶意软件、勒索软件、钓鱼攻击、DDoS攻击等。这些威胁不仅危及企业数据安全、系统稳定,还损害了品牌形象和市场信任。随着云计算、大数据、物联网的广泛应用,企业网络攻击面扩大&a…

MAVLink代码生成-C#

一. 准备Windows下安装环境 Python 3.3 – 官网链接下载Python future模块 –pip3 install future TkInter (GUI 工具). – python for Windows自带,无需下载环境变量PYTHONPATH必须包含mavlink存储库的目录路径。 –set PYTHONPATH你的mavlink源码路径 源码下载在…

【昆工主办|7月昆明】第三届绿色建筑、土木工程与智慧城市国际会议(GBCESC 2024)

随着全球城市化进程的加速,绿色建筑、土木工程与智慧城市等议题逐渐成为了行业内外关注的焦点。在这一背景下,第三届绿色建筑、土木工程与智慧城市国际会议(GBCESC 2024)的召开,无疑将为相关领域的研究者、学者及从业者…

原理和组成

能力要素:(1)人员要素:“正确选人”。(2)过程要素:“正确做事”。(3)技术要素:“高效做事”。(4)资源要素:“保障做事”。…

【ARM】MDK-解决Flexnet服务的error:-13.66

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 记录MDK网络版部署服务器error :-13.66的问题解决方案,后续有相关发现持续更新。 2、 问题场景 在客户的服务器上部署Flexnet服务,将license文件检查过后,确认MAC地址…

如何才能半个月学习完自动化测试,成功跳槽涨薪?

一直想写类似的文章&#xff0c;但是一直没有时间&#xff0c;正好乘此周末&#xff0c;终于可以写写我的见解了<关于如何学习自动化测试>&#xff0c;其实自动化测试的知识很宽泛&#xff0c;具体细分又可以分为&#xff1a;Web自动化测试&#xff08;PythonSelenium&am…

全新UI自助图文打印系统小程序源码 PHP后端 附教程

最新自助图文打印系统和证件照云打印小程序源码PHP后端&#xff0c;为用户用户自助打印的服务&#xff0c;包括但不限于文档、图片、表格等多种格式的文件。此外&#xff0c;它们还提供了诸如美颜、换装、文档打印等功能&#xff0c;以及后台管理系统&#xff0c;方便管理员对打…