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

news2025/3/9 22:16:36

原型链(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.coloradmin.cn/o/2312367.html

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

相关文章

Linux 配置静态 IP

一、简介 在 Linux CentOS 系统中默认动态分配 IP 地址,每次启动虚拟机服务都是不一样的 IP,因此要配置静态 IP 地址避免每次都发生变化,下面将介绍配置静态 IP 的详细步骤。 首先先理解一下动态 IP 和静态 IP 的概念: 动态 IP…

【Python 数据结构 10.二叉树】

目录 一、二叉树的基本概念 1.二叉树的定义 2.二叉树的特点 3.特殊的二叉树 Ⅰ、斜树 Ⅱ、满二叉树 Ⅲ、完全二叉树 Ⅳ、完全二叉树和满二叉树的区别 4.二叉树的性质 5.二叉树的顺序存储 Ⅰ、完全二叉树 Ⅱ、非完全二叉树 Ⅲ、稀疏二叉树 6.二叉树的链式存储 7.二叉树的遍历概念…

SwanLab简明教程:从萌新到高手

目录 1. 什么是SwanLab? 1.1 核心特性 2. 安装SwanLab 3. 登录SwanLab账号(云端版) 4. 5分钟快速上手 更多案例 5. SwanLab功能组件 5.1 图表视图 5.2 表格视图 5.3 硬件监控 5.4 环境记录 5.5 组织协同 6. 训练框架集成 6.1 基…

SQLiteStudio:一款免费跨平台的SQLite管理工具

SQLiteStudio 是一款专门用于管理和操作 SQLite 数据库的免费工具。它提供直观的图形化界面,简化了数据库的创建、编辑、查询和维护,适合数据库开发者和数据分析师使用。 功能特性 SQLiteStudio 提供的主要功能包括: 免费开源,可…

贝塞尔曲线学习

1、一阶贝塞尔曲线 一阶贝塞尔曲线其实是一条直线——给定点 P0、P1,线性贝塞尔曲线就是一条两点之间的直线,公式如下: 一阶曲线很好理解, 就是根据t来线性插值。 void MainWindow::mousePressEvent(QMouseEvent *e) {list.append(e->pos…

机器学习(六)

一,决策树: 简介: 决策树是一种通过构建类似树状的结构(颠倒的树),从根节点开始逐步对数据进行划分,最终在叶子节点做出预测结果的模型。 结构组成: 根节点:初始的数据集…

【江协科技STM32】ADC数模转换器-学习笔记

ADC简介 ADC(Analog-Digital Converter)模拟-数字转换器ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量,建立模拟电路到数字电路的桥梁,ADC是一种将连续的模拟信号转换为离散的数字信号的设备或模块12位逐次逼近型…

嵌入式学习笔记-卡尔曼滤波,PID,MicroPython

文章目录 卡尔曼滤波卡尔曼滤波的核心思想卡尔曼滤波的数学模型1. 状态转移模型(预测系统状态)2. 观测模型(预测测量值) 卡尔曼滤波的五个关键步骤1. 预测状态2. 预测误差协方差3. 计算卡尔曼增益4. 更新状态5. 更新误差协方差 卡…

upload-labs文件上传

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

C++20 格式化库:强大的字符串格式化工具

文章目录 格式化语法常见用法1. 填充和对齐2. 数值格式化3. 进制格式化4. 自定义类型 示例代码注意事项 C20 的格式化库是一个强大的工具,用于处理字符串的格式化操作。它提供了类似于 Python 中 str.format() 的功能,但语法和用法更符合 C 的风格。以下…

[傻瓜式教学]如何将MathType公式编辑器内嵌到WPS工具栏中

[傻瓜式教学]如何将MathType公式编辑器内嵌到WPS工具栏中 将MathType公式编辑器内嵌到WPS工具栏中 下载好所需文件 我用夸克网盘分享了「mathtype安装教程超简单易上手.zip」,点击链接即可保存。打开「夸克APP」 链接:https://pan.quark.cn/s/4726c684…

分析TCP三次握手与四次挥手

TCP(传输控制协议)通过三次握手建立连接,四次挥手终止连接,确保数据传输的可靠性。 TCP的三个控制标志位: SYN——用于建立连接,同步序列号。 ACK——用于确认收到的数据。 FIN——用于终止连接。 ISN…

【深度学习】宠物品种分类Pet Breeds Classifier

文章目录 宠物品种数据集制作宠物品种标签图像预处理Presizing 损失函数loss观察模型的性能提升模型的性能learning rate finder使用CLR算法训练选择学习率的策略重新训练 迁移学习微调fine_tunefit_one_cycle有判别力的学习率 选择epoch的数量更深的网络架构 宠物品种数据集 …

【从零开始学习计算机科学】HLS算子调度

算子调度 调度是HLS 中的核心问题,为无时序或部分时序的输入指定时钟边界,其对最终结果质量具有很大的影响。调度会影响时钟频率、延时、吞吐率、面积、功耗等多种因素。 调度的输入是控制数据流图,其节点表示算子/操作,有向边表示数据依赖,控制依赖,优先依赖。如果没有…

centos 安装composer 教程

打开命令行 php -r "copy(https://getcomposer.org/installer, composer-setup.php);" sudo php composer-setup.php --install-dir/usr/local/bin --filenamecomposer composer --version sudo chmod us /usr/local/bin/composer Super18120/article/details/14388…

C语言_数据结构总结2:动态分配方式的顺序表

0——静态分配内存的顺序表和动态分配内存的顺序表的相同之处和不同之处 相同之处 基本操作逻辑相同:无论是静态分配还是动态分配的顺序表,其核心的操作逻辑是一致的。例如插入操作都需要将插入位置之后的元素依次后移,删除操作都需要将删除…

WSL安装及问题

1 概述 Windows Subsystem for Linux(简称WSL)是一个在Windows 10\11上能够运行原生Linux二进制可执行文件(ELF格式)的兼容层。它是由微软与Canonical公司合作开发,开发人员可以在 Windows 计算机上同时访问 Windows 和…

基于SpringBoot的商城管理系统(源码+部署教程)

运行环境 数据库:MySql 编译器:Intellij IDEA 前端运行环境:node.js v12.13.0 JAVA版本:JDK 1.8 主要功能 基于Springboot的商城管理系统包含管理端和用户端两个部分,主要功能有: 管理端 首页商品列…

HeidiSQL:一款免费的数据库管理工具

HeidiSQL 是一款免费的图形化数据库管理工具,支持 MySQL、MariaDB、Microsoft SQL、PostgreSQL、SQLite、Interbase 以及 Firebird,目前只能在 Windows 平台使用。 HeidiSQL 的核心功能包括: 免费且开源,所有功能都可以直接使用。…

Ae 效果详解:VR 色差

Ae菜单:效果/沉浸式视频/VR 色差 Immersive Video/VR Chromatic Aberrations VR 色差 VR Chromatic Aberrations效果用于模拟镜头色散现象,在 VR 视频中制造 RGB 通道错位的色彩偏移,以增强视觉风格或创造数字失真效果。 本效果适用于所有色深…