前端基础知识JavaScript系列 - 09(JavaScript原型,原型链 )

一、原型

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象

当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾

准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上,而非实例对象本身

下面举个例子:

函数可以有属性。 每个函数都有一个特殊的属性叫作原型prototype

function doSomething(){}
console.log( doSomething.prototype );

控制台输出

{constructor: ƒ doSomething(),__proto__: {constructor: ƒ Object(),hasOwnProperty: ƒ hasOwnProperty(),isPrototypeOf: ƒ isPrototypeOf(),propertyIsEnumerable: ƒ propertyIsEnumerable(),toLocaleString: ƒ toLocaleString(),toString: ƒ toString(),valueOf: ƒ valueOf()}
}

上面这个对象,就是大家常说的原型对象

可以看到,原型对象有一个自有属性constructor,这个属性指向该函数,如下图关系展示

二、原型链

原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法

在对象实例和它的构造器之间建立一个链接(它是__proto__属性,是从构造函数的prototype属性派生的),之后通过上溯原型链,在构造器中找到这些属性和方法

下面举个例子:

function Person(name) {this.name = name;this.age = 18;this.sayName = function() {console.log(this.name);}
}
// 第二步 创建实例
var person = new Person('person')

下面分析一下:

  • 构造函数Person存在原型对象Person.prototype

  • 构造函数生成实例对象personperson__proto__指向构造函数Person原型对象

  • Person.prototype.__proto__ 指向内置对象,因为 Person.prototype 是个对象,默认是由 Object函数作为类创建的,而 Object.prototype 为内置对象

  • Person.__proto__ 指向内置匿名函数 anonymous,因为 Person 是个函数对象,默认由 Function 作为类创建

  • Function.prototype 和 Function.__proto__同时指向内置匿名函数 anonymous,这样原型链的终点就是 null

三、总结

下面首先要看几个概念:

__proto__作为不同对象之间的桥梁,用来指向创建它的构造函数的原型对象的

每个对象的__proto__都是指向它的构造函数的原型对象prototype

person1.__proto__ === Person.prototype

构造函数是一个函数对象,是通过 Function构造器产生的

Person.__proto__ === Function.prototype

原型对象本身是一个普通对象,而普通对象的构造函数都是Object

Person.prototype.__proto__ === Object.prototype

刚刚上面说了,所有的构造器都是函数对象,函数对象都是 Function构造产生的

Object.__proto__ === Function.prototype

Object的原型对象也有__proto__属性指向nullnull是原型链的顶端

Object.prototype.__proto__ === null

下面作出总结:

  • 一切对象都是继承自Object对象,Object 对象直接继承根源对象null

  • 一切的函数对象(包括 Object 对象),都是继承自 Function 对象

  • Object 对象直接继承自 Function 对象

  • Function对象的__proto__会指向自己的原型对象,最终还是继承自Object对象

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

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

相关文章

vue3+ts 使用VueCropper实现剪切图片

效果图: 参考文档: Vue-Cropper 文档Vue-Cropper 文档 安装VueCropper //npm安装 npm install vue-croppernext -d --save//yarn安装 yarn add vue-croppernext 引入组件 在main.ts中全局注册: import VueCropper from vue-cropper; i…

el-table特殊表头样式

el-table特殊表头样式 实现表头是按钮 <el-table-column align"center"><template slot"header"><el-buttonsize"mini"type"primary"icon"el-icon-plus"circleclick"addData"></el-button&g…

el-tree的属性render-content自定义样式不生效

需求是想要自定义展示el-tree的项&#xff0c;官网有一个:render-content属性&#xff0c;用的时候发现不管是使用class还是style&#xff0c;样式都没有生效&#xff0c;还会报一个错&#xff0c;怎么个事呢&#xff0c;后来发现控制台还会报一个错“vue.js:5129 [Vue warn]: …

银杏书签里的春天

春末的细雨沾湿了旧书扉页&#xff0c;我在泛黄的《飞鸟集》里发现那枚银杏书签时&#xff0c;窗外的梧桐树正抖落最后一片枯叶。深褐色的叶脉间夹着张字条&#xff0c;娟秀的字迹被岁月晕染&#xff1a;"给永远在奔跑的人。" 十年前的我在旧书店打工&#xff0c;每天…

spring-ai 1.0.0 学习(十四)——向量数据库

向量数据库是AI系统中常用的工具&#xff0c;主要用来存储文档片段及进行语义相似度查找 与传统数据库不同&#xff0c;它执行的是相似度查找而不是精确匹配 最小化样例 首先在application.properties中&#xff0c;根据所用Embedding模型&#xff0c;添加一个嵌入式模型型号…

Spring Boot 的Banner的介绍和设置

Spring Banner 是指在 Spring Boot 应用启动时,控制台上显示的那一段 ASCII 艺术字(通常是 Spring 的 logo),以及一些应用信息。 Banner 是 Spring Boot 提供的一个小但有趣的功能,可以让应用程序启动时更具个性也显得更高级。 默认 Banner Spring Boot 内置了一个默认…

魅族“换血”出牌:手机基本盘站不稳,想靠AI和汽车“改命”

撰稿|何威 来源|贝多财经 被吉利收购后&#xff0c;魅族逐渐转向在AI领域躬身耕作。 自2024年2月以“All in AI”正式宣告转型、喊出不再推出传统智能手机的豪言开始&#xff0c;这家曾以设计见长的手机厂商&#xff0c;将下半场押注在AI终端、AR眼镜与智能座舱系统上&#…

力扣热题100之将有序数组转换为二叉搜索树

题目 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 代码 使用递归的方法 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # s…

mac隐藏文件现身快捷键

在 macOS 系统中&#xff0c;‌显示/隐藏隐藏文件‌ 有两种常用方法&#xff0c;以下是详细说明&#xff1a; ✅ 方法一&#xff1a;使用快捷键&#xff08;最简单&#xff09; 打开 ‌访达&#xff08;Finder&#xff09;‌。 进入任意文件夹&#xff08;如桌面或文档&#x…

IAR Workspace 中 Debug 与 Release 配置的深度解析

IAR Workspace 中 Debug 与 Release 配置的深度解析 一、配置的本质区别 1. 核心目标对比 特性Debug 配置Release 配置优化目标调试友好性性能/尺寸优化代码优化无或低优化 (-O0/-O1)高级优化 (-O2/-O3/-Oz)调试信息包含完整符号信息无或最小化符号断言检查启用通常禁用输出…

Ubuntu下安装python3

一、下载python3源码 以要安装的是python3.13.5为例&#xff0c;在 Index of /ftp/python/3.13.5/ 下载Python-3.13.5.tgz&#xff1a; 将压缩包上传到Ubuntu系统中&#xff0c;解压&#xff1a; tar -zxvf Python-3.13.5.tgz 二、安装 进入解压后的源码目录&#xff1a; c…

计算机基础和Java编程的练习题

1. 计算机的核心硬件是什么&#xff1f;各自有什么用&#xff1f; 中央处理器&#xff08;CPU&#xff09;&#xff1a;负责执行程序中的指令&#xff0c;进行算术和逻辑运算&#xff0c;是计算机的“大脑”。 内存&#xff08;RAM&#xff09;&#xff1a;临时存储CPU正在处…

桥头守望者

赵阿姨在324国道边的便利店守了八年柜台&#xff0c;她的记账本里藏着特殊的日历——那些标着KLN字母的运输单据总在固定日期出现&#xff0c;精确得像是节气。"比气象台还准"&#xff0c;她指着玻璃窗上凝结的水珠说。去年寒潮来袭时&#xff0c;她亲眼看见送货员小…

C语言函数的参数传递和C++函数的参数传递

文章目录 C语言值传递地址传递 C引用传递 C语言 值传递 这种方式使用变量、数组元素作为函数参数&#xff0c;实际是将实参的值复制到形参相应的存储单元中&#xff0c;即形参和实参分别占用不同的存储单元&#xff0c;这种传递方式称为“参数的值传递”。在调用结束后&#…

设计模式-三大工厂

工厂模式有三种&#xff0c;分别是简单工厂模式、工厂方法模式、抽象工厂模式。三种模式从前到后越来越抽象&#xff0c;也更具有一般性。 设计模式 优点 缺点 简单工厂 1.实现了对责任的分割&#xff0c;它提供了专门的工厂类用于创建对象。 1.违背了开闭原则。 2.使用了…

在 AI 工具海洋中掌舵:Cherry Studio 如何成为你的统一指挥中心

01 被 AI 工具包围的知识工作者现状 在这个 AI 爆发的时代&#xff0c;知识工作者的工具库正经历前所未有的扩容。以我为例&#xff0c;按平台类型梳理日常使用的 AI 工具&#xff0c;已然形成三层矩阵&#xff1a; 「云端智能助手」&#xff1a;Kimi、豆包、ChatGPT、Gemini…

Java 线程池技术深度解析与代码实战

为什么线程池总在深夜崩溃&#xff1f; 昨天我这项目又经历了一次爆破——路由推送服务突然崩溃&#xff0c;排查发现线程池队列堆积了几万任务直接把内存撑爆。早上起来看见人都麻了&#xff0c;线程池用不好&#xff0c;分分钟变系统炸弹。今天我们就来系统梳理线程池的实战…

Gradio可视化构建聊天机器人

Gradio是一个Python库&#xff0c;专门用于快速构建和部署机器学习模型的Web界面。它的名字来源于"Gradient"&#xff08;梯度&#xff09;&#xff0c;最初是为了让机器学习开发者能够快速展示他们的模型而设计的。 1. Gradio是什么&#xff1f; 核心概念 快速原…

selenium如何识别条形验证码,自动输入验证码

在自动化测试或网页爬取中&#xff0c;识别验证码是常见的难点。Selenium 本身不具备直接识别验证码的能力&#xff0c;但可以通过结合第三方工具、OCR 技术或人工介入等方式解决。以下是多种可行方案的详细实现思路及代码示例&#xff1a; 一、方案一&#xff1a;使用第三方验…

SAP将指定EXCEL工作SHEET的数据上传到内表

SAP将指定EXCEL工作SHEET的数据上传到内表 本文描述了一个SAP ABAP类方法upload_excel_2internaltab&#xff0c;用于将Excel文件数据上传到内部表。主要功能包括&#xff1a; 验证Excel行列范围有效性&#xff0c;若起始值大于结束值则抛出异常检查文件是否存在&#xff0c;支…