原型对象的简单了解

       在前面学习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,一经查实,立即删除!

相关文章

【Lua语法】算术、条件、逻辑、位、三目运算符

1.算术运算符 加减乘除取余&#xff1a; - * / % Lua中独有的&#xff1a;幂运算 ^ 注意&#xff1a; 1.Lua中没有自增自减(、–)&#xff0c;也没有复合运算符(、-) 2.Lua中字符串可以进行算术运算符操作&#xff0c;会自动转成number 如&#xff1a;“10.3” 1 结果为11.3…

回归预测 | 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概述…

Servlet+JDBC实战开发书店项目讲解第六篇:订单实现

ServletJDBC实战开发书店项目讲解第六篇&#xff1a;订单实现 1. 数据库设计 在订单实现之前&#xff0c;我们需要对数据库进行相应的设计。在这个书店项目中&#xff0c;我们可以创建以下两个表来实现订单功能&#xff1a; 1.1 订单表(Order) 订单ID(order_id)&#xff1a…

vue3 实现简单瀑布流

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

使用Julia进行核递归最小二乘算法(KRLS)的解析与实现

F 标题&#xff1a; 使用Julia进行核递归最小二乘算法&#xff08;KRLS&#xff09;的深度解析与实现 第一部分&#xff1a; 核递归最小二乘算法 (KRLS) 是一个在线核回归算法&#xff0c;这种算法的主要特点是能够一次处理一个样本&#xff0c;并构建一个训练点字典&#xf…

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; 跟我…

vue+elementui 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容

一、场景 表单内的输入框一般为固定宽度&#xff0c;当输入框内容长度超出输入框宽度时&#xff0c;需要显示省略号&#xff0c;并设置鼠标移到输入框上时悬浮展示全部内容。 <el-tooltipplacement"top-start"effect"light":content"basicData[Or…

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

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

Skywalking全链路追踪【学习笔记】

Skywalking全链路追踪的服务搭建&#xff0c;使用docker进行安装。 搭建服务 搭建【ES】 # 拉取 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.17.10 # 启动 docker run -p 127.0.0.1:9200:9200 -p 127.0.0.1:9300:9300 -e "discovery.typesingle-nod…

什么是 SPI,和API有什么区别?

面试回答 Java 中区分 API 和 SPI&#xff0c;通俗的讲&#xff1a;API 和 SPI 都是相对的概念&#xff0c;他们的差别只在语义上&#xff0c;API 直接被应用开发人员使用&#xff0c;SPI 被框架扩展人员使用。 API Application Programming Interface 大多数情况下&#xff…

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 总结…

set NOCOUNT on

SET NOCOUNT ON 是一条 SQL 语句&#xff0c;用于禁止在执行查询时返回受影响的行数消息。通常&#xff0c;当执行 INSERT、UPDATE、DELETE 等操作时&#xff0c;数据库会返回一个消息&#xff0c;表示受影响的行数。但在某些情况下&#xff0c;你可能希望禁用这些消息&#xf…