JS中的原型与原型链

1. 基本概念

  • 原型(Prototype):每个对象都有一个内部属性 [[Prototype]],通常通过 __proto__ 访问(非标准,但广泛支持)。

  • 原型链(Prototype Chain):对象通过原型链查找属性和方法。如果对象本身没有某个属性或方法,它会沿着原型链向上查找,直到找到或到达原型链的顶端(null)。


2. 原型的作用

  • 实现继承:通过原型链,对象可以继承其原型对象的属性和方法。

  • 共享属性和方法:原型允许多个对象共享相同的属性和方法,从而节省内

 对象中的原型

每个对象都有一个内部属性 [[Prototype]],通常通过 __proto__ 访问(非标准,但广泛支持)

我们现在创建按一个User函数来理解原型原型的概念

function User(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log('我是' + this.name)
    }
}

const user1 = new User('小王', 18)
user1.sayHello() // 我是小王
const user2 = new User('小高', 20)
user1.sayHello() // 我是小高

这里面创建了一个User构造函数,每个对象里面都有一个sayHello方法,sayHello 方法是完全一样的,没必要为每个用户单独生成一个; 所以我们可以改造一下,把方法挂载到User的原型上,当然也可以增加一个性别的属性,假设他们的性别都是一样的

function User(name, age) {
    this.name = name;
    this.age = age;
}

User.prototype.sayHello = function() {
    console.log('我是', this.name + '我的性别是' + this.sex)
}
User.prototype.sex = '男'

const user1 = new User('小王', 18)
user1.sayHello() // 我是小王
const user2 = new User('小高', 20)
user1.sayHello() // 我是小高

这个就是原型用来共享数据!

什么是原型链?

重要概念:所有的对象都是通过new创建的,{} 和 [] 则是语法糖, 看下面的代码👇

var u2 = { // 对象 u2 通过 new Object 创建
  firstName: '莫',
  lastName: '妮卡'
}
// 等效于
var u2 = new Object(); 
u2.firstName = '莫';
u2.lastName = '妮卡';

上面的代码原型链如下👇

所有的对象都是通过Object创建的 ,所以当前两张图可以合并

上面的图片中从 u1->user原型->Object原型; 这就被称为原型链!

Function 中的原型链

function User(name) {
    this.name = name
}
const user1 = new User('小王')

上面的代码原型链如下

完整的图例如下👇

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何从 0 到 1 ,打造全新一代分布式数据架构

导读:本文从 DIKW(数据、信息、知识、智慧) 模型视角出发,探讨数字世界中数据的重要性问题。接着站在业务视角,讨论了在不断满足业务诉求(特别是 AI 需求)的过程中,数据系统是如何一…

Docker完整技术汇总

Docker 背景引入 在实际开发过程中有三个环境,分别是:开发环境、测试环境以及生产环境,假设开发环境中开发人员用的是jdk8,而在测试环境中测试人员用的时jdk7,这就导致程序员开发完系统后将其打成jar包发给测试人员后…

华为 AI Agent:企业内部管理的智能变革引擎(11/30)

一、华为 AI Agent 引领企业管理新潮流 在当今数字化飞速发展的时代,企业内部管理的高效性与智能化成为了决定企业竞争力的关键因素。华为,作为全球领先的科技巨头,其 AI Agent 技术在企业内部管理中的应用正掀起一场全新的变革浪潮。 AI Ag…

Idea使用阿里云创建springboot项目

文章目录 创建springboot项目选择Spring Initializr配置Server URL 创建springboot项目 选择Spring Initializr 配置Server URL https://start.aliyun.com

安全教育培训小程序系统开发制作方案

安全教育培训小程序系统是为了提高公众的安全意识,普及安全知识,通过微信小程序的方式提供安全教育培训服务,帮助用户了解并掌握必要的安全防范措施。 一、目标用户 企业员工:各岗位员工,特别是IT部门、财务、行政等对…

MySQL 数据”丢失”事件之 binlog 解析应用

事件背景 客户反馈在晚间数据跑批后,查询相关表的数据时,发现该表的部分数据在数据库中不存在 从应用跑批的日志来看,跑批未报错,且可查到日志中明确显示当时那批数据已插入到数据库中 需要帮忙分析这批数据丢失的原因。 备注:考虑信息敏感性,以下分析场景测试环境模拟,相关数据…

2024年11月HarmonyOS应用开发者高级认证 最新题库

新增单选 1.下述代码片段中的renderGroup属性,对性能的影响是什么:A A.劣化 B.不一定 C.没有变化 D.优化 2.在刷新Image组件内容时,如果观察到画面会闪一下白块,要怎样优化才能避免白块儿出现,同时又不会卡住画面…

《Opencv》基础操作详解(1)

目录 一、Opencv简介 OpenCV 的主要特点 二、Opencv库安装 1、opencv-python库安装 2、opencv-contrib-python库安装 三、Opencv 基础操作 1、opencv库的导入 2、读取、展示图片 3、查看图片信息 4、控制图片显示时间、关闭窗口 5、读取灰度图 6、彩色图片转灰度图 …

springboot3版本结合knife4j生成接口文档

1.概述 knife4j官网为:介绍 | Knife4j (xiaominfo.com)https://doc.xiaominfo.com/docs/introduction 初步了解的码友可以初步了解一下官网的如下几个模块: 其中在快速开始模块中,不同的springboot版本都有一个使用的案例demo如下图位置&am…

Android笔记(四十一):TabLayout内的tab不滚动问题

背景 假设二级页面是上面图片的布局,当进来时TabLayout和ViewPager2绑定完就马上调setCustomItem,跳转到最后一个tab页面时,会发现tab不滚动,手动滑一下ViewPager2时才会滚动tab到正确的位置 原因分析 调用TabLayoutMediator.at…

Oracle中间件 SOA之 OSB 12C服务器环境搭建

环境信息 服务器基本信息 如下表,本次安装总共使用1台服务器,具体信息如下: App1服务器 归类 APP服务器 Ip Address 172.xx.30.xx HostName appdev01. xxxxx.com Alias appdev01 OSB1服务器 归类 OSB服务器 Ip Address 172.xx3…

【HENU】河南大学计院2024 计算机网络 期末复习知识点

和光同尘_我的个人主页 一直游到海水变蓝。 计网复习 第一章互联网组成类别交换方式分组交换的要点:分组交换的优点: 网络性能指标体系结构网络协议五层协议 第二章:物理层物理层的主要任务(四大特性)通信的三种方式…

深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223

深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道 在现代后端开发中,表单验证是保证数据完整性和服务稳定性的核心环节。如何优雅、高效地实现表单验证,同时提供人性化的错误提示,是每位开发者的必修课。在本文中…

【VScode】第三方GPT编程工具-CodeMoss安装教程

一、CodeMoss是什么? CodeMoss是一款集编程、学习和办公于一体的高效工具。它兼容多种主流平台,包括VSCode、IDER、Chrome插件、Web和APP等,支持插件安装,尤其在VSCode和IDER上的表现尤为出色。无论你是编程新手还是资深开发者&a…

低代码开源项目Joget的研究——Joget7社区版安装部署

大纲 环境准备安装必要软件配置Java配置JAVA_HOME配置Java软链安装三方库 获取源码配置MySql数据库创建用户创建数据库导入初始数据 配置数据库连接配置sessionFactory编译下载tomcat启动下载aspectjweaver移动jw.war文件编写脚本运行 测试参考资料 Joget,作为一款开…

Pytorch | 利用SMI-FGRM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用I-FGSSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集SMI-FGRM介绍SMI-FGRM算法流程 SMI-FGRM代码实现SMI-FGRM算法实现攻击效果 代码汇总smifgrm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器: Pytorch | 从零构建AlexNet对CI…

01大模型微调教程汇总

deepspeed教程参考:Getting Started - DeepSpeed chatglm3-6b 微调的教程:ChatGLM3/finetune_demo/README.md at main THUDM/ChatGLM3 GitHub 开源的测试数据集:https://zhuanlan.zhihu.com/p/634873585 一些教程 a. docker从入门到实践…

c++---------流类

格式化输入(cin的格式化) 基本用法与控制符 在C中,std::cin用于从标准输入(通常是键盘)读取数据。它默认以空白字符(空格、制表符、换行符)为分隔符来读取不同的数据。例如,读取两个…

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点 结论及未来工作-Conclusions and future work研究总结未来研究方…

MySQL 锁概述

1.锁的分类 根据不同的分类角度可将锁分为: 按是否共享分:S 锁、X 锁按粒度分:表级锁、行级锁、全局锁(锁整个库)、页锁(锁数据页)意向锁:意向 S 锁、意向 X 锁:都是表…