原型有一个非常重要的属性叫 prototype

一、先写一个简单的例子,看看 A的原型和A的实例 分别是什么

function A() {}
var a = new A()
console.log(a,'实例')
console.log(A.prototype,'原型对象')

控制台输出后发现,两个都是对象

区别   1.实例对象里面有一个灰色的 <prototype>(隐式原型,可通过__proto__拿到)

     2.原型对象里面多一个constructor属性,这个属性指向我们的构造器 function A()。   也就是 A.prototype.constructor = A

constructor的定义constructor 属性返回对创建此对象的数组函数的引用。

简单来说:数组实例的 constructor 等于 Array

     对象实例的 constructor 等于Object

      构造函数A的 constructor  等于 Function

由上面的 A.prototype.constructor = Aconstructor 的定义,我们可以推论出

A.prototype 是 A的一个实例

但是 A.prototype.__proto__ === Obeject.__proto__

二、再看看 实例的__proto__是什么,它和实例、原型对象的关系

function A() {}
var a = new A() console.log(a,'实例')
console.log(a.__proto__,'实例__proto__')
console.log(A.prototype,'原型对象')

结果

我们可以发现

1.a实例的 <prototype>果然用 a.__proto__拿的到

2.a.__proto__等于A.prototype

由此,我们能得出结论  实例的隐式原型等于 构造函数的 显式原型

a.__proto__ ===  A.prototype

三、原型链

仔细的同学会发现,a实例没有 constructor属性,那 a.constructor === A 吗?

当然是等于的

a没有constructor,它就会顺着原型 往上面找,于是找到 a.__proto__

a.__proto__(也就是 A.prototype)是有 constructor的

所以结论是

a.__proto__.constructor === A

A.prototype.constructor === A

js原型与原型链探究的更多相关文章

  1. Js 原型和原型链

    Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...

  2. 【repost】JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  3. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  4. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  5. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  6. JS原型和原型链

        1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...

  7. 深入JS原型与原型链

    要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...

  8. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  9. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  10. JS 原型与原型链

    图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...

随机推荐

  1. 升级AndroidStudio3.4问题汇总

    1.Could not get unknown property 'bootClasspath' for object of type org.gradle.api.tasks.compile.Com ...

  2. Vue-router(基础)_滚动行为和history模式

    一.前言 1.滚动事件 2.h5 history模式 二.主要内容 1.   (1)使用前度路由,当切换到新路由时,想要页面滚动到顶部,或者是保持原先滚动的位置,就像重新加载页面那样.vue-rout ...

  3. 转载:Linux命令之查看文件占用空间大小-du,df

    转载自:<du命令>-linux命令五分钟系列之三 du(disk usage),顾名思义,查看目录/文件占用空间大小 #查看当前目录下的所有目录以及子目录的大小$ du -h $ du ...

  4. I2C(四)linux3.4(写代码)

    title: I2C(四)linux3.4(写代码) date: 2019/1/29 17:18:42 toc: true --- I2C(四)linux3.4(写代码) 老师的参考代码 https: ...

  5. 1.6分布式通讯协议-WebService

    RPC 包含的要素(webservice) 协议层:tcp/ip 应用层: http协议 SOAP: http+xml 分布式通信框架-webservice分析 什么是webservice webse ...

  6. Win10+Ubuntu18.04双系统安装

    Win10+Ubuntu18.04 亲测UEFI启动模式双硬盘+双系统成功安装经验 https://blog.csdn.net/xrinosvip/article/details/80428133 分 ...

  7. react-intl

    internationalization standard https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glob ...

  8. 13、Ajax的使用

    一.AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. a).AJAX = 异步 JavaScript 和 XML. b).AJAX 是一种用于创建快速动态网页的技术. 通过在后 ...

  9. python 识别图片文字

    今天群里有兄弟问如何把图片的文字给识别出来 对于python来说这不是小菜一碟吗,于是乎让pupilheart狠狠的吹了一波(哈哈,竟然没懂),下面将整个实现过程给大家实现下: 方法一:自己搞定ORC ...

  10. 在OS X 10.9配置WebDAV服务器联合NSURLSessionUploadTask实现文件上传

    iOS7推出的NSURLSession简化了NSURLConnection的文件上传和下载的工作,本文记录如何配置WebDAV服务以支持PUT方式的文件上传. 一. 配置WebDAV服务器 1. 修改 ...