es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

news2025/1/24 11:26:52

现在看这张图开始变得云里雾里,所以简单回顾一下 prototype 的基本内容,能够基本读懂这张图的脉络。
在这里插入图片描述
先介绍一个基本概念:

function Person() {}

Person.prototype.name = 'KK';

let person1 = new Person();

在上面的例子中,

Person 叫做构造函数(函数被进行构造调用,为下文方便,称之为构造函数
Person.prototype 叫做 Person 的原型对象
person1 又称之为实例
TL;DR.
构造函数默认会包含一个 prototype 属性,其值指向原型对象,即 Parent.prototype = Parent.prototype
默认情况下,构造函数.原型对象.constructor = 构造函数 Parent.prototype.constructor = Parent 。但如果有明确改写,则未必是这种指向。
实例.proto = 构造函数.原型对象 person.proto = Parent.prototype
实例和构造函数的原型对象之间有直接联系,但是实例和构造函数之间没有直接联系。

原型对象

在创建函数时, Function 的构造器产生函数对象时为其绑定的一个存放继承特征的对象属性prototype 。 Function 的构造器产生函数对象时,会运行类似的代码:

this.prototype = { constructor : this}

这个属性 prototype 的值是默认只会获得一个包含 constructor 属性的对象,其余的方法都继承自 Object。这个对象就是通过调用构造函数创建的对象的原型。使用原型对象 prototype 的好处就是,在它上面定义的属性和方法可以被对象的实例所共享。 原本在构造函数中给对象实例赋的值,可以直接赋值给它们的原型。

function Parent() {}

// 定义在 Parent.prototype 的值,可以被该对象实例共享。
Parent.prototype.name = 'KK';

Parent.prototype.sayHi = function () {
  console.log('hi,', this.name);
};

// Parent 对象的实例 person1, person2
let person1 = new Parent();
let person2 = new Parent();

person1.sayHi(); // hi, KK
person2.sayHi(); // hi, KK

而 prototype 里包含的 constructor 指向了与之关联的构造函数。如下图所示,我们可以看到 Parent 的 prototype 指向了 Parent.prototype (看起来是句废话),而 Parent.prototype 内的 constructor 指向了 Parent 。换言之,构造函数和构造函数原型对象的 constructor 之间形成了循环引用。

在这里插入图片描述
在这里插入图片描述

proto | [[prototype]]

开始之前,让我们来回顾一下 new 操作符, Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 proto。 通过这一步,实现了实例对象和构造函数 func 的原型对象进行链接,从而方便访问定义在原型对象上的方法或者属性。

function myNew(func, ...args) {

		// 1. 在内存中创建一个新对象
    const obj = Object.create()
		
		// 2. 在这个新对象内部的 [[ prototype ]] 特性被赋值为构造函数的 prototype 属性
    obj.__proto__ = func.prototype
		
		// 3. 构造函数内部的 this 被赋值为这个新对象
		// 执行构造函数内部代码
    let result = func.apply(obj, args)
    
		// 4. 如果构造函数返回一个非空对象,则返回该对象,都则则返回刚刚创建的新对象
		return result instanceof Object ? result : obj
}

其中,第1.2步,可以合并起来变成 const obj = Object.create(func.prototype) , Object.create() 方法会创建一个新对象,并把新对象的 proto 关联到指定的对象上。

回顾完 new 操作符,接着我们刚刚的例子, person1 和 person2 ,它们是由 Parent 创建的对象实例。每一次我们通过构造函数创建一个新实例的时候,实例会通过 proto 链接到构造函数的原型对象上面,及下图的第一个部分。

function Parent() {}

// Parent 对象的实例 person1, person2
let person1 = new Parent();
let person2 = new Parent();

但是,我们从图中可以看到,对象实例 person 的 proto 直接指向了其构造函数的原型对象 Parent.prototype ,实例和原型对象之间,其实是一个引用的关系,并不是重新保存了一个原型对象的副本。同时,我们也可以看到,对象实例和构造函数并没有发生直接的联系。

在这里插入图片描述

console.log(person1.__proto__ === Parent.prototype); // true
console.log(person1.__proto__.constructor === Parent); // true

console.log(person1 instanceof Parent)

原型链查找

我们经常会提起一个沿着原型链进行查找,但是怎么算是原型链查找呢?如何进行原型链查找呢?

对于对象默认的 get 操作,会先开始从对象实例开始寻找,如果发现则返回给定的对象属性值,否则搜索将进入原型对象,在原型对象上开始寻找,再返回对应的值。如上一节的图示,我们可以看到当我们输入 person.name 那么他首先会进入 person 中,进行寻找。当寻找无果后,再进入 Parent.prototype 进行寻找。这也就是原型可以再多个对象实例间共享属性和方法的原理了。

function Parent() {
  name: 'Parent';
}

Parent.prototype.nickname = 'KK';

Parent.prototype.sayHi = function () {
  console.log(this.nickname);
};

let person1 = new Parent();

person1.nickname = 'person1';
person1.sayHi();

console.log(person1.nickname); // person1 

如果在实例对象上添加一个和原型对象同名的属性,那么就会在实例上创建这个属性值,这个在实例对象上的同名属性就会遮蔽原型对象上原有的属性。所谓遮蔽,只是因为会屏蔽对原型对象上同名属性的访问,但是并不会修改。只有使用 delete 才能完全删除实例上的这个属性,恢复对原型对象同名属性的访问。 否则,即使将实例上的同名属性修改为 null ,也无法恢复它和原型对象同名属性的联系。

属性’覆写’ or 遮蔽 Shadow
当然,这个对象属性的设置也有一定的规则,所谓的屏蔽也比我们想象的复杂。 我们可以来分析一下在实例对象上进行同名属性 set 动作的过程,这个会分为几个情况:

当原型对象上,不存在该属性时,直接设置即可;
当原型对象上,存在该属性:
仅为普通数据访问属性,且没有设置 writable:false ,则会在实例对象上,添加一个同名属性,遮蔽对原来原型对象上同名属性的访问;
当设置了 writable:false,标记该属性为只读属性(read-only),那么给实例对象设置同名属性的操作将会被拦截,这个复制操作在严格模式会报错,在非严格模式下会默认忽略。总言之,无法对原型对象的同名属性产生遮蔽的效果。
Attention: 看起来这个只要原型对象上存在 read-only 的属性,则无法进行同名属性赋值有点令人疑惑。但是这个限制只存在于 = 的复制操作中,如果直接使用 Object.defineProperty() 则不会受到影响,还是可以直接给实例对象进行复制操作。

如果原型对象的同名属性被设置了 setter , 那么这个 setter 会被调用,这个设置同名属性的动作会做用于这个 setter ,同样无法对原型对象的同名属性产生遮蔽的效果。

in 和 hasOwnProperty 属性来源

假定我们有这么一段代码,我们可以看到我们通过普通的复制方式,遮蔽了 person 原型对象上的 nickname 属性。不管这个属性是在实例上还是在原型上,只要在对象属性可以通过对象访问时,使用 in 操作符,操作结果都会返回 true。

function Parent() {
  nickname: 'Parent';
}

Parent.prototype.nickname = 'KK';

let person1 = new Parent();
let person2 = new Parent();

person1.nickname = 'person1';

console.log('nickname' in person1); // true
console.log('nickname' in person2); // true

我们知道,对于属性访问,即对属性的 get 操作,是会沿着原型链上进行查找,直至找到或者到根对象上。所以,如果需要判断这个属性到底是在实例对象上还是原型对象上,可使用 hasOwnProperty() 方法,这个方法可以用来确定某个属性在实例上还是在原型对象上,当且仅当这个属性是在调用它的对象上时,返回 true ,如:

console.log(person1.hasOwnProperty('nickname')); // true
console.log(person2.hasOwnProperty('nickname')); // false

结合上面提到的 in 和 hasOwnProperty ,那么我们只想要原型对象上的属性又要怎么进行判断呢? 可以创造一个 hasPrototypeProperty 方法,结合 in 和 hasOwnProperty 各自的特点:

function hasPrototypeProperty(obj, propertyKey) {
  return !obj.hasOwnProperty(propertyKey) && propertyKey in obj;
}

属性获取

当涉及到了遍历,在对象属性遍历中,我们可以用 for-in , Object.keys() ,单这二者也是有一定的区别的。

for-in
在 for 里面使用 in 操作符,可通过对象访问且可枚举的属性都会被返回,包括实例属性以及原型对象上的属性。当我们设置了 Enumberable:false 时,那么这个对象就变成了一个不可枚举属性,他才不会在循环中返回。需要注意一点,当我们在实例上定义一个同名属性去遮蔽原型对象一个不可枚举的属性时,这个在实例对象上没有被显式定义为不可枚举的同名属性,可以被返回,即不可枚举属性不会影响到实例属性。

Object.keys()
若想要获得对象上所有可枚举属性时,可以用 Object.keys() 的方法,这个方法接受对象作为参数,返回该对象上所有可枚举属性名数组,而不会包含其原型对象上属性。

可以把这个方法理解为 for-in + hasOwnProperty 的结合,只返回在对象上的属性,而不会沿着原型链进行查找。

Object.getOwnPropertyNames()
如果想列出所有实例属性,无论是否可以枚举,可以使用Object.getOwnPropertyNames()。但是需注意,这个方法的返回结果会包含了不可枚举属性。当我们对原型对象使用这个方法时,该方法会把 constructor 给返回回来。

在 ES6 出现 Symbol 的符号类型之后,相应也会出现一个 Object.getOwnPropertySymbols(),这个方法其实与 getOwnPropertyNames 类似,只是这个方法针对 Symbol 这种符号类型而已。

对于这几个方法,for-in , Object.keys() 的枚举顺序返回是不确定的,具体实现是取决于对应的 JavaScript 引擎的实现,而用 Object.getOwnPropertyNames() or Object.assign() 则是确定的,结果的返回会依据枚举数值键-插入的顺序枚举字符串-符号键。在 YDKJS 里有例子,我稍微拓展一下,可能看得更清晰一些:

let sym1 = Symbol('sym1')
let sym2 = Symbol('sym2')
let sym3 = Symbol('sym3')

let obj = {
  1: 1,
  [sym3]: 'sym3',
  [sym1]: 'sym1',
  second: 'second',
  first: 'first',
  0: 0
}

obj[sym2] = 'sym2'
obj[3] = 3
obj.forth = 'forth'
obj.third = 'third'
obj[2] = 2

console.log(Object.getOwnPropertyNames(obj)) // [ '0', '1', '2', '3', 'second', 'first', 'forth', 'third' ]
console.log(Object.getOwnPropertySymbols(obj)) //  [ Symbol(sym3), Symbol(sym1), Symbol(sym2) ]

prototype 判断方法

Object.getPrototypeOf()
Object.getPrototypeOf() ****方法返回指定对象的原型(内部 [[Prototype]] 属性的值)。具体用法为:

Object.getPrototypeOf(object)

Object.getPrototypeOf(person1); // { name: 'KK', sayHi: [Function (anonymous)] } 

Object.getPrototypeOf(person1) === Parent; // true

Object.prototype.isPrototypeOf()
Object.prototype.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。虽然并不是所有的方法都实现了对外暴露 proto ,但是我们可以通过 isPrototypeOf() 来确定 Parent.prototype 和 person 之间的关系,而因为 person 中有链接指向了 Person.prototype 。 所以结果返回为 true 。

Parent.prototype.isPrototypeOf(person1); // true

instanceof
instanceof 用于实例的原型链上是否包含了某个构造函数的 prototype 。具体用法为, instance instanceof constructionFunc 。 但是,注意,当我们显式改变了某个实例的 prototype 时,这个方法恐不适用。

person1 instanceof Parent ; // true

本文简单介绍了关于 prototype 的一些相关内容,对于文章开头的图片,现在我们回过头来看,虽然还是觉得反应会比较慢,但是仔细思考之后应该可以看懂整张图的链路和脉络。 简单休息一下,好好消化一下内容,接下来就要开始新的文章章节,原型链继承。

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

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

相关文章

Nor Flash

核心信息: 工作频率数据吞吐量 bps bit/s(传输数据速率) Hz(时钟频率) T/s 56MB/s(max)448Mb/s(数据吞吐量、4路)448MHz 112MHz(max读、时钟频率&#…

Spring @Configuration 注解解析原理

前言 ​ Configuration 注解是 Spring 3.0 版本引入的新特性(目前版本 6.0.11),它用于将一个类标记为配置类,通过配置类可以定义和组装 Spring Bean。 一般来说注解都会有相应的解析器,Configuration 注解靠 C…

Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法

不论搭建什么工程,运行什么文件,只要在Pycharm中出现ImportError: DLL load failed: 找不到指定的模块这样的问题,以下方法都适用!!! 一、问题描述 我在使用pycharm连接webots,用python控制机…

Redis功能实战篇之附近商户

在互联网的app当中,特别是像美团,饿了么等app。经常会看到附件美食或者商家, 当我们点击美食之后,会出现一系列的商家,商家中可以按照多种排序方式,我们此时关注的是距离,这个地方就需要使用到我…

JavaScript -【第一周】

文章来源于网上收集和自己原创,若侵害到您的权利,请您及时联系并删除~~~ JavaScript 介绍 变量、常量、数据类型、运算符等基础概念 能够实现数据类型的转换,结合四则运算体会如何编程。 体会现实世界中的事物与计算机的关系理解什么是数据并…

mybatis源码学习-1-调试环境

写在前面,这里会有很多借鉴的内容,有以下三个原因 本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…

【科研论文配图绘制】task7密度图绘制

【科研论文配图绘制】task7密度图绘制 task7 了解密度图的定义,清楚密度图是常用使用常见,掌握密度图绘制。 1.什么是密度图 密度图(Density Plot)是一种用于可视化数据分布的图表类型。它通过在数据中创建平滑的概率密度曲线…

java反编译工具jd-gui使用

文章目录 一、JD-GUI介绍二、下载三、安装四、使用教程五、免责声明摘抄 一、JD-GUI介绍 JD-GUI是一个独立的图形实用程序,显示“.class”文件的Java源代码。 使用JD-GUI浏览重构的源代码,以便即时访问方法和字段。 二、下载 MAC安装包:ht…

Gorm简单了解

GORM 指南 | GORM - The fantastic ORM library for Golang, aims to be developer friendly. 04_GORM查询操作_哔哩哔哩_bilibili 前置: db调用操作语句中间加debug()可以显示对应的sql语句 1.Gorm模型定义(理解重点&#xff…

在R中安装TensorFlow、TensorFlow_Probability、numpy(R与Python系列第二篇)

目录 前言: 1-安装tensorflow库 Step1: 下载R包tensorflow Step2:安装TensorFlow库 Step3:导入R中 2-安装tensorflow_probability库 Step1:下载R包:tfprobability Step2:安装TensorFlow Probability …

链表OJ练习(2)

一、分割链表 题目介绍: 思路:创建两个链表,ghead尾插大于x的节点,lhead尾插小于x的节点。先遍历链表。最后将ghead尾插到lhead后面,将大小链表链接。 我们需要在创建两个链表指针,指向两个链表的头节点&…

【Mysql系列】(一)MySQL语句执行流程

首发博客地址 首发博客地址 系列文章地址 参考文章 MySQL 逻辑架构 连接器 连接命令一般是这么写的 mysql -h$ip -P$port -u$user -p 那么 什么是连接器? MySQL 连接器(MySQL Connector)是用于连接和与 MySQL 数据库进行交互的驱动程序。它提…

高级IO

五种IO模型 1、阻塞等待:在内核将数据准备好之前,系统调用会一直等待。所有的套接字,默认都是阻塞方式。 2、非阻塞等待:如果内核没有将数据准备好,系统调用仍然会返回,并且会返回EWUOLDBLOCK或者EAGAIN错…

笔试题目回忆

&#xff08;1&#xff09;给出n,k&#xff0c;n表示数组个数&#xff0c;k表示要剔除的个数&#xff0c;接下来n个数为数组元素&#xff0c;求剔除k个数之后&#xff0c;其他所有数互为倍数&#xff0c;每个数最多剔除一次。 未检测代码&#xff0c;超时。 #include <ios…

第 3 章 栈和队列(单链队列)

1. 背景说明 队列(queue)是一种先进先出(first in first out,缩为 FIFO)的线性表。它只允许在表的一端进行插入&#xff0c;而在另一端删除元素。 2. 示例代码 1&#xff09;status.h /* DataStructure 预定义常量和类型头文件 */#ifndef STATUS_H #define STATUS_H/* 函数结果…

线上问诊:数仓开发(二)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 线上问诊&#xff1a;数仓开发(二) 文章目录 系列文章目录前言一、DWS1.最近1日汇总表1.交易域医院患者性别年龄段粒度问诊最近1日汇总表2.交易域医院患者…

身份识别与鉴权技术调研方案

对称加密算法 对称加密方式又称为私钥加密方式&#xff0c;该方式的加密和解密过程使用同一个密钥&#xff0c;因此该密钥又称为共享密钥。如图2.2所示&#xff0c;在对称加密方式中&#xff0c;发送方使用对称加密算法和共享密钥处理原始数据&#xff0c;得到一个加密后的密文…

vulnhub渗透测试靶场练习2

靶场介绍 靶场名&#xff1a;easy_cloudantivirus 靶场地址&#xff1a;https://www.vulnhub.com/entry/boredhackerblog-cloud-av,453 环境搭建 依旧使用VM VirtualBox搭建靶场&#xff0c;攻击机使用的是VMware中的kali&#xff0c;需要将VMware虚拟机kali和virtualbox靶机…

Web服务器部署上线踩坑流程回顾

5月份时曾部署上线了C的Web服务器&#xff0c;温故而知新&#xff0c;本篇文章梳理总结一下部署流程知识&#xff1b; 最初的解决方案&#xff1a;https://blog.csdn.net/BinBinCome/article/details/129750951?spm1001.2014.3001.5501后来的解决方案&#xff1a;https://blog…

Mysql数据库(3)—架构和日志

Mysql的架构设计 Mysql分为Server层和存储引擎层&#xff1a; Server层 主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函数等&#xff09;&#xff…