Javascript重温OOP之原型与原型链
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。原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。
下面是一张经典的图:
从上图看出:
Object.prototype
是顶级对象,所有对象都继承自它。Function
继承Function
本身,Function.prototype
继承Object.prototype
。Function.prototype
和Function.__proto__
都指向Function.prototype
Object.prototype.__proto__
===null
,说明原型链到Object.prototype
终止。
Javascript重温OOP之原型与原型链相关推荐
- (转)【javascript基础】原型与原型链
原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言 原型是什么 理解原型对象 原型对象 isPrototypeOf hasOwnProper ...
- javascript之原型与原型链
前言 了解JavaScript的原型与原型链有助于我们更深层次的理解这门语言,看过很多相关的文章,写的都很好,下面是根据自己的理解,一步步揭开原型与原型链 正文 一.数据类型 在JavaScr ...
- JavaScript原型与原型链(总结篇)
系列文章推荐 JavaScript原型与原型链(基础篇) JavaScript原型与原型链(进阶篇) JavaScript原型与原型链(总结篇) 1 构造函数和实例对象 构造函数的prototype属 ...
- JavaScript对象、原型、原型链知识总结思维导图
这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScri ...
- JavaScript对象——原型与原型链
原型与原型链 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...
- javascript——原型与原型链
一.prototype 在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象. 例如: function Person(age) {this.age = age ...
- 深入理解JavaScript系列(5):强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
- JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目 录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...
- java原型链_深入总结Javascript原型及原型链
本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...
最新文章
- 多个mapper的事务回滚_揭秘蚂蚁金服分布式事务 Seata 的AT、Saga和TCC模式
- C++中substr函数的用法
- mysql中的blob和text区别
- olive videoeditor开源跨平台视频编辑器
- Android之数据库操作
- 代码整理工具_整理了 11 个好用的代码质量审核和管理工具
- 有一个3x4的矩阵,输出最大值,且输出对应的行和列;
- 数聚新动能 数创大未来——2016中国国际大数据大会
- 拳王虚拟项目公社:说一个合法正规兼职创业,副业虚拟资源项目
- NQL.Net 简介
- 论文阅读笔记(六)——GhostNet: More Features from Cheap Operations
- uva11549Calculator Conundrum
- CentOS7下安装配置Tomcat环境
- 分布式之CAP原则详解
- 微软正版验证_真正纯净无捆绑微软官方原版windows10安装教程无删减完整版
- Unexpected error while running MyBatis Generator. Cannot resolve classpath entry: mysql-connector-ja
- 什么是PCB走线的3W原则
- 从华为清理34岁以上老员工想起的二三事
- CENTOS7 安装eclipse应用
- 专升本高数——第九章 无穷级数【学习笔记】
热门文章
- Matlab 卷积函数 ——conv2
- 解决HTML embed标签显示在div上层(not z-index)
- 【实例分割_SOLOv2】SOLOv2:Dynamic,Faster and Stronger
- 人工智能对金融世界的改变_人工智能革命正在改变网络世界
- Job 失败了怎么办?- 每天5分钟玩转 Docker 容器技术(133)
- 银行工作人员违规发放贷款要坐牢吗?
- UART协议驱动设计
- 修饰符const精妙之处
- python查看文档的软件_Python __doc__属性:查看文档
- php where 不包含,php – 除非它们包含“where”或“like”子句,否则不允许删除