JS基础之原型原型链

JS基础之原型&原型链

  • 原型&原型链
    • 构造函数创建对象
    • prototype
    • proto
    • constructor
    • 实例与原型
    • 原型的原型
    • 原型链
    • 其他
      • constructor
      • proto
      • 继承

原型&原型链

构造函数创建对象

我们先使用构造函数创建一个对象:

function Person(){
}
var person = new Person();
person.name = 'trigger';
console.log(person.name);//trigger

在这个例子中,Person就是一个构造函数,我们使用new创建了一个实例对象person。

prototype

每个函数都有一个prototype属性,比如:

function Person(){}
//虽然写在注释里,但是你要注意:
//prototype是函数才会有的属性
Person.prototype.name = 'pig';
var person1 = new Person();
var person2 = new Person();console.log(person1.name);//pig
console.log(person2.name);//pig

那这个函数的prototype属性到底指向的是什么呢?是这个函数的原型吗?
其实,函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而穿件的实例的原型,也就是这个例子中的person1person2的原型。
那什么是原型呢?你可以这样理解:
每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型“继承”属性。
用一张图表示构造函数和实例原型之间的关系:

在这里插入图片描述这里用Person.prototype表示实例原型。
那么该怎么表示实例与实例原型,也就是personPerson.prototype之间的关系呢?

proto

这是每一个JavaScript对象(除了null)都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

function Person(){}
var person = new Person();
console.log(person.__proto__ === Person.prototype);//true

在这里插入图片描述

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数是有的:constuctor,每个原型都有一个constructor属性指向关联的构造函数。

function Person(){}
console.log(Person === Person.prototype.constructor);//true

在这里插入图片描述所以,这里可以得到:

function Person(){}
var person = new Person();
console.log(person.__proto__ == Person.prototype);//true
console.log(Person.prototype.constructor == Person);//true
console.log(Object.getPrototypeOf(person) === Person.prototype);// true

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。
举个例子:

function Person(){
}
Person.prototype.name = 'cat';
var person = new Person();
person.name = 'dog';
console.log(person.name);//dog
delete person.name;
console.log(person.name);//cat

在这个例子中,我们给实例对象person添加了name属性,当我们打印person.name的时候,结果自然为dog
但是当我们删除person中的name属性时,读取person.name,从person对象中找不到name属性就会从person的原型,也就是person.__proto__,也就是Person.prototype中查找,结果为cat

原型的原型

如果在原型撒花姑娘还没有找到呢?原型的原型又是什么呢?

var obj = new Object();
obj.name = 'rabbit';
console.log(obj.name);//rabbit

其实原型对象就是通过Object构造函数生成的,结合之前所说,实例的__proto__指向构造函数的prototype,所以我们再更新下关系图:
在这里插入图片描述

原型链

Object.prototype的原型呢?
null,我们可以打印:

console.log(Object.prototype.__proto__ === null);//true

然而null究竟代表了什么呢?
null表示“没有对象”,即该处不应该有值。
所以Object.prototype.__proto__的值为null跟Object.prototype没有原型,其实表达了一个意思。
所以查找属性的时候查到Object.prototype就可以停止查找了。
最后一张关系图也可以更新为:
在这里插入图片描述其中,蓝色为原型链。

其他

constructor

首先是constructor属性:

function Person(){
}
var person = new Person();
console.log(person.constructor === Person);//true

当获取person.constructor时,其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型也就是Person.prototype中读取,正好原型中有该属性,所以:

person.constructor === Person.prototype.constructor

proto

绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在与Person.prototype中,实际上,他是来自于Object.prototype,与其说是一个属性,不如说是一个getter/setter,当使用obj.__proto__时,可以理解成返回了Object.getPrototypeOf(obj)

继承

关于继承,前面提到“每一个对象都会从原型‘继承’属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:

继承意味着复制操作,然而JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

好啦~枯燥的知识就到这里啦!
欣赏一下美女壁纸,放松一下心情吧~ 嘻嘻 ~

在这里插入图片描述在这里插入图片描述在这里插入图片描述

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

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

相关文章

多窗口文件管理工具Q-Dir安装以及使用教程

软件介绍 Q-Dir 是一款功能强大的Windows资源管理器,可以非常方便的管理你的各种文件。Q-Dir有4 个窗口,特别适用于频繁在各个目录间跳跃复制粘贴的情况,每个窗口都可以方便的切换目录,以不同颜色区分不同类型的文件,…

(企业项目)微服务项目解决跨域问题:

前后端分离项目中前端出现了跨域的问题 在网关模块配置文件中添加 配置 application.properties # 允许请求来源(老版本叫allowedOrigin) spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedOriginPatterns* # 允许携带的头信息 spri…

idea__SpringBoot微服务06——静态资源(新依赖),首页和图标定制

静态资源 一、静态资源二、首页和图标定制————————创作不易&#xff0c;如觉不错&#xff0c;随手点赞&#xff0c;关注&#xff0c;收藏(*&#xffe3;︶&#xffe3;)&#xff0c;谢谢~~ 新依赖&#xff1a;jquery的 <dependency><groupId>org.webjars&…

说说设计体系、风格指南和模式库

目录 一、定义 二、设计体系 2.1 Design system 2.2 风格指南 2.3 Component 三、样式库 一、定义 设计体系&#xff08;Design system&#xff09;&#xff1a;可共享的设计语言的基础合集&#xff0c;包含了设计价值&#xff0c;语义&#xff0c;语法和上下文。 风格…

matplotlib 默认属性和绘图风格

matplotlib 默认属性 一、绘图风格1. 绘制叠加折线图2. Solarize_Light23. _classic_test_patch4. _mpl-gallery5. _mpl-gallery-nogrid6. bmh7. classic8. fivethirtyeight9. ggplot10. grayscale11. seaborn12. seaborn-bright13. seaborn-colorblind14. seaborn-dark15. sea…

Chart 7 内存优化

文章目录 前言7.1 Adreno GPU OpenCL内存7.1.1 内存声明周期7.1.2 Loacl Memory7.1.3 Constant memory(常量内存)7.1.4 Private Memory7.1.5 Global Memory7.1.5.1 Buffer Object7.1.5.2 Image Object7.1.5.3 Image object vs. buffer object7.1.5.4 Use of both Image and buf…

C语言数据结构-双向链表

文章目录 1 双向链表的结构2 双向链表的实现2.1 定义双向链表的数据结构2.2 打印链表2.3 初始化链表2.4 销毁链表2.5 尾插,头插2.6 尾删,头删2.7 根据头次出现数据找下标2.8 定点前插入2.9 删除pos位置2.10 定点后插入 3 完整代码3.1 List.h3.2 Lish.c3.3 test.c 1 双向链表的结…

ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?

在Ajax中&#xff0c;GET和POST是两种常见的HTTP请求方法。它们有以下区别&#xff1a; GET请求&#xff1a;使用GET请求时&#xff0c;参数数据会附加在URL的末尾&#xff0c;以查询字符串的形式发送给服务器。GET请求是幂等的&#xff0c;也就是说多次发送相同的GET请求&…

键盘打字盲打练习系列之矫正坐姿——4

一.欢迎来到我的酒馆 盲打&#xff0c;矫正坐姿&#xff01; 目录 一.欢迎来到我的酒馆二.继续练习二.矫正坐姿1.键鼠快速选购指南2.椅子快速选购指南 三.改善坐姿建议 二.继续练习 前面的章节&#xff0c;我们重点向大家介绍了主键盘区指法和键盘键位。经过一个系列的教程学习…

Mybatis环境搭建

1、开发环境 IDE&#xff1a;IntelliJ IDEA 2022.2.1 (Ultimate Edition) 构建工具&#xff1a;maven 3.6.1 MySQL版本&#xff1a;MySQL 5.7 MyBatis版本&#xff1a;MyBatis 3.5.14 2、工程创建 创建一个Maven工程giser-java-mybatis-demo 基础依赖如下&#xff1a; &…

【Python】pip命令及使用

PIP命令 下面是一个整理成表格的pip命令及使用的示例&#xff1a; 命令使用示例说明pip install <package>pip install requests安装名为"requests"的包pip uninstall <package>pip uninstall requests卸载名为"requests"的包pip listpip li…

用友U8 Cloud 多处反序列化RCE漏洞复现

0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP,主要聚焦成长型、创新型企业,提供企业级云ERP整体解决方案。 0x02 漏洞概述 用友U8 Cloud存在多处(TableInputOperServlet、LoginServlet 、FileTransportServlet、CacheInvokeServlet、ActionHandlerServlet、Servle…

12.9每日一题(备战蓝桥杯循环结构)

12.9每日一题&#xff08;备战蓝桥杯循环结构&#xff09; 题目 2165: 求平均年龄题目描述输入输出样例输入样例输出来源/分类 题解 2165: 求平均年龄题目 2166: 均值题目描述输入输出样例输入样例输出来源/分类 题解 2166: 均值题目 2167: 求整数的和与均值题目描述输入输出样…

GB/T 43212-2023 竹炭板检测

竹炭塑复合板是指以竹炭粉为主要原料&#xff0c;与塑料及其他助剂复配混合&#xff0c;经熔融挤出或模压成型等工艺制成的板材。 GB/T 43212-2023 竹炭板测试&#xff1a; 测试项目 测试方法 外观 GB/T 43212 尺寸 GB/T 19367 含水率 GB/T 17657 密度 GB/T 17657 吸…

【rabbitMQ】springboot整合rabbitMQ模拟简单收发消息

目录 1.创建项目和模块 2.添加rabbitMQ依赖 3.启动rabbitMQ服务 4.引入rabbitMQ服务端信息 5.通过单元测试模拟业务发送消息 6. 接收消息 1.创建项目和模块 2.添加rabbitMQ依赖 <!-- rabbitmq依赖--> <dependency> <groupId>org.sp…

JavaEE 09 锁策略

1.锁策略 1.1 乐观锁与悲观锁 其实前三个锁是同一种锁,只是站在不同的角度上去进行描述,此处的乐观与悲观其实是指在预测的角度上看会发生锁竞争的概率大小,概率大的则是悲观锁,概率小的则是乐观锁 乐观锁在加锁的时候就会做较少的事情,加锁的速度较快,但是消耗的cpu资源等也会…

排序算法-选择/堆排序(C语言)

1基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的 数据元素排完 。 2 直接选择排序: 在元素集合 array[i]--array[n-1] 中选择关键码最大 ( 小 ) 的数据元素…

PHP基础 - 数组遍历与排序

介绍 在PHP中,数组遍历和排序是常见的操作,用于对数组中的元素进行访问和排序 数组遍历 1)数值数组的遍历 使用 foreach 循环遍历数组:foreach 循环是最常用的遍历数组的方法,它可以遍历索引数组和关联数组。例如:$fruits = array("apple", "banana&q…

AG1KLPQ48 User Manual

1.&#xff09;软件安装&#xff1a; 解压缩或执行安装文件&#xff0c;安装 Supra 软件。执行文件为 bin 目录中的 Supra.exe。 运行 Supra&#xff0c;选择菜单 File -> Import license&#xff0c;选择 license 文件并导入 License。 2.&#xff09;新建项目&#xff1a;…

Python与CAD系列高级篇(二十一)批量将横向文本改竖向

0 简述 本篇介绍以下功能开发:一次性选择所有横向文本并批量修改为竖向。 1 需求 需求: ① 用户在cad中交互式选择所有需要修改方向的文本。 ② 将所有文本方向由横向改为竖向。 2 代码实现 代码实现: import win32com.client as win32 import pythoncomdef vtpnt(x, y, …