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

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

原型和原型链

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

对象的创建方式

原型和原型链都是关于对象的内容,先来看一下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型没有范围的限制,理论上可以从无限小的整数取到…

RedHat运维-Ansible自动化运维基础22-rhel-system-roles

1. system_roles的官方文档的位置是___________________________________; 2. system_roles的官方文档的位置是___________________________________; 3. system_roles的官方文档的位置是___________________________________; 4. 安装rhel-s…

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

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

数学建模国赛入门指南

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

力扣题解(乘积为正数的最长子数组长度)

1567. 乘积为正数的最长子数组长度 已解答 中等 给你一个整数数组 nums ,请你求出乘积为正数的最长子数组的长度。 一个数组的子数组是由原数组中零个或者更多个连续数字组成的数组。 请你返回乘积为正数的最长子数组长度。 本题要求乘积为正数,而整…

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

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

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)和性能的更大需求…

《javascript语言精粹》学习笔记之函数特性

分析javascript javascript比较好的思想:函数、弱类型、动态对象、对象字面量表示法 不好的思想:基于全局变量的编程模型 函数 函数对象 函数就是对象,新创建的函数会连接到Function.prototype上,没和函数创建时附带有两个隐藏…

前端--第一个前端程序

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

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

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

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

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

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

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

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

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

按模版批量生成定制合同

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

Qt5 Ubuntu18 QStackedWidget

1、在实际项目开发过程遇到,如果通过UI插件的属性设置,通过对默认的两个页面进行提升需要切换操作的对象,如果该对象需要外部接口传入数据,实现界面信息的实时刷新,这样会失败,失败的原因很好理解&#xff…

Ubuntu安装Pytorch3d

查看对应版本的pytorch3d https://anaconda.org/pytorch3d/pytorch3d/files?page2下载后保存到服务器上安装 conda install pytorch3d-0.7.7-py310_cu118_pyt210.tar.bz2检查是否安装成功 python -c "from pytorch3d.io import load_ply" # Check for pytorch3d i…

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

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

简单分享下prettytable--快速制作表格

一、安装: pip install prettytable 二、实例: from prettytable import PrettyTabletable PrettyTable()table.field_names ["学号", "姓名", "语文", "数学", "英语", "物理", "化…