JavaScript函数之prototype原型和原型链

news2024/12/28 19:55:39

文章目录

  • 1. 原型
  • 2. 显式和隐式原型
  • 3. 原型链
    • 3.1 访问顺序
  • 4. instanceof
    • 4.1 如何判断

1. 原型

函数的prototype属性

  • 每个函数都有一个prototype属性,它默认指向一个Object空对象(即:原型对象)。
  • 原型对象中有一个属性constructor,它指向函数对象。

在这里插入图片描述
Person的prototype指向了它的Person Prototype,Person Prototype的constructor指向了Person 。


// 用户对象
function Person() {
				
};
			
console.log(Person.prototype);
			
Person.prototype.getMoney = function() {
	return 5000000;
	console.log("身价500w");
}
			
console.log((new Person()).getMoney());

在这里插入图片描述

给原型对象添加属性(一般都是方法)

  • 作用:函数的所有实例对象自动拥有原型中的属性(方法)

2. 显式和隐式原型

每个函数function都有一个prototype,即显式原型(属性)

每个实例对象都有一个__proto__,称为隐式原型(属性)。

对象的隐式原型的值为其对应构造函数的显式原型的值。

内存结构


// 第1步,内部语句:this.prototype = {}
function Fn() {};
			
console.log(Fn.prototype);
			
// 第2步,内部语句:this.__proto__ = Fn.prototype
let fn = new Fn();
			
console.log(fn.__proto__);
console.log(fn.__proto__ === Fn.prototype);
			
// 在原型上添加方法
Fn.prototype.test = function () {
	console.log("invoke test...");
}
fn.test();

以上代码对应内存结构如下:
在这里插入图片描述

总结:

  • 函数的prototype属性:在定义函数时自动添加的,默认值是一个空的Object对象。
  • 对象的__proto__属性:创建对象的时候自动添加的,默认值为构造函数的prototype属性值。
  • 可以在程序中直接操作显式原型,但不能直接操作隐式原型(ES6之前)

3. 原型链

3.1 访问顺序

原型链(隐式原型链),主要用于查找对象的属性(方法);访问一个对象的属性时,

  • 先在自身属性中查找,找到则返回
  • 如果没有,在沿着__proto__这条链向上查找,找到返回
  • 如果最终没找到,则返回undefined
            console.log(Object.prototype.__proto__)
			function Fn() {
				this.test1 = function() {
					console.log("test1()")
				}
			}
			
			Fn.prototype.test2 = function() {
				console.log("test2()")
			}
			
			let fn = new Fn();
			fn.test1();
			fn.test2();
			console.log(fn.toString);
			fn.test3();

在这里插入图片描述

输出如下:

在这里插入图片描述

构造函数/原型/实体对象的关系

在这里插入图片描述

函数的显式原型指向的对象默认是空Object实例对象(但是Object不满足)

所有函数都是Function的实例(包含Function)

Object的原型对象是原型链的尽头。

原型链的属性问题
读取对象的属性值时:会自动到原型链中查找
设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值
方法一般定义在原型中,属性一般通过构造函数定义在对象本身上。


function Fn() {
				
}
Fn.prototype.a = 'xxx';
let fn1 = new Fn();
console.log(fn1.a, fn1);
			
let fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn1.a, fn2.a, fn1)

输出如下:

在这里插入图片描述

4. instanceof

4.1 如何判断

表达式:A instanceof B
如果B函数的显式原型对象在A对象的原型链上,返回true,否则返回false

Function 是通过new 自己产生的实例


function Foo() {}
let f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true
			

在这里插入图片描述
完整的原型关系图:
在这里插入图片描述

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

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

相关文章

【C++从入门到放弃】类和对象(中)———类的六大默认成员函数

🧑‍💻作者: 情话0.0 📝专栏:《C从入门到放弃》 👦个人简介:一名双非编程菜鸟,在这里分享自己的编程学习笔记,欢迎大家的指正与点赞,谢谢! 类和对…

Python | 蓝桥杯进阶第一卷——字符串

欢迎交流学习~~ 专栏: 蓝桥杯Python组刷题日寄 蓝桥杯进阶系列: 🏆 Python | 蓝桥杯进阶第一卷——字符串 🔎 Python | 蓝桥杯进阶第二卷——递归(待续) 💝 Python | 蓝桥杯进阶第三卷——动态…

论文阅读-End-to-End Open-Domain Question Answering with BERTserini

论文链接:https://aclanthology.org/N19-4013.pdf 目录 摘要 1 简介 2 背景及相关工作 3 系统架构 3.1 Anserini Retriever 3.2 BERT 阅读器 4 实验结果 5演示 6结论 摘要 我们展示了一个端到端的问答系统,它将 BERT 与开源 Anserini 信息检索…

MSYS2安装

最近在学习windows上编译FFmpeg,需要用到msys2,在此记录一下安装和配置过程。 点击如下链接,下载安装包: Index of /msys2/distrib/x86_64/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 我下载的是:ms…

相信人还是相信ChatGPT,龙测首席AI专家给出了意料之外的答案

最近,关于ChatGPT的话题太火了!各大社交软件都是他的消息!从去年12月份ChatGPT横空出世,再到近期百度文心一言、复旦Moss的陆续宣布,点燃了全球对AIGC(内容人工智能自动生成)领域的热情&#xf…

搭建Bitbucket项目管理工具详细教程

目录 1.安装前准备 2.jdk安装 2.1.rpm安装方式: 3.创建bitbucket数据库 4.安装Git 5.安装bitbucket 5.1下载完成上传至服务器的 /usr/atlassian/ 目录下 5.2安装atlassian-bitbucket-7.21.0 5.3安装MySQL驱动 5.4破解激活bitbucket 1.安装前准备 首先查看操…

Python 之网络式编程

一 客户端/服务器架构 即C/S架构,包括 1、硬件C/S架构(打印机) 2、软件B/S架构(web服务) C/S架构与Socket的关系: 我们学习Socket就是为了完成C/S的开发 二 OSI七层 引子:   计算机组成…

【Spark分布式内存计算框架——Spark Streaming】13. 偏移量管理(下)MySQL 存储偏移量

6.3 MySQL 存储偏移量 此处将偏移量数据存储到MySQL表中,数据库及表的DDL和DML语句如下: -- 1. 创建数据库的语句 CREATE DATABASE IF NOT EXISTS db_spark DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci; USE db_spark ; -- 2. 创建表的语句 CRE…

蓝牙资讯|2022 年 Q4 全球 TWS 耳机出货量 7900 万部

Canalys 最新数据显示,2022 年第四季度,全球个人智能音频设备出货量下降 26%,跌至 1.1 亿部。所有品类的出货量都面临不一的下滑趋势,甚至是一直支撑市场的 TWS 品类也遭遇 23% 两位数的下降至 7900 万部。 全球市场方面&#x…

MySQL中varchar(M)存储字符串过长

最近写项目&#xff0c;数据库报了一个错&#xff0c;错误原因是MySQL中存储的字符串过长最近在学MySQL的基础&#xff0c;刚好学到了关于varchar类型要存储的字符串是 “<p>12121212121212</p>\n<p><img src\"https://zzjzzjzzjbucket.oss-cn-hangz…

附录5-大事件项目前端

目录 1 前言 2 用到的插件 2.1 截取图像 cropper 2.2 富文本编辑器 tinymce 3 项目结构 4 config.js 5 主页 5.1 iframe 5.2 页面的宽高 5.3 修改文章 6 个人中心-基本资料 7 个人中心-更换头像 8 个人中心-更换密码 9 文章管理-文章分类 10 文章…

Springboot集成kafka(环境搭建+演示)|超级详细,建议收藏

Springboot集成kafka一、前言&#x1f525;二、环境说明&#x1f525;三、概念&#x1f525;四、CentOS7安装kafka&#x1f525;1.下载kafka安装包2.下载好后&#xff0c;进行解压六、kafka项目集成&#x1f525;1️⃣pom引入2️⃣配置kafka3️⃣一个kafka消息发送端4️⃣定义一…

MySQL45讲笔记04深入浅出索引上

索引的目的: 索引的出现其实就是为了提高数据查询的效率&#xff0c;就像书的目录一样。常见索引模型&#xff1a; hash表&#xff0c;以K-V键值对的形式的一种数据结构&#xff0c;底层是数组加链表形式。通过一定的hash运算找到数据合适的位置放入&#xff0c;如果放入的位置…

[jetson]paddlepaddle2.4.0在jetpack5.0.2源码编译流程

由于官方暂时没有提供jetson对应的jetson jetpack5.0.2预编译包&#xff0c;因此只有源码编译&#xff0c;本次编译不带Tensorrt,编译已经顺利成功&#xff0c;注意本次使用的设备是jetson NX 测试环境&#xff1a; ubuntu20.04 jetpack5.0.2 GCC-8.4 Software part of jet…

Centos7搭建NFS

1.NFS简介Network File System(网络文件系统&#xff0c;通过网络让不同的机器系统之间可以彼此共享文件和目录&#xff0c;类似Samba服务。2.NFS挂载原理 在网络中服务器和客户端进行连接都是通过端口进行数据传输&#xff0c;而NFS服务端的端口是随机的&#xff0c;从而导致N…

Linux----网络基础(2)--应用层的序列化与反序列化--守护进程--0226

文章中有使用封装好的头文件&#xff0c;可以在下面连接处查询。 Linux相关博文中使用的头文件_Gosolo&#xff01;的博客-CSDN博客 1. 应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层 1.2 协议 我们在之前的套接字编程中使用的是…

最适合你的团队云协作工具

团队云协作工具哪个好&#xff1f;使用Zoho Projects的团队云协作软件套件&#xff0c;在一个平台上无缝协作&#xff0c;激励您的团队在任何地方以最好的状态完成他们的工作。 使您的团队能够使用团队云协作软件在任何地方进行协作和沟通。Zoho Projects提供了一套强大…

三天吃透计算机网络八股文

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…

一文读懂光学天线

天线&#xff0c;按维基百科的定义&#xff0c;"是一种用来发射或接收无线电波—或更广泛来讲—电磁波的器件"。例如&#xff0c;在无线通信系统中&#xff0c;天线被用于发射与接收射频与微波波段的电磁波。而在我们的智能手机中&#xff0c;就有内置的平面倒F天线(…

01-认识产品经理

文章目录引入1.1 合格的产品经理1.2 产品经理的分类按服务对象不同划分按产品平台不同划分按公司所属行业不同按工作内容划分按职级高低划分1.3 产品经理的岗位职责产品的开发流程核心团队成员及其职责产品经理工作中常见误区1.4 产品经理的能力素质专业技能&#xff08;干得了…