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

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

news 2026/5/12 17:35:49

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

现代React Native开发：从Expo生态到Redux状态管理的工程实践

1. 项目概述&#xff1a;一个为现代React Native开发量身定制的生产力引擎 如果你和我一样&#xff0c;在过去几年里用React Native做过几个项目&#xff0c;那你一定对项目初始化时那种重复、繁琐的“体力活”深有体会。每次新建一个项目&#xff0c;都要重新安装一堆依赖库&…...

编程新知 2026/5/12 16:38:23

5分钟掌握FanControl：Windows风扇控制的终极免费解决方案

5分钟掌握FanControl&#xff1a;Windows风扇控制的终极免费解决方案 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending…...

编程新知 2026/5/12 15:33:20

从零上手向量数据库：基于Pinecone官方示例构建AI应用实战指南

1. 项目概述&#xff1a;从零上手向量数据库与AI应用开发如果你对AI应用开发感兴趣&#xff0c;尤其是想了解如何让大语言模型&#xff08;LLM&#xff09;拥有“记忆”&#xff0c;或者想构建一个能理解语义而非关键词的智能搜索系统&#xff0c;那么你很可能已经听说过“向量…...

编程新知 2026/5/12 14:21:10

硬核架构拆解：指纹浏览器底座+FSM状态机，如何重塑高容错的店群RPA自动化？

大家好&#xff0c;我是林焱&#xff0c;一名专注电商底层自动化架构与定制开发的独立开发者。 在 CSDN 以及各大技术社区&#xff0c;我看到很多开发者在尝试为拼多多、TEMU 等电商平台编写自动化脚本时&#xff0c;都会经历一个“崩溃期”&#xff1a;明明在本地测试时无比丝…...

编程新知 2026/5/12 13:11:57

UE Viewer技术深度解析：如何逆向工程实现跨版本虚幻引擎资源查看

UE Viewer技术深度解析&#xff1a;如何逆向工程实现跨版本虚幻引擎资源查看 【免费下载链接】UEViewer Viewer and exporter for Unreal Engine 1-4 assets (UE Viewer). 项目地址: https://gitcode.com/gh_mirrors/ue/UEViewer UE Viewer&#xff08;又称Umodel&#…...

编程新知 2026/5/12 10:51:05

基于语义的代码搜索工具Hypergrep：从AST解析到智能调用链分析

1. 项目概述&#xff1a;为什么我们需要一个“更聪明”的代码搜索工具&#xff1f; 如果你和我一样&#xff0c;每天都要在动辄几十万行、横跨多个模块和语言的代码仓库里“大海捞针”&#xff0c;那你肯定对传统的 grep 或 IDE 的全局搜索又爱又恨。爱的是它们简单直接&…...

编程新知 2026/5/12 10:06:58

【M1 Mac游戏开发环境】从零到一：VSCode、Git与效率工具的终极配置指南

1. M1 Mac开箱配置&#xff1a;为Unity开发者量身定制 刚拿到M1 Mac的Unity开发者们&#xff0c;你们是否遇到过这样的场景&#xff1a;打开VSCode写C#脚本时智能提示迟迟不出现&#xff0c;Git命令输到一半发现没有自动补全&#xff0c;或是被各种环境配置问题折腾得焦头烂额&…...

编程新知 2026/5/12 10:01:38

物联网项目实战：在Ubuntu 20.04上快速部署Mosquitto MQTT Broker（含客户端测试）

物联网开发实战&#xff1a;Ubuntu 20.04下Mosquitto MQTT Broker的高效部署与全链路测试 在智能家居和工业物联网项目中&#xff0c;设备间的实时通信往往面临网络不稳定、硬件资源有限等挑战。MQTT协议凭借其轻量级和发布/订阅模式&#xff0c;成为连接传感器与云端的最优解。…...

编程新知 2026/5/12 9:51:06

车载以太网调试‘直连’方案揭秘：不用MCU，如何用两颗PHY芯片搞定100M转换？

车载以太网调试直连方案&#xff1a;两颗PHY芯片实现100M转换的技术解析 在车载电子系统日益复杂的今天&#xff0c;以太网技术凭借其高带宽和可靠性优势&#xff0c;正逐步取代传统的CAN总线成为车载网络的主流选择。然而&#xff0c;当工程师需要调试这些车载以太网设备时&am…...

编程新知 2026/5/12 9:39:22

Zotero中文文献管理终极指南：三步彻底解决知网PDF元数据抓取难题

Zotero中文文献管理终极指南&#xff1a;三步彻底解决知网PDF元数据抓取难题 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 你是…...

编程新知 2026/5/12 8:28:29