《原型链的故事:JavaScript 对象模型的秘密》

原型链(Prototype Chain) 是 JavaScript 中实现继承的核心机制。每个对象都有一个内部属性 [[Prototype]](可以通过 __proto__ 访问),指向其原型对象。每个对象都有一个原型, 原型本身也是一个对象因此它也有自己的原型 。通过原型链,对象可以访问其原型对象的属性和方法。以下是原型链的详细说明:

获取原型的方法

方法说明
obj.__proto__非标准方法,直接访问对象的原型。
Object.getPrototypeOf(obj)标准方法,推荐使用。
Object.prototype.isPrototypeOf(obj)检查对象是否在原型链上。
obj.constructor.prototype通过构造函数获取原型。

1. 原型对象

  • 每个函数都有一个 prototype 属性,指向一个对象(称为原型对象)。

  • 当使用 new 关键字创建实例时,实例的 __proto__ 会指向构造函数的 prototype

示例

function Person(name) {this.name = name;
}// 在原型对象上添加方法
Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, my name is Alice
  • person1.__proto__ 指向 Person.prototype

  • Person.prototype.constructor 指向 Person 函数。

2. 原型链

  • 当访问对象的属性或方法时,JavaScript 会先在对象自身查找,如果找不到,则沿着原型链向上查找,直到找到或到达原型链的顶端(null)。

  • 原型链的顶端是 Object.prototype,其 __proto__ 为 null

示例

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

3. 继承

通过原型链,可以实现对象之间的继承。

(1)构造函数继承

function Parent(name) {this.name = name;
}
Parent.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};function Child(name, age) {Parent.call(this, name); // 调用父类构造函数this.age = age;
}// 设置原型链
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;const child = new Child('Bob', 10);
child.sayHello(); // 输出: Hello, my name is Bob

(2)ES6 类继承

class Parent {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}class Child extends Parent {constructor(name, age) {super(name); // 调用父类构造函数this.age = age;}
}const child = new Child('Bob', 10);
child.sayHello(); // 输出: Hello, my name is Bob

4. 原型链的查找过程

当访问对象的属性或方法时,JavaScript 会按照以下顺序查找:

  1. 在对象自身查找。

  2. 如果找不到,沿着 __proto__ 向上查找,直到找到或到达 null

示例

const obj = { a: 1 };
console.log(obj.toString()); // 输出: [object Object]
  • obj 自身没有 toString 方法。

  • 查找 obj.__proto__(即 Object.prototype),找到 toString 方法。

5. 修改原型链

可以通过修改 __proto__ 或 prototype 来改变原型链。

示例

const parent = { name: 'Parent' };
const child = { age: 10 };// 设置 child 的原型为 parent
child.__proto__ = parent;console.log(child.name); // 输出: Parent

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

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

相关文章

第11章 web应用程序安全(网络安全防御实战--蓝军武器库)

网络安全防御实战--蓝军武器库是2020年出版的,已经过去3年时间了,最近利用闲暇时间,抓紧吸收,总的来说,第11章开始学习利用web应用程序安全,主要讲信息收集、dns以及burpsuite,现在的资产测绘也…

【redis】全局命令set、get、keys

生产环境 未来在工作中会涉及到的几个环境: 办公环境(入职后,公司给你发个电脑)开发环境 有的时候,开发环境和办公环境是一个(一般做前端和做客户端)有的时候,开发环境是一个单独的…

Paper Reading | AI 数据库融合经典论文回顾

人工智能(AI)和数据库(DB)在过去的50年里得到了广泛的研究,随着数据库近年来的不断发展,数据库开始与人工智能结合,数据库和人工智能(AI)可以相互促进。一方面&#xff0…

Linux上位机开发(开篇)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 传统的上位机开发,一般都是默认pc软件开发。既然是pc软件,一般来说都是基于windows平台开发。开放的框架,无非是…

最长递增子序列--蓝桥oj3046拍照

题目链接 arr[] 1700 1701 1702 1703 1704 1705 dp1[] 1 2 3 4 5 6 dp2[] 6 5 4 3 2 1 sum[]dp1[]dp2[] sum[] 7 7 7 7 7 7 7是最大的倒叙和正序的…

upload-labs文件上传

第一关 上传一个1.jpg的文件,在里面写好一句webshell 保留一个数据包,将其中截获的1.jpg改为1.php后重新发送 可以看到,已经成功上传 第二关 写一个webshell如图,为2.php 第二关在过滤tpye的属性,在上传2.php后使用b…

LeetCode1137 第N个泰波那契数

泰波那契数列求解:从递归到迭代的优化之路 在算法的世界里,数列问题常常是我们锻炼思维、提升编程能力的重要途径。今天,让我们一同深入探讨泰波那契数列这一有趣的话题。 泰波那契数列的定义 泰波那契序列 Tn 有着独特的定义方式&#xf…

OpenCV 拆分、合并图像通道方法及复现

视频讲解 OpenCV 拆分、合并图像通道方法及复现 环境准备:安装 OpenCV 库(pip install opencv-python) 内容: 1. 读取任意图片(支持 jpg/png 等格式) 2. 使用 split () 函数拆解成 3 个单色通道&#xf…

【ArcGIS】地理坐标系

文章目录 一、坐标系理论体系深度解析1.1 地球形态的数学表达演进史1.1.1 地球曲率的认知变化1.1.2 参考椭球体参数对比表 1.2 地理坐标系的三维密码1.2.1 经纬度的本质1.2.2 大地基准面(Datum)的奥秘 1.3 投影坐标系:平面世界的诞生1.3.1 投…

登录固定账号和密码:

接口文档 【apifox】面试宝典 个人中心-保存用户数据信息 - 教学练测项目-面试宝典-鸿蒙 登录固定账号和密码: 账号:hmheima 密码:Hmheima%123 UI设计稿 【腾讯 CoDesign】面试宝典 CoDesign - 腾讯自研设计协作平台 访问密码&#xff1…

软件测试的基础入门(二)

文章目录 一、软件(开发)的生命周期什么是生命周期软件(开发)的生命周期需求分析计划设计编码测试运行维护 二、常见的开发模型瀑布模型流程优点缺点适应的场景 螺旋模型流程优点缺点适应的场景 增量模型和迭代模型流程适应的场景…

大模型架构记录2

一 应用场景 1.1 prompt 示例 1.2 自己搭建一个UI界面,调用接口 可以选用不同的模型,需要对应的API KEY 二 Agent 使用 2.1 构建GPT

PQL查询和监控各类中间件

1 prometheus的PQL查询 1.1 Metrics数据介绍 prometheus监控中采集过来的数据统一称为Metrics数据,其并不是代表具体的数据格式,而是一种统计度量计算单位当需要为某个系统或者某个服务做监控时,就需要使用到 metrics prometheus支持的met…

maven学习

Maven 概述 Maven 是一个基于 POM(Project Object Model,项目对象模型) 的项目管理和构建工具,主要用于 Java 项目。它通过一个中央信息管理模型(POM 文件)来管理项目的构建、依赖、文档、报告等。Maven 的…

STM32-I2C通信外设

目录 一:I2C外设简介 二:I2C外设数据收发 三:I2C的复用端口 四:主机发送和接收 五:硬件I2C读写MPU6050 相关函数: 1.I2C_ GenerateSTART 2.I2C_ GenerateSTOP 3.I2C_ AcknowledgeConfig 4.I2C…

c语言程序设计--(数据的存储)冲刺考研复试面试简答题,看看我是怎么回答的吧!!!!!

目录 1、整型在内存中的存储是怎样的? 2、原码反码补码的计算方式是什么? 3、对于整形数据在内存中存的都是二进制补码是为什么? 2、什么是大端小端存储? 3、为什么要有大端和小端的存储方式呢? 1、整型在内存中的…

记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308)

文章目录 记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308)一、创建项目1.1 生成提示词1.2 生成代码 二、编译预览2.1 导入项目2.2 编译预览 三、发布3.1 在微信开发者工具进行上传3…

Java 大视界 -- 基于 Java 的大数据实时数据处理框架性能评测与选型建议(121)

💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…

MySQL索引数据结构

目录 1 索引常用的数据结构 1.1 二叉树 1.2 平衡二叉树 1.3 红黑树 1.3 Hash表 1.4 B树 1.4 B树 2 MySQL索引的数据结构 2.1 MyISAM存储引擎索引 2.2 InnoDB存储引擎索引 2.2.1 聚集索引 2.2.2 非聚集索引 2.2.3 联合索引数 2.2.4 hash索引 1 索引常用的数据结构 1.1 二叉树 二…

链表算法题目

1.两数相加 两个非空链表,分别表示两个整数,只不过是反着存储的,即先存储低位在存储高位。要求计算这两个链表所表示数的和,然后再以相同的表示方式将结果表示出来。如示例一:两个数分别是342和465,和为807…