JS—原型与原型链:2分钟掌握原型链

news2025/3/21 4:33:02

个人博客:haichenyi.com。感谢关注

一. 目录

  • 一–目录
  • 二–原型
  • 三–原型链

二. 原型

  什么是原型? 每个JavaScript对象都有一个原型,这个原型也是一个对象。比方说

function Person(name) {
  this.name = name;
}
let person = new Person("张三")
console.log(person )

原型对象
  如上图,我们创建的对象Person,除了有我们定义的属性name之后,还有一个我们没有定义的属性[[Prototype]],指向其原型对象。
  原型有什么用呢? 我们新生成的对象会继承原型对象上的属性和方法。比方说

console.log(person.toString())

toString方法
  如上图,我直接使用刚才创建的对象调用toString方法,我命名没有定义toString方法。为什么这里能打印呢?原因是:当前对象没有toString方法,但是它的原型对象上有。
  一个调用方法,先到自身上找,如果,自身上没有,就到原型对象上找,原型对象上没有,就到 原型对象 的 原型对象 上找,直到原型对象是null为止。

三. 原型链

  什么是原型链? 链是什么?链条。我们知道Object是所有对象的基类。我们看一下object的原型是什么。

const obj = {};
console.log(obj);
console.log(obj.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

Object的原型是null

  • 所有对象最终指向 Object.prototype
  • Object.prototype.proto 为 null,表示原型链终点。

说什么半天到底什么是原型链呢?别急,我再说说原型的继承

function Person(name) {
  this.name = name;
}
//在Person的原型上挂载了一个sayHello方法
Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};
//
function Student(name, grade) {
  Person.call(this, name); // 继承属性
  this.grade = grade;
}
// 继承方法,将Student的原型对象指向Person的原型对象
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student; // 修复构造函数指向
//在Student的原型对象上挂载一个sayGrade
Student.prototype.sayGrade = function() {
  console.log(`Grade: ${this.grade}`);
};
const bob = new Student('Bob', 10);
bob.sayHello(); // Hello, Bob(来自 Person.prototype)
bob.sayGrade(); // Grade: 10(来自 Student.prototype)
console.log(bob)

原型继承

//也就是这两句代码的作用
// 继承方法,将Student的原型对象指向Person的原型对象
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student; // 修复构造函数指向

  我们还在Student.prototype上挂载了一个sayGrade方法。
sayGrade图片
如上图,sayGrade方法。
我们还在Person.prototype上挂载了一个sayHello 方法
sayHello方法
如上图,sayHello方法。
原型链的验证

console.log(bob.__proto__ === Student.prototype); // true
console.log(Student.prototype.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

原型链的验证
我们上面这个例子:

  1. bob是Student的对象
  2. Student继承Person
  3. Person是Object的子类
    当bob调用一个方法时,
  • 先到自身找,也就是Student上找,找到了,就执行,就结束了。如果没有找到
  • 就到父类去查找,也就是Student的原型上去查找,也就是Person。找到了,就执行,就结束。如果还是没有找到
  • 就到父类去查找,也就是Person的原型上去查找,也就是Object上去查找。找到了,就执行,就结束了。如果还是没找到
  • 就到Object的原型上去查找,也就是Object.prototype。找到了,就执行,就结束了。如果还是没有找到,就到Object.prototype的原型上去查找
  • Object.prototype__proto__,这个时候,就会发现对象时null。整个查找就结束了,如果执行到了这里,然后报异常了。

以上整个调用方法的过程,一层一层往原型上面去查找,一直找到了Object.prototype。就像一个链条一样。这个就是原型链。

PS:整篇文章,精炼一下,如下
当访问对象的属性或方法时:

  • 查找对象自身属性。
  • 若未找到,沿 proto 向上查找原型链。
  • 直到找到属性或到达 null(抛出 undefined)。

不过,继承,现在不会这样去使用。ES6的class与extends就可以了(底层还是原型),使用起来更方便。其他语言也是用的class与extends实现继承。

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

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

相关文章

Canal 解析与 Spring Boot 整合实战

一、Canal 简介 1.1 Canal 是什么? Canal 是阿里巴巴开源的一款基于 MySQL 数据库增量日志解析(Binlog)中间件,它模拟 MySQL 的从机(Slave)行为,监听 MySQL 主机的二进制日志(Binl…

图论——Prim算法

53. 寻宝(第七期模拟笔试) 题目描述 在世界的某个区域,有一些分散的神秘岛屿,每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路,方便运输。 不同岛屿之间,路途距离不同,国王希望你可以规划建公路的方案,如何可以以最短的总公路距离将 所有岛屿联通…

1. 初识golang微服务-gRPC

单体架构 在这里插入图片描述 微服务架构 RPC架构(远程过程调用) 服务端实例代码: package mainimport ("fmt""net""net/rpc""time" )type Hello struct { }func (h Hello) SayHello(req stri…

视频翻译器免费哪个好?轻松玩转视频直播翻译

你是不是觉得看外语视频很麻烦?每次遇到喜欢的外语电影、电视剧或动漫,总是要等字幕组的翻译,或者因为语言不通而错过精彩的情节。 这个时候,掌握多语种直播翻译方案就显得尤为重要,有了实时字幕,看外语视…

Python列表1

# coding:utf-8 print("———————————— 列表 ——————————————")列表 是指一系列按照特定顺序排列的元素组成 是Python中内置的可变序列 使用[]定义列表,元素与元素之间使用英文的逗号分隔 列表中的元素可以是任意的数据类型列表的…

3.19学习总结

学习了Java中的面向对象的知识点 完成一道算法题,找树左下角的值,错误的以为左下角只能是最底层的左节点,但指的是最底层最左边的节点

服务创造未来 东隆科技携多款产品亮相慕尼黑

慕尼黑上海光博会依托于德国慕尼黑博览集团,自2006年首次举办以来,始终坚持将国内外先进的光电技术成果展示给观众,深度链接亚洲乃至全球的激光、光学、光电行业的优质企业及买家。如今已经成为了国内外专业观众信赖的亚洲激光、光学、光电行…

AI 时代,学习 Java 应如何入手?

一、Java 的现状:生态繁荣与 AI 融合的双重机遇 在 2025 年的技术版图中,Java 依然稳坐企业级开发的 “头把交椅”。根据行业统计,Java 在全球企业级应用中的市场份额仍超过 65%,尤其在微服务架构、大数据平台和物联网&#xff0…

LiteratureReading:[2016] Enriching Word Vectors with Subword Information

文章目录 一、文献简明(zero)二、快速预览(first)1、标题分析2、作者介绍3、引用数4、摘要分析(1)翻译(2)分析 5、总结分析(1)翻译(2)…

Object 转 JSONObject 并排除null和““字符串

public static JSONObject objToJSONObject(Object obj) throws Exception{//创建一个 HashMap 对象 map&#xff0c;用于存储对象的属性名和属性值。//key 是属性名&#xff08;String 类型&#xff09;&#xff0c;value 是属性值&#xff08;Object 类型&#xff09;Map<…

mysql5.7主从部署(docker-compose版本)

mysql5.7主从部署&#xff08;docker-compose版本&#xff09; 1:docker-compose-test.yml 文件信息 version: 3services:# MySQL 数据库mysql-master:image: mysql:5.7container_name: mysql-masterenvironment:MYSQL_ROOT_PASSWORD: 123456MYSQL_DATABASE: nacosports:- 23…

Java+Html实现前后端客服聊天

文章目录 核心组件网络通信层事件调度层服务编排层 Spring实现客服聊天技术方案对比WebScoket建立连接用户上线实现指定用户私聊群聊离线 SpringBootWebSocketHtmljQuery实现客服聊天1. 目录结构2. 配置类3. 实体类、service、controller4. ChatWebSocketHandler消息处理5.前端…

解锁 DeepSeek 安全接入、稳定运行新路径

背景 目前&#xff0c;和 DeepSeek 相关的需求总结为两类&#xff1a; 因官方 APP/Web 服务经常无法返回结果&#xff0c;各类云厂商、硬件或软件企业提供满血版或蒸馏版的 API 算力服务&#xff0c;还有不少基于开源家用计算和存储设备的本地部署方案&#xff0c;以分担 De…

【LangChain入门 1】安装

文章目录 一、安装LangChain二、安装Ollama三、Ollama下载DeepSeekR1-7b模型 本学习系列以Ollama推理后端作为大语言模型&#xff0c;展开对LangChain框架的入门学习。 模型采用deepseek-r1:7b。 毕竟是免费开源的&#xff0c;下载过程耐心等待即可。 如果可以连接外网&#x…

IvorySQL 增量备份与合并增量备份功能解析

1. 概述 IvorySQL v4 引入了块级增量备份和增量备份合并功能&#xff0c;旨在优化数据库备份与恢复流程。通过 pg_basebackup 工具支持增量备份&#xff0c;显著降低了存储需求和备份时间。同时&#xff0c;pg_combinebackup 工具能够将多个增量备份合并为单个完整备份&#x…

【css酷炫效果】纯CSS实现故障文字特效

【css酷炫效果】纯CSS实现故障文字特效 缘创作背景html结构css样式完整代码基础版进阶版(3D效果) 效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90492053 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚…

SpringSecurity配置(自定义认证过滤器)

文末有本篇文章的项目源码文件可供下载学习 在这个案例中,我们已经实现了自定义登录URI的操作,登录成功之后,我们再次访问后端中的API的时候要在请求头中携带token,此时的token是jwt字符串,我们需要将该jwt字符串进行解析,查看解析后的User对象是否处于登录状态.登录状态下,将…

设计模式(行为型)-备忘录模式

目录 定义 类图 角色 角色详解 &#xff08;一&#xff09;发起人角色&#xff08;Originator&#xff09;​ &#xff08;二&#xff09;备忘录角色&#xff08;Memento&#xff09;​ &#xff08;三&#xff09;备忘录管理员角色&#xff08;Caretaker&#xff09;​…

Advanced Intelligent Systems 软体机器手助力截肢者玩转鼠标

随着科技的不断进步&#xff0c;假肢技术在改善截肢者生活质量方面取得了显著成就。然而&#xff0c;截肢群体在就业方面仍面临巨大困难&#xff0c;适龄截肢群体的就业率仅为健全群体的一半。现有的肌电控制假肢手在与计算机交互时存在诸多挑战&#xff0c;特别是截肢者在使用…

每日Attention学习27——Patch-based Graph Reasoning

模块出处 [NC 25] [link] Graph-based context learning network for infrared small target detection 模块名称 Patch-based Graph Reasoning (PGR) 模块结构 模块特点 使用图结构更好的捕捉特征的全局上下文将图结构与特征切片(Patching)相结合&#xff0c;从而促进全局/…