原型对象的简单了解

       在前面学习java有一个概念叫做继承,方便我们对父类方法、变量等的调用。对前端的学习我们需要让对象可以访问和继承其他对象的属性和方法,就需要了解原型对象,以及原型链。

一、原型

       构造函数通过原型分配的函数是所有对象所共享的。每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称为原型对象。

       因此我们可以把不变的方法,直接定义在prototype对象上,方便所有对象的实例共享这些方法,节约内存。
构造函数和原型对象中的this 都指向实例化的对象

二、原型对象

       在JavaScript中,当我们创建一个函数, 那么浏览器就会在内存中创建一个对象,而且每个函数都默认会有一个属性 prototype 指向了这个对象。这个对象就是该函数的原型对象,简称函数的原型。这个原型对象 默认会有一个属性 constructor 指向了这个函数。

示意图如下:

 代码示例:

<script>//公共的属性写到构造函数里function f(uname,age){this.uname=name;this.age=age;}//向原型里添加方法//公共的方法添加到原型对象里f.prototype.sing=function () {console.log('唱歌');}// 实例化对象const people1=new f('tim',20);const people2=new f('tom',30);people1.sing();people2.sing();console.log(people1.sing() === people2.sing())
</script>

三、对象原型 

    当我们实例化时,为什么可以共享对象原型里的方法?

       对象都会有一个属性_ _proto_ _ 指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto 原型的存在。对象原型指向原型对象。

示意图如下:

代码演示:

<script>function people(){}const p1=new people();console.log(p1.__proto__);//原型对象指向对象原型console.log(p1.__proto__===people.prototype);//示例对象里有constructor属性指向构造函数console.log(p1.__proto__.constructor===people);
</script>

四、原型链

1、什么是原型链?

       每个对象都有一个_ _proto_ _指向其原型对象,而原型对象本身也是一个对象,也具有自己的原型对象,这样就形成了一个对象与其原型对象之间的链接,构成了原型链。

2、代码示例

<script>console.log(Object.prototype)function people(){}const p1=new people();console.log(p1.__proto===people.prototype)console.log(people.prototype.__proto===Object.prototype)
</script>

3、示意图

    当我们访问对象的属性或方法时,JavaScript 引擎首先会在对象自身查找,如果找到则返回对应的值;如果在对象自身找不到,引擎会沿着原型链往上一级一级地查找,直到找到该属性或方法的定义或者到达原型链的顶端(即 Object.prototype),如果还没有找到,则返回 undefined。

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

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

相关文章

回归预测 | MATLAB实现SOM-BP自组织映射结合BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SOM-BP自组织映射结合BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SOM-BP自组织映射结合BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍…

【css动画】向下的动态箭头

前言 使用css实现一组向下的动态箭头效果&#xff0c;如下图 思路 1.使用svg画箭头 2.设置keyframes&#xff0c;主要是每个箭头加不同的延时。 代码 <div class"down-arrow"><svg id"more-arrows"><polygonclass"arrow-top&quo…

Spark第三课

1.分区规则 1.分区规则 shuffle 1.打乱顺序 2.重新组合 1.分区的规则 默认与MapReduce的规则一致,都是按照哈希值取余进行分配. 一个分区可以多个组,一个组的数据必须一个分区 2. 分组的分区导致数据倾斜怎么解决? 扩容 让分区变多修改分区规则 3.HashMap扩容为什么必须…

[JavaWeb]【七】web后端开发-MYSQL

前言&#xff1a;MySQL是一种流行的关系型数据库管理系统,它的作用是存储和管理数据。在Web开发中,MySQL是必备的数据库技能之一,因为它可以帮助Web开发人员处理大量的数据,并且提供了强大的数据查询和管理功能。 一 数据库介绍 1.1 什么是数据库 1.2 数据库产品 二 MySQL概述…

vue3 实现简单瀑布流

一、整理思路 实际场景中&#xff0c;瀑布流一般由 父组件 提供 数据列表&#xff0c;子组件渲染每个图片都是根据容器进行 绝对定位 &#xff0c;从而定好自己的位置取出 屏幕的宽度&#xff0c;设定 图片的宽度 固定 为一个值&#xff0c;计算可以铺 多少列按列数 先铺上第一…

5G科技防汛,助力守护一方平安

“立秋虽已至&#xff0c;炎夏尚还在”&#xff0c;受台风席卷以及季节性影响全国多地正面临强降水的严峻挑战。“落雨又顺秋&#xff0c;绵绵雨不休”&#xff0c;正值“七下八上” 防汛关键时期&#xff0c;贵州省水文水资源局已全面进入备战状态。 为确保及时响应做好防汛抢…

Vue3 setup新特性简单应用

去官网学习→组合式 API&#xff1a;setup() | Vue.js 运行示例&#xff1a; 代码&#xff1a;App.vue <template><div class"home"><img alt"Vue logo" src"../assets/logo.png"><!-- msg 组件传递数据 --><Hell…

VBA_MF系列技术资料1-157

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…

MySQL 面试题

一、数据库基础 1、MySQL 有哪些数据库类型? (1) 整数类型&#xff1a; TINYINT 1 字节 SMALLINT 2 字节 MEDIUMINT 3 字节 INT 4 字节 BIGINT 8 字节 ① 任何整数类型都可以加上 UNSIGNED …

【学会动态规划】最长湍流子数组(23)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…

在 IDEA 中使用 Git开发 图文教程

在 IDEA 中使用 Git开发 图文教程 一、连接远程仓库二、IDEA利用Git进行开发操作三、分支操作3.1 新建分支3.2 切换分支3.3 删除分支3.4 比较分支3.5 合并分支 四、常用快捷键 一、连接远程仓库 一、打开IDEA&#xff0c;进入目录&#xff1a;File ->New ->Project from…

opencv 矩阵运算

1.矩阵乘&#xff08;*&#xff09; Mat mat1 Mat::ones(2,3,CV_32FC1);Mat mat2 Mat::ones(3,2,CV_32FC1);Mat mat3 mat1 * mat2; //矩阵乘 结果 2.元素乘法或者除法&#xff08;mul&#xff09; Mat m Mat::ones(2, 3, CV_32FC1);m.at<float>(0, 1) 3;m.at…

浏览器控制台调试实用方法

许多程序员仅知道控制台的console.log&#xff0c;其实控制台API还包含一些其他实用方法&#xff0c; 这些方法在前端调试时会很有帮助。 目录 console.dir 查看对象属性和方法 输出DOM元素 console.error console.time和console.timeEnd console.log console.clear 总结…

(五)、深度学习框架源码编译

1、源码构建与预构建&#xff1a; 源码构建&#xff1a; 源码构建是通过获取软件的源代码&#xff0c;然后在本地编译生成可执行程序或库文件的过程。这种方法允许根据特定需求进行配置和优化&#xff0c;但可能需要较长的时间和较大的资源来编译源代码。 预构建&#xff1a; 预…

2023年05月 C/C++(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:数字放大 给定一个整数序列以及放大倍数x,将序列中每个整数放大x倍后输出。 时间限制:1000 内存限制:65536 输入 包含三行: 第一行为N,表示整数序列的长度(N ≤ 100); 第二行为N个整数(不超过整型范围),整数之间以一个空格分开; 第三行包含一个整数(不超过整…

Vue2-全局事件总线、消息的订阅与发布、TodoList的编辑功能、$nextTick、动画与过渡

&#x1f954;&#xff1a;高度自律即自由 更多Vue知识请点击——Vue.js VUE2-Day9 全局事件总线1、安装全局事件总线2、使用事件总线&#xff08;1&#xff09;接收数据&#xff08;2&#xff09;提供数据&#xff08;3&#xff09;组件销毁前最好解绑 3、TodoList中的孙传父&…

【Git】Git中用到的一些命令

Git文件有四种状态&#xff1a; 未跟踪未修改&#xff08;已跟踪&#xff09;已修改&#xff08;已跟踪&#xff09;已暂存&#xff08;已跟踪&#xff09; 通常我们将项目clone下来就会处于已跟踪状态 1、git diff命令 git diff&#xff1a;查看没有暂存的文件更新哪些部分…

Spring Clould 部署 - Docker

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; 初识Docker-什么是Docker&#xff08;P42&#xff0c;P43&#xff09; 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&…

[强网杯 2019]随便注

输入1‘ 输入1“ 和输入1 一样说明是由‘闭合 然后我们尝试输入select 这里提示过滤了select&#xff0c;说明联合查询&#xff0c;报错注入&#xff0c;布尔,时间盲注就都不可以使用了。我们只剩下了 堆叠注入。 或者将select编码绕开也可以。 按sql注入测试1 or 11 # ​然…

Unity 物体的运动之跟随鼠标

你想让鼠标点击哪里&#xff0c;你的运动的对象就运动到哪里吗&#xff1f; Please follow me ! 首先&#xff0c;你要先添加一个Plane ,以及你的围墙&#xff0c;你的移动的物体 想要实现跟随鼠标移动&#xff0c;我们先创建一个脚本 using System.Collections; using Syst…