JS中的prototype、__proto__与constructor,原型和原型链

理解原型的几个关键点:

1、所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外);

2、所有的引用类型(对象)都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象),指向原型对象;

3、所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象,该对象就是函数的原型对象,对象中包含所有实例对象可以共享的属性和方法)。’prototype’属性是函数独有的,任何函数在创建的时候,其实会默认同时创建该函数的prototype对象;

4、所有引用类型,它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性(所以  函数._ _ proto_ _ ===function.prototype);

5、当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它的’_ _ proto_ _'属性(也就是它的构造函数的’prototype’属性)中去寻找。

6、constructor属性也是对象才拥有的,指向该对象的构造函数。函数创建的对象.__proto__ === 该函数.prototype,该函数.prototype.constructor===该函数本身,故通过函数创建的对象即使自己没有constructor属性,它也能通过__proto__找到对应的constructor,所以任何对象最终都可以找到其构造函数(null如果当成对象的话,将null除外)

 

 

原型:

先来看一个原型的例子。

		//这是一个构造函数function Foo(name,age){this.name=name;this.age=age;}/*根据要点3,所有的函数都有一个prototype属性,这个属性是一个对象再根据要点1,所有的对象可以自由扩展属性于是就有了以下写法*/Foo.prototype={// prototype对象里面又有其他的属性showName:function(){console.log("I'm "+this.name);//this是什么要看执行的时候谁调用了这个函数},showAge:function(){console.log("And I'm "+this.age);//this是什么要看执行的时候谁调用了这个函数}}var fn=new Foo('小明',19)/*当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它构造函数的'prototype'属性中去找*/fn.showName(); //I'm 小明fn.showAge(); //And I'm 19

这就是原型,很好理解。那为什么要使用原型呢?

试想如果我们要通过Foo()来创建很多很多个对象,如果我们是这样子写的话:

	function Foo(name,age){this.name=name;this.age=age;this.showName=function(){console.log("I'm "+this.name);}this.showAge=function(){console.log("And I'm "+this.age);}}

那么我们创建出来的每一个对象,里面都有showName和showAge方法,这样就会占用很多的资源。
而通过原型来实现的话,只需要在构造函数里面给属性赋值,而把方法写在Foo.prototype属性(这个属性是唯一的)里面。这样每个对象都可以使用prototype属性里面的showName、showAge方法,并且节省了不少的资源。
 


 

原型链


理解了原型,那么原型链就更好理解了。

#####下面这段话可以帮助理解原型链
根据要点5,当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它构造函数的’prototype’属性中去寻找。那又因为’prototype’属性是一个对象,所以它也有一个’_ _ proto_ _'属性。

		// 构造函数function Foo(name,age){this.name=name;this.age=age;}Object.prototype.toString=function(){//this是什么要看执行的时候谁调用了这个函数。console.log("I'm "+this.name+" And I'm "+this.age);}var fn=new Foo('小明',19);fn.toString(); //I'm 小明 And I'm 19console.log(fn.toString===Foo.prototype.__proto__.toString); //trueconsole.log(fn.__proto__ ===Foo.prototype)//trueconsole.log(Foo.prototype.__proto__===Object.prototype)//trueconsole.log(Object.prototype.__proto__===null)//true

 

是不是觉得有点奇怪?我们来分析一下。

 

首先,fn的构造函数是Foo()。所以:
fn._ _ proto _ _=== Foo.prototype
又因为Foo.prototype是一个普通的对象,它的构造函数是Object,所以:
Foo.prototype._ _ proto _ _=== Object.prototype
通过上面的代码,我们知道这个toString()方法是在Object.prototype里面的,当调用这个对象的本身并不存在的方法时,它会一层一层地往上去找,一直到null为止。


所以当fn调用toString()时,JS发现fn中没有这个方法,于是它就去Foo.prototype中去找,发现还是没有这个方法,然后就去Object.prototype中去找,找到了,就调用Object.prototype中的toString()方法。

__proto__属性的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,一直找,直到__proto__属性的终点null,再往上找就相当于在null上取值,会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
 

另外,在使用原型的时候,一般推荐将需要扩展的方法写在构造函数的prototype属性中,避免写在_ _ proto _ _属性里面。
 

总结:

  • 当所有的实例对象都需要共享属性和方法时,通过原型来实现就是将属性方法放在实例对象的构造函数的prototype属性中(该属性值就是原型对象,包含共享属性和方法);
  •   访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链。
  • 根据原型链可以确定继承关系。由于所有的对象的原型链都会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。
  • 对象引用类型通过instanceof来判断。

 

 


版权声明:文章内容主要综合来自链接处,


https://blog.csdn.net/qq_36996271/article/details/82527256

https://blog.csdn.net/cc18868876837/article/details/81211729

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

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

相关文章

彻底理解cookie,session,token

转载自:https://www.cnblogs.com/moyand/p/9047978.html 发展史 1、很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新…

硬盘基本知识(磁头、磁道、扇区、柱面),格式化容量计算

计算差: 在购买硬盘之后,细心的人会发现,在操作系统当中硬盘的容量与官方标称的容量不符,都要少于标称容量,容量越大则这个差异越大。标称40GB的硬盘,在操作系统中显示只有38GB;80GB的硬盘只有7…

常用校验码(奇偶校验码、海明校验码、CRC校验码)

转载自:https://www.cnblogs.com/VersionP1/p/7779251.html ,作者: FunnyOne 常用校验码(奇偶校验码、海明校验码、CRC校验码) 一、奇偶校验码二、海明校验码三、CRC校验码 计算机系统运行时,各个部之间要进行数据交…

原码、反码、补码、移码

版权声明:本文为CSDN博主「刘水镜」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/liushuijinger/article/details/7429197 原码: 如果机器字长为n&#…

【计算机系统】指令流水线

前言 流水线是指在程序执行时多条指令重叠进行操作的一种准并行处理实现技术。各部件同时处理是针对不同指令而言的,比如说,指令流水线把一条指令分为取指、分析和执行3部分,可以同时处理取指和分析,但是不能同时处理一个部…

Gantt(甘特图)与PERT(项目计划评审技术)图,项目关键路径和松弛时间

甘特图也叫做进度管理图。 他是一种简单的水平条形图,它以日历为基准描述项目任务,水平轴表示日历时间线,每一个线条表示一个任务,任务名称垂直的列在左边列中,图中的线条的起点和终点对应水平轴上的时间,…

学习阮一峰Javascript模块化编程,requireJS使用

使用背景NOW: 网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式。 项目需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的…

阮一峰的JavaScript 的 this 原理

一、问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。 var obj {foo: function () {} };var foo obj.foo;// 写法一 obj.foo()// 写法二 foo()上面代码中,虽然obj.foo和foo指向同一个函数,…

计算机基础:IP地址,子网掩码,默认网关,DNS服务器

如图各项IP地址、子网掩码、默认网关、DNS服务器分别都代表什么意思 (一)IP地址 IP是32位二进制数据,通常以十进制表示,并以“.”分隔。IP地址是一种逻辑地地址,用来标识网络中一个个主机,IP有唯一性&#…

解决vue的{__ob__: observer}取值问题

vue编码中经常出现获取到的数据是:{__ob__: Observer} 格式的,详细如下 可能导致后续数据操作错误,如何获取其中的数值呢 解决方法如下: 将返回的数据data先转换为JSON字符串形式,然后再从字符串形式转换成JSON格式JS…

软考计算机基础:存储系统

软考计算机存储系统笔记: 存储器分类: 1、按存储位置分为内存和外存; 2、按存储材料分为磁存储(使用磁存储介质)、半导体存储(分为双极型和MOS型,根据数据是否需要刷新可以分为静态SRAM存储器…

vscode统计代码行数,前端开发配置、快捷键使用

1、统计代码行数 使用场景是项目年终统计行数。 实现:在需要统计得文件夹右键“在文件夹中查找“ ,后输入筛选得正则表达式 ^b*[^:b#/].*$ (注意右边小图标都点亮) 这里顺便将自己使用vscode进行前端开发环境配置归纳一下,便于自己以后快速…

vue-cli打包后怎么修改服务器地址实践有效

前言:公司vue项目使用 npm run build 打包生成dist文件部署后,当需要修改服务器端地址时候就又需要重新配置url并打包部署,为简化部署测试工作,想实现通过修改服务器地址的配置文件来实现修改打包后的项目服务器地址。 项目基于vu…

干净高效的搜索引擎

找一个干净好用的搜索引擎,好文转载备忘 为什么不用百度搜索引擎,估计一百个人会有一百个理由。 百度最让人诟病的还是它的竞价排名,其实要赚钱无可厚非,但这吃相……前几天看到知乎上有人发了张百度和谷歌搜索的对比图&#xf…

vue-router区分hash模式和history模式

总结: hash模式是我们在url后面添加一个#xx触发事件。尽管浏览器没有请求服务器,但是页面状态和url已经关联起来了,这就是所谓的前端路由,单页应用的标配。 history模式下浏览器地址不规整(没有#)&#x…

Vue 打包前需修改的配置,解决白屏问题

vue-cli项目和electron-vue项目打包运行都有遇到的白屏问题,下面记录打包前需要确认的配置 第一: config文件夹下的index.js 中的文件中的 assetsPublicPath :‘/’ 改为’./’ 不然的话会是空白页,记住,是build那块。…

electron-vue解决打包错误、无法调用出开发者工具(亲测有效)

错误1: unresolved node modules vue... 或 not found modules..的错误 解决方式:依赖的模块错误,删除node_module文件夹后,尽量用npm install而不是淘宝镜像cnpm安装 错误2: Cannot create symlinks (on Windows hos…

JS中使用bignumber处理高精度小数运算

项目开发中发现精度丢失的问题,如0.10.2 0.30000000000000004的问题 解决方式:引用bignumber.js用于数字精度要求较高的计算。 1、安装或引用: 下载地址:https://github.com/MikeMcl/bignumber.js/releases 或 npm install big…

restful api接口设计

技术由来: 互联网早期,页面请求和并发量不高,且移动端未盛行时对接口要求不高,使用动态页面(jsp)就能满足绝大多数的使用需求。但是随着互联网和移动设备的发展,人们对Web应用的使用需求也增加,传统的动态…

vue-cli安装和使用

主要记录安装vue-cli制定版本和使用,注意vue-cli4创建项目命令和项目结构的改变 检查当前项目的vue-cli版本: vue -V 卸载当前版本: npm uninstall vue-cli -g 安装最新版本: npm install -g vue-cli 安装指定版本: npm in…