当前位置： 首页 > news >正文

什么是原型、原型链？原型和原型链的作用

news 文章来源：https://blog.csdn.net/qq_34093387/article/details/129223600 2025/4/18 7:35:30

1、ES6之前，继承都用构造函数来实现；

对象的继承,先申明一个对象，里面添加实例成员

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script>// 1、实例成员 就是构造函数内部通过this添加的成员，uname age sing 都是实例成员，只能通过实例化的对象来访问function Weber(uname, age) {this.uname = uname;this.age = age;this.write = function() {console.log("----------write--" + this.uname);}}var qyz = new Weber("青阳子", 36);qyz.write();</script></body>
</html>

构造函数的调用需要用new操作符，而普通函数的调用又分很多种，但是都不会用到new操作符。所以，构造函数和普通函数的区别就在这个new操作符里，现在让我们来好好研究一下这个new操作符。

用new操作符创建对象时发生的事情：

第一步: 创建一个Object对象实例。

第二步: 将构造函数的执行对象赋给新生成的这个实例。

第三步: 执行构造函数中的代码

第四步: 返回新生成的对象实例

注意：原本的构造函数是window对象的方法，如果不用new操作符而直接调用，那么构造函数的执行对象就 是window，即this指向了window。现在用new操作符后，this就指向了新生成的对象。理解这一步至关重要。

实例成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。

// 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员

// 实例成员只能通过实例化的对象来访问

2、静态成员，就是在构造函数本身上添加的成员

Weber.sex = "男";
console.log(Weber.sex)  //男
console.log(qyz.sex) //undefined

3、构造函数存在的问题：浪费内存

var qyz = new Weber("青阳子", 36);
var lee = new Weber("李博涵", 4);console.log(qyz.write === lee.write); //false 比较的是内存地址，不一致
//所有对象应该公用一套函数，以节省空间

1.构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 1. 构造函数的问题. function Weber(uname, age) {this.uname = uname;this.age = age;// this.write = function() {//     console.log('我会写博客');// }}Weber.prototype.write = function() {console.log('我会写博客');}var qyz = new Weber('青阳子', 38);var lee = new Weber('李博涵', 4);console.log(qyz.write === lee.write);// console.dir(Weber);qyz.write();lee.write();// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上</script>
</body></html>

一个对象，我们也称prototype 为原型对象， 原型的作用是:共享方法

2.对象原型 __proto__

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。

对象原型__proto__

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>function Weber(uname, age) {this.uname = uname;this.age = age;}Weber.prototype.write = function() {console.log('我会唱歌');}var qyz = new Weber('青阳子', 36);var lee = new Weber('李博涵', 4);qyz.write();console.log(qyz); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototypeconsole.log(qyz.__proto__ === Weber.prototype);// 方法的查找规则: 首先先看qyz 对象身上是否有 write 方法,如果有就执行这个对象上的write// 如果么有write 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找write这个方法</script>
</body></html>

__proto__对象原型和原型对象 prototype 是等价的

__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性， 因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

3. constructor 构造函数

对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。

constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。

此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>function Weber(uname, age) {this.uname = uname;this.age = age;}Weber.prototype.write = function() {console.log('我会写博客');}var qyz = new Weber('青阳子', 36);// 1. 只要是对象就有__proto__ 原型, 指向原型对象console.log(Weber.prototype);console.log(Weber.prototype.__proto__ === Object.prototype);// 2.我们Weber原型对象里面的__proto__原型指向的是 Object.prototypeconsole.log(Object.prototype.__proto__);// 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null</script>
</body></html>

4.JavaScript 的成员查找机制(规则)

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。

③ 如果还没有就查找原型对象的原型（Object的原型对象）。

④ 依此类推一直找到 Object 为止（null）。

⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>function Weber(uname, age) {this.uname = uname;this.age = age;}Weber.prototype.write = function() {console.log('我会写博客');}Weber.prototype.sex = '女';// Object.prototype.sex = '男';var qyz = new Weber('青阳子', 36);qyz.sex = '男';console.log(qyz.sex);console.log(Object.prototype);console.log(qyz);console.log(Weber.prototype);console.log(qyz.toString());</script>
</body></html>

5. 原型对象this指向

构造函数中的this 指向我们实例对象.

原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>function Weber(uname, age) {this.uname = uname;this.age = age;}var that;Weber.prototype.write = function() {console.log('我会写博客');that = this;}var qyz = new Weber('青阳子', 36);// 1. 在构造函数中,里面this指向的是对象实例 qyzqyz.write();console.log(that === qyz);// 2.原型对象函数里面的this 指向的是 实例对象 qyz</script>
</body></html>

相关文章：

什么是原型、原型链？原型和原型链的作用

1、ES6之前&#xff0c;继承都用构造函数来实现&#xff1b;对象的继承,先申明一个对象&#xff0c;里面添加实例成员<!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title></head><body><script…...

编程日记 2023/2/26 22:06:10

条件期望4

条件期望例题----快排算法的分析 快速排序算法的递归定义如下: 有n个数(n≥2n\geq 2n≥2), 一开始随机选取一个数xix_ixi​, 并将xix_ixi​和其他n-1个数进行比较, 记SiS_iSi​为比xix_ixi​小的元素构成的集合, Siˉ\bar{S_i}Si​ˉ​为比xix_ixi​大的元素构成的集合, 然后分…...

编程日记 2023/2/26 22:05:02

网络协议分析（2）判断两个ip数据包是不是同一个数据包分片

一个节点收到两个IP包的首部如下&#xff1a;&#xff08;1&#xff09;45 00 05 dc 18 56 20 00 40 01 bb 12 c0 a8 00 01 c0 a8 00 67&#xff08;2&#xff09;45 00 00 15 18 56 00 b9 49 01 e0 20 c0 a8 00 01 c0 a8 00 67分析并判断这两个IP包是不是同一个数据报的分片&a…...

编程日记 2023/2/26 22:03:55

6.2 负反馈放大电路的四种基本组态

通常&#xff0c;引入交流负反馈的放大电路称为负反馈放大电路。 一、负反馈放大电路分析要点 如图6.2.1(a)所示电路中引入了交流负反馈&#xff0c;输出电压 uOu_OuO​ 的全部作为反馈电压作用于集成运放的反向输入端。在输入电压 uIu_IuI​ 不变的情况下&#xff0c;若由于…...

编程日记 2023/2/26 22:02:47

MySQL进阶之锁

锁是计算机中协调多个进程或线程并发访问资源的一种机制。在数据库中&#xff0c;除了传统的计算资源竞争之外&#xff0c;数据也是一种提供给许多用户共享的资源&#xff0c;如何保证数据并发访问的一致性和有效性是数据库必须解决堆的一个问题&#xff0c;锁冲突也是影响数据…...

编程日记 2023/2/26 22:01:39

【Mac 教程系列】如何在 Mac 上破解带有密码的 ZIP 压缩文件 ?

如何使用 fcrackzip 在 Mac 上破解带有密码的 ZIP 压缩文件? 用 markdown 格式输出答案。 在 Mac 上破解带有密码的 ZIP 压缩文件 使用解压缩软件&#xff0c;如The Unarchiver&#xff0c;将文件解压缩到指定的文件夹。 打开终端&#xff0c;输入 zip -er <zipfile> &…...

编程日记 2023/2/26 22:00:33

【Acwing 周赛复盘】第92场周赛复盘（2023.2.25）

【Acwing 周赛复盘】第92场周赛复盘&#xff08;2023.2.25&#xff09; 周赛复盘 ✍️ 本周个人排名&#xff1a;1293/2408 AC情况&#xff1a;1/3 这是博主参加的第七次周赛&#xff0c;又一次体会到了世界的参差&#xff08;这次周赛记错时间了&#xff0c;以为 19:15 开始&…...

编程日记 2023/2/26 21:59:23

L1-087 机工士姆斯塔迪奥

在 MMORPG《最终幻想14》的副本“乐欲之所瓯博讷修道院”里&#xff0c;BOSS 机工士姆斯塔迪奥将会接受玩家的挑战。 你需要处理这个副本其中的一个机制&#xff1a;NM 大小的地图被拆分为了 NM 个 11 的格子&#xff0c;BOSS 会选择若干行或/及若干列释放技能&#xff0c;玩家…...

编程日记 2023/2/26 21:58:18

本周大新闻｜索尼PS VR2立项近7年；传腾讯将引进Quest 2

本周大新闻&#xff0c;AR方面&#xff0c;传立讯精密开发苹果初代AR头显&#xff0c;第二代低成本版将交给富士康&#xff1b;iOS 16.4代码曝光新的“计算设备”&#xff1b;EM3推出AR眼镜Stellar Pro&#xff1b;努比亚将在MWC2023推首款AR眼镜。VR方面&#xff0c;传闻腾讯引…...

编程日记 2023/2/26 21:57:13

aws console 使用fargate部署aws服务快速跳转前端搜索栏

测试过程中需要在大量资源之间跳转&#xff0c;频繁的点击不如直接搜索来的快&#xff0c;于是写了一个搜索框方便跳转。 前端的静态页面可以通过s3静态网站托管实现&#xff0c;但是由于中国区需要备案的原因&#xff0c;可以使用ecs fargate部署 步骤如下&#xff1a; 编写…...

编程日记 2023/2/26 21:56:07

Redis实战之Redisson使用技巧详解

一、摘要什么是 Redisson&#xff1f;来自于官网上的描述内容如下&#xff01;Redisson 是一个在 Redis 的基础上实现的 Java 驻内存数据网格客户端&#xff08;In-Memory Data Grid&#xff09;。它不仅提供了一系列的 redis 常用数据结构命令服务&#xff0c;还提供了许多分布…...

编程日记 2023/2/26 21:55:02

SQLAlchemy

文章目录SQLAlchemy介绍SQLAlchemy入门使用原生sql使用orm外键关系一对多关系多对多关系基于scoped_session实现线程安全简单表操作实现方案CRUDFlask 集成 sqlalchemySQLAlchemy 介绍 SQLAlchemy是一个基于Python实现的ORM框架。该框架建立在 DB API之上&#xff0c;使用关系…...

编程日记 2023/2/26 21:53:57

【Linux学习笔记】8.Linux yum 命令和apt 命令

前言 本章介绍Linux的yum命令和apt命令。 Linux yum 命令 yum&#xff08; Yellow dog Updater, Modified&#xff09;是一个在 Fedora 和 RedHat 以及 SUSE 中的 Shell 前端软件包管理器。 基于 RPM 包管理&#xff0c;能够从指定的服务器自动下载 RPM 包并且安装&#xf…...

编程日记 2023/2/26 21:52:49

windows服务器实用（4）——使用IIS部署网站

windows服务器实用——IIS部署网站 如果把windows服务器作为web服务器使用&#xff0c;那么在这个服务器上部署网站是必须要做的事。在windows服务器上&#xff0c;我们一般使用IIS部署。 假设此时前端给你一个已经完成的网站让你部署在服务器上&#xff0c;别人可以在浏览器…...

编程日记 2023/2/26 21:51:43

Random（二）什么是伪共享？@sun.misc.Contended注解

目录1.背景简介2.伪共享问题3.问题解决4.JDK使用示例1.背景简介 我们知道&#xff0c;CPU 是不能直接访问内存的&#xff0c;数据都是从高速缓存中加载到寄存器的&#xff0c;高速缓存又有 L1&#xff0c;L2&#xff0c;L3 等层级。在这里&#xff0c;我们先简化这些复杂的层级…...

编程日记 2023/2/26 21:50:38

Linux解压压缩

打包tar首先我们得提一下专门用于打包文件的命令——tartar用于备份文件&#xff0c;打包多个文件或者目录&#xff0c;也可以用于还原被打包的文件假设打包目录test下的文件 tar -cvf test.tar ./test 假设打包目录test下的文件,并用gzip命令将包压缩 tar -zcvf test.tar ./te…...

编程日记 2023/2/26 21:49:33

JavaSe第3次笔记

1.String str "hello";字符串类型。 2.两个字符串类型相加意思是拼接&#xff0c;类似于c语言里面的strcat函数。 3.整型变成字符串类型: int a 10; String str String. valueOf(a); 4.当字符串和其他类型进行相加的时候&#xff0c;结果就是字符串。(不完全…...

编程日记 2023/2/26 21:48:28

非人工智能专业怎样从零开始学人工智能？

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是指让机器具有类似人类智能的能力&#xff0c;包括感知、理解、推理、学习、规划、决策、创造等多个方面。人工智能研究涉及到计算机科学、数学、物理学、心理学、哲学等多个领域&#xff0c;旨在模拟和…...

编程日记 2023/2/26 21:47:23

MyBatis之增、删、查、改

目录 前言 一、配置MyBatis开发环境 1.1 创建数据库和表 1.2 添加框架支持 1.3 创建目录结构 1.4 配置数据库连接 1.5 配置MyBatis中的XML文件路径 二、添加业务代码 2.1 查询数据库操作 2.1.1 添加实体类 2.1.2 添加mapper接口 2.1.3 在xml中实现mapper接口 2.1.…...

编程日记 2023/2/26 21:46:18

死磕Spring，什么是SPI机制，对SpringBoot自动装配有什么帮助

文章目录如果没时间看的话&#xff0c;在这里直接看总结一、Java SPI的概念和术语二、看看Java SPI是如何诞生的三、Java SPI应该如何应用四、从0开始&#xff0c;手撸一个SPI的应用实例五、SpringBoot自动装配六、Spring SPI机制与Spring Factories机制做对比七、这里是给我自…...

编程日记 2023/2/26 21:45:12

因果推断10--一种大规模预算约束因果森林算法（LBCF）

论文&#xff1a;A large Budget-Constrained Causal Forest Algorithm 论文&#xff1a;http://export.arxiv.org/pdf/2201.12585v2.pdf 目录 0 摘要 1 介绍 2 问题的制定 3策略评价 4 方法 4.1现有方法的局限性。 4.2提出的LBCF算法 5验证 5.1合成数据 5.2离线生…...

编程日记 2023/2/26 21:44:06

Linux基础命令-df显示磁盘的使用情况

文章目录 文章目录 df 命令介绍 语法格式 基本参数 参考实例 1&#xff09;以人类可读形式显示磁盘空间的使用情况 2&#xff09;显示磁盘的inode信息 3&#xff09;显示磁盘和文件系统类型 4&#xff09;指定显示文件系统 5&#xff09;显示所有磁盘空间中的内容 …...

编程日记 2023/2/26 21:42:59

如何使用goquery进行HTML解析以及它的源码分析和实现原理

目录 goquery 是什么 goquery 能用来干什么 goquery quick start 玩转goquery.Find() 查找多个标签 Id 选择器 Class 选择器 属性选择器 子节点选择器 内容过滤器 goquery 源码分析 图解源码 总结 goquery 简介 goquery是一款基于Go语言的HTML解析库&#xff0c;…...

编程日记 2023/2/26 21:41:52

【Java 数组和集合 区别及使用案例】

Java中数组和集合都是用来存储一组数据的容器&#xff0c;但是在实际使用中&#xff0c;它们有一些区别和不同的使用场景。 数组 vs 集合&#xff1a;存储方式 数组是一个固定长度的容器&#xff0c;它的长度一旦被初始化之后&#xff0c;就无法再改变了。而集合是一个动态长…...

编程日记 2023/2/26 21:40:46

使用pynimate制作动态排序图

大家好&#xff0c;数据可视化动画使用Python包就可以完成&#xff0c;效果如下&#xff1a;想要使用Pynimate&#xff0c;直接import一下就行&#xff1a;import pynimate as nim输入数据后&#xff0c;Pynimate将使用函数Barplot&#xff08;&#xff09;来创建条形数据动画。…...

编程日记 2023/2/26 21:39:41

Mysql 事务的隔离性（隔离级别）

Mysql 中的事务分为手动提交和自动提交&#xff0c;默认是自动提交&#xff0c;所以我们在Mysql每输入一条语句&#xff0c;其实就会被封装成一个事务提交给Mysql服务端。 手动提交需要先输入begin&#xff0c;表示要开始处理事务&#xff0c;然后就是常见的sql语句操作了&…...

编程日记 2023/2/26 21:38:34

2023年网络安全竞赛——Python渗透测试PortScan.py

端口扫描Python渗透测试：需求环境可私信博主获取 任务环境说明： 服务器场景：PYsystem0041服务器场景操作系统：未知服务器场景FTP用户名:anonymous 密码：空1. 从靶机服务器的FTP上下载PortScan.py，编辑Python程序PortScan.py，实现...

编程日记 2023/2/26 21:37:27

【数据结构】栈的接口实现（附图解和源码）

栈的接口实现&#xff08;附图解和源码&#xff09; 文章目录栈的接口实现&#xff08;附图解和源码&#xff09;前言一、定义结构体二、接口实现&#xff08;附图解源码&#xff09;1.初始化栈2.销毁栈3.入栈4.判断栈是否为空5.出栈6.获取栈顶元素7.获取栈中元素个数三、源代码…...

编程日记 2023/2/26 21:36:22

LC-1255. 得分最高的单词集合（回溯）

1255. 得分最高的单词集合 难度困难60 你将会得到一份单词表 words&#xff0c;一个字母表 letters &#xff08;可能会有重复字母&#xff09;&#xff0c;以及每个字母对应的得分情况表 score。 请你帮忙计算玩家在单词拼写游戏中所能获得的「最高得分」&#xff1a;能够由…...

编程日记 2023/2/26 21:35:14

从中国文化看面试挑人标准

文章目录标准一、面相1. 1 四白眼1.2 浓眉二、讲话2.1 言多与气虚总结本文结合中国面相&#xff0c;是个概率性问题&#xff0c;对于个体无效。 标准 正直&#xff0c;三观正&#xff0c;沟通好&#xff0c;技术。从概率上讲&#xff1a; 正直且三观正的人----有恒心&#x…...

编程日记 2023/2/26 21:34:07