javaScript中原型和原型链的分析深究

建议阅读的时候配合第二幅图来阅读,可能会更清晰

1.原型与原型链的概念

原型: [prototype属性表示类与类之间的父子关系] 原型事实上是每个 函数或类 都拥有的一个 prototype 属性,这个属性事实上是一个指针,指向一个原型对象(原型对象是object,因为是对象,所有拥有__proto__属性),这个原型对象让我来说就是类或函数自己拥有的一种性质一样,但是这个性质可能包含父类的性质(父类的prototype属性所指向的空间)。prototype属性,表示了类与类之间的父子关系,子类可以拥有父类的性质,
原型链: [__proto__属性表示是某类的对象] 原型链是每个对象实例都拥有的一个__proto__ 属性,__proto__作为内部属性,在浏览器显示为灰色的prototype,__proto__属性同样也是一个指针,指向从属类或函数的原型对象,对象的__proto__属性和它从属类的prototype属性指向同一空间。

我自身认为,不管一个类,函数或一个对象想要拥有别人的性质,有两条路可以走,一是拥有prototype属性,表示了类与类之间的父子关系,子类可以拥有父类的性质。二是拥有__proto__属性,表示了是某个类的对象,拥有从属类的性质,如果对象想访问从属类的某些性质,就可以通过__proto__进行访问。如果没有必要访问也可以不访问。

为了验证接下来我所说的一系列的原型和原型链以及function,Function,object,Object,之间的关系.

先给出一个名字为point的function函数。

function point(row, col) {this.setRow = function(row) {this.row = row ? row : 1;}this.setCol = function(col) {this.col = col ? col : 1;} this.getRow = function() {return this.row;}this.getCol = function() {return this.col;}this.setRow(row);this.setCol(col);
}var point1 = new point(2, 1);
var Function1 = new Function();
var Object1 = new Object();

function Function object Object 拥有的属性

  1. function : prototype属性 _ proto _属性
  2. Function: prototype属性 _ proto _属性
  3. object: _ proto _属性
  4. Object: prototype属性 _ proto _属性

知道了function Function Object 拥有的属性之后,我可以更好的解释原型和原型链了。
point1 是上边代码给出的通过new point得到的一个对象,只有__proto__属性。
point 是一个实实在在的function函数。point拥有 prototype属性 和__proto__属性

这个图解释原型和原型链

这个图虽然解释了开始说的原型和原型链的关系,但同时又有新的问题产生。
1.object的原型链指向谁??,
2.function的原型链指向谁??
4.Functiont和Object的关系是什么?
5.谁是整个链的终结者?

那么经过小查同学的不懈努力,终于有了结果。
根据上图我们来做问题的一一解答
1.因为point1是个对象,并且point1是通过new point产生的,point本身是个function函数,这同时也说明了function是个类,通过new function可以产生一个对象,因为上面我说过prototype属性所指向的空间相当于自己拥有的性质,并且function的prototype属性指向的原型是一个对象,为什么说function的prototype指向的是一个object对象呢,原因是对象只有__proto__属性(原型链),并且这个object对象的__proto__属性(原型链)指向的是Object的prototype所指向的空间。足以说明object是Object类的对象。
并且所有的函数或类的prototype属性所指向的空间都是一个object对象,这个object对象不一定相同,但这些object都是Object类的对象,因为object对象的__proto__属性(原型链)指向了Object的prototype属性所指向的空间。
结果经验证:

console.log("point instanceof Object :", point instanceof Object);           // 结果为true
console.log("point.prototype instanceof Object", point.prototype instanceof Object);        //结果为true
console.log("Function.prototype instanceof Object", Function.prototype instanceof Object);  //结果为true

2.第一问回答已经证明了function不仅是函数,同样也是一个类,是Object的子类。从我画的图可以看出function的__proto__属性(原型链)指向了Function的prototype属性所指的空间,我说过原型链指明了是某个类的对象,这表明function还是Function的对象,所以function有多重身份,函数,类,对象。但我可以确定的是function不是Object的对象,只是Object的一个子类。其实上边也说过了prototype属性表示类与类之间的父子关系,同时也经验证 new Object所产生的对象只拥有__proto__属性,而没有prototype属性。
而function两个属性都拥有。并且 new Function所产生的对象也确实拥有这两个属性。所以更加的确定。

3.Function和Object的关系解释起来可能有些复杂,我采用一个人性化的例子来说明

Object像父亲 Object是对象,是类
Function像母亲 Function是函数,是对象,是类

Object (父亲)拥有自己的一套教育孩子的准则,并且这个准则是独一无二并且是最终,这个准则就是自己的prototype 所指向的__proto__为null的这个object,Function(母亲) 也有自己的一套教育孩子的准则,这个准则就是自己的prototype属性所指向的那个object对象,但是这个object对象的__proto__最终指向了Object (父亲)的教育准则,说明母亲的准则是基于父亲的独一无二的准则,但同时也添加了自己的想法,最终形成自己的准则。这同时说明了Function 是 Object的子类。

Function(母亲) 的__Proto__属性指向自己的prototype属性所指向的空间,这说明Function(母亲)有自己的准则(prototype属性所指向的空间) 了,不用再采纳别人的意见(表明Function不是任何人的对象,也不用通过__proto__属性去访问别人的性质)此时的这个别人的意见就是Function的__proto__属性所指向的空间。所以此事Function(母亲)的__proto__属性指向的是自己的prototype属性所指向的空间,Function自己是自己的对象。

而Object (父亲)不一样,即使自己拥有独一无二的教育准则(Function 的 prototype属性指向的空间),但是还要采纳母亲的准则,所以Object的__proto__属性指向了Function的prototype所指向的空间。这也说明了Object是Function的对象

console.log("Object instanceof Function :", Object instanceof Function);     //结果为true
console.log("Function instanceof Object :", Function instanceof Object);     //结果为true
console.log("Function instanceof Function :", Function instanceof Function); //结果为true
console.log("Object instanceof Object :", Object instanceof Object);         //结果为true

4.链的终结者当然是Object的prototype属性所指向的空间,也就是父亲的独一无二的教育准则。

javaScript中原型和原型链的分析深究 —————— 开开开山怪相关推荐

  1. 《js中原型和原型链的深入理解》的笔记

    前言:在微信公众号前端大全上看过<js中原型和原型链的深入理解>,个人认为这是我看过的js原型链的文章中,在思维结构上理解最清楚的一个文章了,本着温故而知新,有害怕找不到这个文章,我就把文 ...

  2. JS 中原型和原型链深入理解

    作者: erdu segmentfault.com/a/1190000014717972 首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(nat ...

  3. 前端开发:JS中原型和原型链的介绍

    前言 在前端开发过程中,涉及到JS原理相关的内容也就是常用的几大模块,不仅常用而且很重要,但是涉及到原理的话会有点难懂,尤其是对JS接触不太久的开发者来讲.本篇博文就来分享一下关于JS的原型和原型链相 ...

  4. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  5. 浅谈JavaScript继承与原型链

    对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...

  6. JavaScript简餐——原型链是什么?

    文章目录 前言 一.原型链 二.原型链示例 二.示例图解 总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第4版)> ...

  7. 【javascript】简单原型链、借用构造函数

    javascript中继承(实现继承)的方式--简单原型链 1 .简单原型链事例 function Super() { };         Super.prototype = {           ...

  8. JavaScript -- 对象与原型链 [[Prototype]]

    一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...

  9. Javascript中的原型链、prototype、__proto__的关系

    javascript  2016-10-06  1120  9 上图是本宝宝用Illustrator制作的可视化信息图,希望能帮你理清Javascript对象与__proto__.prototype和 ...

  10. (四)我的JavaScript系列:原型链

    夜深风竹敲秋韵,万叶千声皆是恨. 原型链对于JavaScript来说是个很核心的概念.JavaScript不是基于类模板的面向对象语言:反而,它的面向对象机制是基于原型的.我们不可能说某个对象属于什么 ...

最新文章

  1. “==”和equals方法的区别
  2. 如何从SQL Server 中取得字段说明
  3. 为什么Java 8中不再需要StringBuilder拼接字符串
  4. The document “Main.storyboard” requires Xcode 8.0 or later
  5. Unity3D脚本的生命周期(执行顺序)
  6. python用牛顿迭代法求平方根_Python编程实现二分法和牛顿迭代法求平方根代码
  7. 类型转换与类型断言之间的区别
  8. solid 设计原则 php,面向对象设计SOLID五大原则
  9. 1085. Perfect Sequence (25)-PAT甲级真题
  10. Java笔记1(2015-8-30)
  11. paypal如何退款
  12. Docker(从入门到部署微服务集群)
  13. python接入图灵机器人_Python使用微信接入图灵机器人过程解析
  14. lastwinner分红系统开发
  15. vue中img本地图片地址的具体使用
  16. 登陆器生成登陆器不显示服务器列表,GeeM2单机登录器读取不到列表怎么办?
  17. html5做宠物饲养,说一说最适合上班族养的十大宠物
  18. vue init webpack缺少标识符_Vue脚手架热更新技术探秘
  19. 基于Android的看小说APP源码Android本科毕业设计Android小说阅读器、小说APP源码
  20. linux 下查看知网caj文件的方法

热门文章

  1. 360Replugin插件Activity横屏
  2. 一次分布式架构cms系统页面静态化模块开发经历
  3. 调色板的原理和调色板显示模式
  4. XAMP下tomcat无法启动:Make sure you have Java JDK or JRE installed and the required ports are free解决方法
  5. 1688API大全、商品详情调用展示
  6. 五分理解IaaS,PaaS,SaaS都是什么
  7. html什么用于创建表格的标题,在HTML页面中,()标记用于为表格中的一列指定一个标题(选一项)...
  8. JDK包括的Java基础类库_问:JDK是Java平台的核心,Java运行环境、Java工具、Java基础类库(rt.jar)。J...
  9. 智能音箱音效哪个好_四大智能音箱,你觉得哪个才是最好用的?
  10. 我的河海大学计算机考研经验之谈