js中原型和原型链的特点

在这里插入图片描述


文章目录

  • 一、原型
  • 二、原型链
  • 三、总结
  • 参考文献


一、原型

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.prototypeFunction.__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对象


参考文献

  • https://juejin.cn/post/6870732239556640775#heading-7
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

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

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

相关文章

[C++历练之路]C++多态底层逻辑知多少

W...Y的主页 😊 代码仓库分享💕 前言🍔:学习了继承与多态,我相信大家对其底层的运用逻辑非常之好奇,今天我们就来探索一下多态中的底层逻辑,话不多说,我们现在开始! 目…

BUUCTF-Real-[ThinkPHP]5-Rce

1、ThinkPHP检测工具 https://github.com/anx0ing/thinkphp_scan 漏洞检测 通过漏洞检测,我们发现存在rce漏洞! 2、漏洞利用 ---- [!] Name: Thinkphp5 5.0.22/5.1.29 Remote Code Execution VulnerabilityScript: thinkphp5022_5129.pyUrl: http://n…

python打造光斑处理系统4:裁切光斑感兴趣区域

文章目录 图像裁切给定坐标裁切手动阈值裁切 光斑处理:python处理高斯光束的图像 光斑处理系统:程序框架🌟打开图像🌟参数对话框/伪彩映射 图像裁切 一般来说,光斑只占图像很小一部分,为了更好的观感和更…

剪映使用_

目录 导出的视频大小过大 Adobe Premiere Pro 2022导入视频文件压缩类型不支持 导出的视频大小过大 https://www.bilibili.com/video/BV1mt4y1R75Q Adobe Premiere Pro 2022 教程: https://mp.weixin.qq.com/s/gwYXDCD_iCQTa78tlG6Puw Adobe premiere 安装包下载&…

SpringCloud Gateway(4.1.0) 返回503:原因分析与解决方案

文章目录 一、环境版本二、原因分析三、解决方案 一、环境版本 Versionspring-cloud-dependencies2023.0.0spring-cloud-starter-gateway4.1.0Nacosv2.3.0 二、原因分析 在 Spring Cloud Gateway 的早期版本中,Ribbon 被用作默认的负载均衡器。随着Spring Cloud的…

PHP的线程安全与非线程安全模式选哪个

曾经初学PHP的时候也很困惑对线程安全与非线程安全模式这块环境的选择,也未能理解其中意。近来无意中看到一个教程对线程安全(饿汉式),非线程安全(懒汉式)的描述,虽然觉得现在已经能够很明了透彻…

matplotlib多子图共享坐标轴

文章目录 共用坐标添加共享轴灰度直方图 共用坐标 当一个图像中有多个子图时,若这些子图坐标的含义相同,那么省略一些坐标可以让图像更加简洁。在matplotlib中,通过sharex或者sharey可以起到共享x或y轴坐标的作用。示例如下 import numpy a…

嵌入式学习 Day15

一. 指针类型辨析 二. 传参辨析 三. 结构体 1.定义结构体 练习: 2. 结构体大小 8,12

Linux 内核学习1. 编译并启动一个最小化系统

Linux 内核学习1. 编译并启动一个最小化系统 一、Linux内核简介1. Linux 内核介绍2. Linux内核主要的作用 二、编译内核主要的步骤三、编译过程1. 准备环境2. 安装编译工具和依赖项3. 下载源码4. 配置内核配置功能选项命令行配置图形化配置默认配置 5. 编译内核6. 构建轻量化工…

ElementUI Form:Checkbox 多选框

ElementUI安装与使用指南 Checkbox 多选框 点击下载learnelementuispringboot项目源码 效果图 el-checkbox.vue 页面效果图 项目里el-checkbox.vue代码 <script> const cityOptions [上海, 北京, 广州, 深圳] export default {name: el_checkbox,data() {return …

Oracle 集群】RAC知识图文详细教程(四)--缓存融合技术和主要后台进程

Cache Fusion 原理 前面已经介绍了 RAC 的后台进程&#xff0c;为了更深入的了解这些后台进程的工作原理&#xff0c;先了解一下 RAC 中多节点对共享数据文件访问的管理是如何进行的。要了解 RAC 工作原理的中心&#xff0c;需要知道 Cache Fusion 这个重要的概念&#xff0c;要…

TPH-YOLOv5:基于Transformer预测头改进的YOLOv5开发构建麦穗检测计数分析系统

关于小麦麦穗或者是麦粒相关的开发实践不多&#xff0c;但前文也有所涉及&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《基于轻量级yolov5nCBAM开发构建全球小麦麦穗智能检测计数系统》 《基于YOLOv5[n/s/m/l/x]全系列参数模型开发构建小麦麦穗颗粒智能化精准检…