构造函数、原型和实例的关系

news2024/12/25 22:28:00

构造函数、原型和实例的关系:

每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

实现原型链涉及如下代码模式:

function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function () {
    return this.property;
};
function SubType() {
    this.subproperty = false;
}
// 继承 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subproperty;
};
let instance = new SubType();
console.log(instance.getSuperValue()); // true
以上代码定义了两个类型: SuperType SubType
这两个类型分别定义了一个属性和一个方法。
这两个类型的主要区别是 SubType 通过创建 SuperType 的实例并将其赋值给自己的原型 SubTtype.prototype 实现了对 SuperType 的继承。这个赋值重写了 SubType 最初的原型,将其替换为SuperType 的实例。这意味着 SuperType 实例可以访问的所有属性和方法也会存在于SubType.prototype 。这样实现继承之后,代码紧接着又给 SubType.prototype ,也就是这个 SuperType 的实例添加了一个新方法。最后又创建了 SubType 的实例并调用了它继承的getSuperValue()方法。
下图展示了子类的实例与两个构造函数及其对应的原型之间的关系。

 

 

        这个例子中实现继承的关键,是 SubType 没有使用默认原型,而是将其替换成了一个新的对象。这个新的对象恰好是 SuperType 的实例。这样一来,SubType 的实例不仅能从 SuperType 的实例中继承属性和方法,而且还与 SuperType 的原型挂上了钩。于是 instance(通过内部的[[Prototype]])指向SubType.prototype,而 SubType.prototype(作为 SuperType 的实例又通过内部的[[Prototype]])指向 SuperType.prototype。注意,getSuperValue()方法还在 SuperType.prototype 对象上,而 property 属性则在 SubType.prototype 上。这是因为 getSuperValue()是一个原型方法,而property 是一个实例属性。SubType.prototype 现在是 SuperType 的一个实例,因此 property才会存储在它上面。还要注意,由于 SubType.prototype 的 constructor 属性被重写为指向SuperType,所以 instance.constructor 也指向 SuperType。

        原型链扩展了前面描述的原型搜索机制。我们知道,在读取实例上的属性时,首先会在实例上搜索这个属性。如果没找到,则会继承搜索实例的原型。在通过原型链实现继承之后,搜索就可以继承向上,搜索原型的原型。对前面的例子而言,调用 instance.getSuperValue()经过了 3 步搜索:instance、SubType.prototype 和 SuperType.prototype,最后一步才找到这个方法。对属性和方法的搜索会一直持续到原型链的末端。

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

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

相关文章

[附源码]计算机毕业设计Python第三方游戏零售平台(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

Unity实战篇 |Unity 打包exe 实现隐藏窗口标题栏、隐藏最小化最大化关闭按钮

🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作 &…

【疾病分类】模糊逻辑分类叶病严重程度分级系统【含GUI Matlab源码 194期】

⛄一、模糊逻辑(Fuzzy Logic)简介 理论知识参考:模糊逻辑(Fuzzy Logic) ⛄二、部分源代码 function varargout LeafDiseaseGradingSystemGUI(varargin) % LeafDiseaseGradingSystemGUI MATLAB code for LeafDiseaseGradingSystemGUI.fig % LeafDiseaseGradingSy…

云原生 | go-micro@v4.9.0源码解析(建议收藏)

go-microv4.9.0源码阅读一、前言二、创建微服务三、源码阅读操作一:注册服务处理操作二:组件配置操作三:启动微服务Step 1 :启动微服务Step 2 :开启服务关闭监听Step 3 :停⽌Server组件Step 4 :…

毕业设计 基于java web的网上零食销售系统的设计与实现

文章目录前言一、项目设计1. 模块设计功能分析前台功能后台功能2. 实现效果二、部分源码项目源码前言 今天学长向大家分享一个 web项目: 基于java web的网上零食销售系统的设计与实现 一、项目设计 1. 模块设计 功能分析 经过对时下大型电商网站的调查,对该系统…

计算机毕业设计 SSM与Vue的垃圾分类系统(源码+论文)

文章目录1 项目简介2 实现效果2.1 界面展示3 设计方案3.1 概述3.2 系统流程3.2.1 系统开发流程3.2.2 登录流程3.3 系统结构设计4 最后1 项目简介 Hi,各位同学好呀,这里是M学姐! 今天向大家分享一个今年(2022)最新完成的毕业设计项目作品&am…

学人工智能好找工作吗 ?Python就业前景怎么样?

学人工智能好找工作吗?Python就业前景怎么样?人工智能前景很好,中国正在产业升级,工业机器人和人工智能方面都会是热点,而且正好是学习的好时机。但是,也有一个问题大家要注意: 学习的难度比较高…

[附源码]Python计算机毕业设计Django智能衣橱APP

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

数据类型相关笔记

C、C、java强调类型&#xff1b; JavaScript、python、php不看重类型&#xff0c;甚至不需要事先定义。 类型 ○ 整数 ○ 浮点数 ○ 逻辑 ○ 指针 ○ 自定义类型 sizeof 查看所占字节 给出某个类型或变量在内存中所占据的字节数 # include <stdio.h>int main(void) …

怎么把avi转成mp4格式?

怎么把avi转成mp4格式&#xff1f;这是最近大家问的比较频繁的一个问题&#xff0c;avi是一种音频视频的交错格式&#xff0c;可以极大的压缩视频文件本身所占用的内存空间&#xff0c;但是同时引起的负面缺点是使视频画质受损&#xff0c;所以大家在遇到avi格式视频时。可以转…

编程明明是程序员的工作,关学生什么事?

写在前面&#xff1a; 我手里这个魔方&#xff0c;任何一个人都可以轻松地把它打乱&#xff0c;但要想把它复原&#xff0c;就不是每个人都能做到的了。我会还原魔方&#xff0c;而你不会&#xff0c;这能不能说明我比你聪明呢&#xff1f;并不能。 还原一个三阶魔方是有特定的…

12基于储能电站服务的冷热电多微网系统双层优化配置(matlab程序)

参考文献 基于储能电站服务的冷热电多微网系统双层优化配置——吴盛军&#xff08;2020电网技术&#xff09; 主要内容 分析共享储能电站的运行方式和盈利机制。将储能电站服务应用到冷热电联供型多微网系统中&#xff0c;建立考虑两个不同时间尺度问题的双层规划模型&#…

pyTorch入门(四)——导出Minist模型,C++ OpenCV DNN进行识别

学更好的别人&#xff0c;做更好的自己。——《微卡智享》本文长度为2548字&#xff0c;预计阅读8分钟前言前三章介绍了pyTorch训练的相关&#xff0c;我们也保存模型成功了&#xff0c;今天这篇就是使用C OpenCV的DNN模块进行手写图片的推理。实现效果导出的推理模型使用的是M…

基于JSP数码产品交易

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a; 网站前台&#xff1a;网站介绍、帮助信息、数码资讯、数码产品、讨论信息 管理员功能&#xff1a; 1、管理网站介绍、帮…

运维基础【黑马系列笔记整理分享(上)】

运维基础【黑马系列笔记整理分享(上&#xff09;】 因为笔记所记内容太多&#xff0c;所以我分成了上下两部分来分享给大家查看学习&#xff01;同时我会持续更新博客发布更加优质的文章&#xff0c;希望大家多多支持与关注&#xff01;感谢&#xff01; 一、运维概述 1、运维…

基于PHP+Mysql全品类在线购物商城设计

开发软件&#xff1a;VsCode/Dreamweaver等都行&#xff0c;mysql数据库&#xff0c;apache服务器 开发技术&#xff1a;PHP MVC模式&#xff0c;DIVCSS,Jquery等 这是一个全品类购物商城&#xff0c;可以销售所有品类的商品&#xff0c;包括前端用户和后端管理员2个身份&…

[ 妙用css ]:用css变量解决开发实际问题

各位看官&#xff0c;如何实现以上这种方块的移动&#xff0c;相信对于大家来说并不陌生&#xff0c;无非是几个步骤 1.设置动画 2.进行移动 3.动画循环 <div class"f-box"><div class"box"></div> </div> <style> .f-box…

Springboot工厂制造业WMS仓库管理系统源码为工厂仓库提供高效率管理带小程序和调试视频完全开源 可以二开

系统全开源&#xff0c;无任何加密&#xff0c;适合学习和二次开发 1. 开发语言&#xff1a;JAVA 2. 数据库&#xff1a;MySQL 3. 后端框架&#xff1a;springboot 4. 前端框架&#xff1a;VUE 5. 带小程序端 6. 带调试视频 7. 带部署文档 项目运行环境&#xff1a;JDK1…

使用Echarts完成对中国地图的绘制

目录前言1.什么是Echarts插件2.如何在vue中使用Echarts3.中国地图的具体样式4.如何使用Echarts来完成中国地图的绘制5.总结前言 我们在使用代码绘画地图的时候通常使用的是canvas&#xff0c;但是canvas是H5新增的东西&#xff0c;用起来不免有些麻烦&#xff0c;代码多&#…

聊一聊MySQL的记录锁、间隙锁与 Next-Key Lock

有小伙伴在微信上表示面试时被问到了 Next-Key Lock 是啥&#xff0c;结果一脸懵逼&#xff0c;那么今天我们来捋一捋 MySQL 中的记录锁、间隙锁以及 Next-Key Lock。 1. Record Lock Record Lock 也就是我们所说的记录锁&#xff0c;记录锁是对索引记录的锁&#xff0c;注意…