首页 > 资讯 > 前端开发 > JavaScript >JavaScript深入浅出__proto__和prototype

705

分享到

JavaScript深入浅出proto和prototype

2024-04-02 19:04:59 705人浏览独家记忆

摘要

目录构造函数和实例prototypeconstructor原型对象的原型原型链扩展知识总结首先我们先记住几个知识点：每个函数都有一个prototype属性每个对象都有一个__pro

构造函数和实例

首先我们通过下面的例子了解些基本的概念

function Person() {
}
var person1 = new Person()

使用 new 创建对象的函数就是构造函数、创建出的对象就是构造函数的实例对象
本例中：Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person1
构造函数大写只是约定俗成的习惯，实际上任何可以使用 new 运算符的函数都可以是构造函数

prototype

function Person() {
}
Person.prototype.name = 'Person'
var person1 = new Person()
console.log(person1.name) // Person
console.log(Person.prototype)

Person 的 prototype 属性指向的是 Person.prototype 的原型对象
在这个例子中可以看出，person1 本身并没有 name 属性，访问的其实是 Person 中prototype 的 name
从这里可以得出必然有一种关系把person1和Person关联起来，使得person1可以访问到Person中prototype的属性值

带着上面的疑问我们继续下面的例子

__proto__和prototype的关系

function Person() {
}
Person.prototype.name = 'Person'
var person1 = new Person()
console.log(person1)
console.log(person1.__proto__.name === Person.prototype.name) // true
console.log(person1.__proto__ === Person.prototype) // true

一开始我们就提到，每个对象都有一个__proto__属性（null除外），通过这个例子我们发现person1的__proto__属性下有个name属性，正好是Person.prototype.name的值，由此我们可以看出实例person1是通过__proto__访问的构造函数Person的prototype属性

根据上面的结论，我们很容易得出以下关系图

由此我们很容易得出，多个示例对象之间通过__proto__进行关联，可以通过__proto__共享Person.prototype上的属性

constructor

既然构造函数和实例都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？通过上面的例子，我们发现除了__proto__，还有一个constructor属性

function Person() {
}
Person.prototype.name = 'Person'
var person1 = new Person()
console.log(Person) // ƒ Person() {}
console.log(Person.prototype.constructor) // ƒ Person() {}
console.log(person1.__proto__.constructor) // ƒ Person() {}
// 由此我们发现`constructor`属性指向的是Person构造函数本身，不难得出以下结论
console.log(Person === Person.prototype.constructor) // true

由此我们可以得出以下关系图：

原型对象的原型

原型也是一个对象，一开始就提到，每个对象都有一个__proto__属性（null除外），因此原型对象也是有__proto__的
实际上原型对象就是通过 Object 构造函数生成的

var prototypeObj = new Object()
console.log(prototypeObj.__proto__ === Object.prototype) // true

到此我们可以得出一个新的关系图

到这里大家可能就有疑惑了，这样不就无限循环了吗，Object.protoType的__proto__又是什么呢？

console.log(Object.protoType.__proto__) // null
console.log(Object.protoType.__proto__ === null) // true

所以 Object.prototype 为null，属性查找到这里也就结束了

原型链

由上面的例子我们得知，在查找对象的属性时，优先查找实例对象的属性，查找不到时就会通过__proto__ 查找 prototype原型对象的属性，还查不到会通过prototype的__proto__继续查找，直到Object.protoType.__proto__为止

图中由__proto__组成的红色链路就是我们所说的原型链

扩展知识

关于 Object 和 Function

既然函数也是对象，对象都有 __proto__ ，那么 Object 和 Function 的 __proto__ 属性又是什么呢？

Object对象是由Function构造函数创建的
Function的原型对象Function.prototype是由Object构造函数创建的
【按照原型的定义，可以理解为】Function对象是由Function构造函数本身创建

根据原型链的相关知识，实例对象的 __proto__ 指向构造函数的原型对象 prototype

// Object对象由Function构造函数创建
Object.__proto__ === Function.prototype // true
// Function的原型对象`Function.prototype`是由Object创建
Function.prototype.__proto__ === Object.prototype // true
// Function由Function本身创建(按照原型的定义可以简单这么去理解，这里不做深究)
Function.__proto__ === Function.prototype // true
Object.getPrototypeOf(Function) === Function.prototype // true

由此我们可以得出最终的关系图：

关于 getPrototypeOf、isPrototypeOf、instanceof

function Person() {
}
var person1 = new Person()
// Object.getPrototypeOf(obj) 返回obj实例对象的原型(obj.__proto__)
console.log(Object.getPrototypeOf(person1) === Person.prototype) // true
// Object.isPrototypeOf(obj)，如果obj.__proto__和Object.prototype在一条原型链上(或者理解为Object为obj的构造函数或父级构造函数)，则返回true
console.log(Object.prototype.isPrototypeOf(person1)) // true
console.log(Object.prototype.isPrototypeOf(Person.prototype)) // true
console.log(Person.prototype.isPrototypeOf(person1)) // true
// (obj instanceof Object) 同isPrototypeOf类似，obj.__proto__和Object.prototype在一条原型链上，则返回true
console.log(person1 instanceof Person) // true
console.log(person1 instanceof Object) // true

总结

每个函数都有一个prototype属性，值是一个原型对象
每个对象都有一个__proto__属性（null除外），指向构造函数的原型prototype
构造函数的原型对象的constructor指向构造函数本身
原型对象是由Object构造函数实例化产生的，所以原型对象的__proto__指向Object的原型对象Object.prototype
Object构造函数的原型对象为null

function Person() {}
var person = new Person()
console.log(person.__proto__ === Person.prototype) // true
console.log(Person === Person.prototype.constructor) // true
console.log(Object.prototype.__proto__ === null) // true
// 推导person.constructor等于person.__proto__.constructor等于Person.prototype.constructor
console.log(person.constructor === Person.prototype.constructor) // true

到此这篇关于javascript深入浅出__proto__和prototype的文章就介绍到这了,更多相关js proto 和 prototype内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript深入浅出__proto__和prototype

本文链接: https://www.lsjlt.com/news/149636.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript深入浅出__proto__和prototype

目录构造函数和实例prototypeconstructor原型对象的原型原型链扩展知识总结首先我们先记住几个知识点：每个函数都有一个prototype属性每个对象都有一个__pro...

99+

2024-04-02
揭秘 JavaScript 模块化：深入浅出

JavaScript 模块化的必要性在构建大型 JavaScript 应用程序时，将代码组织成更小的、独立的模块至关重要。这种模块化可以实现以下优势：可维护性：易于管理和维护代码库，特别是在团队协作开发的情况下。可重用性：允...

99+

2024-02-18

JavaScript 模块模块化 CommonJS ES Modules 代码可重用性
JavaScript BOM 权威指南：深入浅出

JavaScript BOM 介绍 JavaScript BOM（浏览器对象模型）是一系列用于操作浏览器中的窗口、标签页和历史记录的 JavaScript 对象。BOM 允许开发人员访问和控制浏览器窗口的各种属性，例如其大小、位置和标题...

99+

2024-02-21

JavaScript BOM 浏览器对象模型窗口标签页历史记录导航位置屏幕
深入浅出JavaScript中base64编码原理

目录前言base64 由来base64 的编码原理base64 编码对照表base64 的编码转换规则base64 优缺点JavaScript 的 base64 转码方法Web AP...

99+

2023-02-26

JavaScript base64编码原理 JavaScript base64编码 JavaScript base64
深入浅出探究JavaScript中的async与await

目录1、前言2、详解2.1、async2.1.1、函数返回非Promise对象2.1.2、函数返回Promise对象2.2、await2.3、async、await结合使用2.4、a...

99+

2024-04-02
JavaScript 继承的方方面面：深入浅出

引言继承是面向对象编程中的一项基本机制，它允许创建派生类，从基类继承属性和方法。在 JavaScript 中，有两种主要类型的继承：通过原型链和 ES6 中引入的类。本文将深入探索 JavaScript 继承的方方面面，从基础概念到高...

99+

2024-02-15

JavaScript 继承 ES6 原型链类
深入浅出MappedByteBuffer(推荐)

目录1.内存管理2.MappedByteBuffer的深度剖析2.1 map过程2.2 get过程3.性能分析4.总结java io操作中通常采用BufferedReader，Buf...

99+

2022-12-10

深入浅出MappedByteBuffer MappedByteBuffer
深入浅出JS的Object.defineProperty()

目录前言对象的定义与赋值Object.defineProperty()语法说明属性的特性以及内部属性属性描述符数据描述符 --特有的两个属性（value,writable）存取描述符...

99+

2024-04-02
【C++深入浅出】类和对象下篇

一. 前言老样子，先来回顾一下上期的内容：上期我们着重学了C++类中的六大默认成员函数，并自己动手实现了一个日期类，相信各位对C++中的类已经有了一定程度的了解。本期就是类和对象的最后一篇啦，终于要结束咯，吧唧吧唧 ...

99+

2023-10-10

c++ 开发语言初始化列表 static成员友元匿名对象 explicit关键字
深入浅出JavaScript前端中的设计模式

目录关于设计模式七种常见的设计模式单例模式工厂模式适配器模式装饰器模式策略模式观察者模式发布-订阅模式关于设计模式软件设计模式，又称设计模式，是一套被反复使用、多数人知晓的、经过分...

99+

2023-05-20

JavaScript设计模式 JS设计模式
深入浅出，JavaScript CommonJS模块化开发指南

JavaScript CommonJS模块化开发入门 JavaScript CommonJS模块化开发是一种流行的模块化开发方式，它允许您将代码分成多个文件，从而提高代码的可读性、可维护性和可重用性。CommonJS模块化开发使用一个名...

99+

2024-02-10

JavaScript CommonJS 模块化开发指南
深入浅出分析Java类和对象

目录一、什么是类二、Java的类和C语言的结构体异同三、类和类的实例化类的声明实例化的对象，成员遵循默认值规则类的实例化静态属性（静态成员变量）四、构造方法创建构造方法this一、什...

99+

2024-04-02
JavaScript基础知识：深入浅出，透彻理解

JavaScript是一门解释型脚本语言，广泛用于Web开发。它可以被嵌入在HTML代码中，并由网页浏览器解释执行。JavaScript允许您在网页上创建交互式效果，例如按钮点击、表单验证、动画等。变量变量是用来存储数据的容器。...

99+

2024-02-08

JavaScript 基础知识变量数据类型运算符控制语句函数
深入浅出Golang中的sync.Pool

目录一、原理分析1.1 结构依赖关系图1.2 用图让代码说话1.3 Put过程分析二、学习收获2.1 如何自己实现一个无锁队列学习到的内容： 1.一个64位的int类型值，充分利用高...

99+

2023-03-13

Golang sync.Pool原理 Golang sync.Pool使用 Golang sync.Pool
c++深入浅出讲解堆排序和堆

目录堆是什么最大堆最小堆堆排序最终代码关于堆堆是什么堆是一种特殊的完全二叉树如果你是初学者，你的表情一定是这样的别想复杂首先，你一定见过这种图咱们暂时不管数字这就是一个...

99+

2024-04-02
JavaScript模块化：模块化的奥秘，深入浅出

JavaScript模块化是一种组织和封装代码的方法，它允许开发人员将应用程序拆分为独立的、可复用的单元，从而提高代码的可维护性和可重用性。模块化的优点代码可重用性：模块允许开发人员将代码复用到多个应用程序中，从而避免重复工作。代...

99+

2024-04-02
深入浅出 VUE 条件和循环：入门教程

条件渲染 Vue.js 中的条件渲染使用 v-if 和 v-else 指令。这些指令允许开发者根据条件表达式显示或隐藏元素。 <div v-if="isVisible"> 我是可见的 </div> <di...

99+

2024-04-02
JavaScript MVC 架构的奥秘：深入浅出大揭秘

引言： JavaScript MVC 架构是前端开发中广泛应用的一种架构模式。它将应用程序划分为视图、模型和控制器三层，各司其职，从而提高代码的可维护性和可复用性。本文将深入浅出地剖析 JavaScript MVC 架构，揭开其神秘面纱。...

99+

2024-03-02

JavaScript, MVC, 架构, 视图, 模型, 控制器
深入浅出，掌握JavaScript try...catch语句的奥秘

1. 什么是异常？异常是程序在运行过程中遇到的意外情况，例如：除数为零数组下标越界文件不存在网络连接失败异常会中断程序的正常执行，并且可能会导致程序崩溃。 2. try...catch 语句 try...catch 语句...

99+

2024-02-10

JavaScript try...catch 异常错误处理
深入浅出 JavaScript Jest：让单元测试更优雅

...

99+

2024-04-02