prototype原型对象

每个函数都有一个默认的prototype属性,其实际上还是一个对象,如果被用在继承中,姑且叫做原型对象。

在构造函数中的prototype中定义的属性和方法,会被创建的对象所继承下来。举个栗子:

function F(){}
F.prototype.work = function(){console.log('F is working..');
};
var f = new F();
f.work(); // F is working..

当你创建函数时,JS会为这个函数自动添加 prototype 属性,值是空对象。而一旦你把这个函数当作构造函数( constructor )调用(即通过 new 关键字调用),那么JS就会帮你创建该构造函数的实例,实例继承构造函数 prototype 的所有属性和方法(实例通过设置自己的 __proto__ 指向承构造函数的 prototype 来实现这种继承)。

神秘的__proto__

JS的对象中都包含了一个__proto__属性,其指向的是创建该对象时的构造函数的原型对象prototype。

从上面的输出结果看出,f.__proto__指向了其构造函数F的prototype,而F.prototype本身也是一个对象,其内部也有__proto__属性,其指向的是Object.prototype,直到最后Object.prototype指向null,这条原型链才结束。

因此,__proto__这个神秘的属性才是原型链形成的真正原因。

原型链

由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined。原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

下面是一张经典的图:

从上图看出:

  1. Object.prototype是顶级对象,所有对象都继承自它。

  2. Function 继承 Function 本身, Function.prototype 继承 Object.prototype 。

  3. Function.prototype 和 Function.__proto__ 都指向 Function.prototype

  4. Object.prototype.__proto__ === null ,说明原型链到 Object.prototype 终止。

Javascript重温OOP之原型与原型链相关推荐

  1. (转)【javascript基础】原型与原型链

    原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言 原型是什么 理解原型对象 原型对象 isPrototypeOf hasOwnProper ...

  2. javascript之原型与原型链

    前言   了解JavaScript的原型与原型链有助于我们更深层次的理解这门语言,看过很多相关的文章,写的都很好,下面是根据自己的理解,一步步揭开原型与原型链 正文 一.数据类型   在JavaScr ...

  3. JavaScript原型与原型链(总结篇)

    系列文章推荐 JavaScript原型与原型链(基础篇) JavaScript原型与原型链(进阶篇) JavaScript原型与原型链(总结篇) 1 构造函数和实例对象 构造函数的prototype属 ...

  4. JavaScript对象、原型、原型链知识总结思维导图

    这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScri ...

  5. JavaScript对象——原型与原型链

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

  6. javascript——原型与原型链

    一.prototype 在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象. 例如: function Person(age) {this.age = age ...

  7. 深入理解JavaScript系列(5):强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...

  8. JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】

    笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目   录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...

  9. java原型链_深入总结Javascript原型及原型链

    本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...

最新文章

  1. 多个mapper的事务回滚_揭秘蚂蚁金服分布式事务 Seata 的AT、Saga和TCC模式
  2. C++中substr函数的用法
  3. mysql中的blob和text区别
  4. olive videoeditor开源跨平台视频编辑器
  5. Android之数据库操作
  6. 代码整理工具_整理了 11 个好用的代码质量审核和管理工具
  7. 有一个3x4的矩阵,输出最大值,且输出对应的行和列;
  8. 数聚新动能 数创大未来——2016中国国际大数据大会
  9. 拳王虚拟项目公社:说一个合法正规兼职创业,副业虚拟资源项目
  10. NQL.Net 简介
  11. 论文阅读笔记(六)——GhostNet: More Features from Cheap Operations
  12. uva11549Calculator Conundrum
  13. CentOS7下安装配置Tomcat环境
  14. 分布式之CAP原则详解
  15. 微软正版验证_真正纯净无捆绑微软官方原版windows10安装教程无删减完整版
  16. Unexpected error while running MyBatis Generator. Cannot resolve classpath entry: mysql-connector-ja
  17. 什么是PCB走线的3W原则
  18. 从华为清理34岁以上老员工想起的二三事
  19. CENTOS7 安装eclipse应用
  20. 专升本高数——第九章 无穷级数【学习笔记】

热门文章

  1. Matlab 卷积函数 ——conv2
  2. 解决HTML embed标签显示在div上层(not z-index)
  3. 【实例分割_SOLOv2】SOLOv2:Dynamic,Faster and Stronger
  4. 人工智能对金融世界的改变_人工智能革命正在改变网络世界
  5. Job 失败了怎么办?- 每天5分钟玩转 Docker 容器技术(133)
  6. 银行工作人员违规发放贷款要坐牢吗?
  7. UART协议驱动设计
  8. 修饰符const精妙之处
  9. python查看文档的软件_Python __doc__属性:查看文档
  10. php where 不包含,php – 除非它们包含“where”或“like”子句,否则不允许删除