JavaScript原型链示例分享


Posted in Javascript onJanuary 26, 2014
<mce:script type="text/javascript"><!--
/*
   每个对象实例都有个属性成员用于指向到它的instanceof 对象(暂称为父对象)的原型(prototype)
   我们把这种层层指向父原型的关系称为[原型链 prototype chian]
   原型也具有父原型,因为它往往也是一个对象实例,除非我们人为地去改变它
   在JavaScript中,"一切都是对象,函数是第一型。"
   Function和Object都是函数的实例。
   Function的父原型指向到Function的原型,Function.prototype的父原型是Object的原型
   Object的父原型也指向到Function的原型,Object.prototype是所有父原型的顶层
   在spiderMonkey引擎中,父原型可以通过 __proto__ 进行访问
*/
Function.prototype.hi = function(){alert('hi Function');}
Object.prototype.hi = function(){alert('hi Object');}
var a = function(){
    this.txt = "a";
}
a.prototype = {
    say:function(){alert('a');}
}
alert(a instanceof Function);//a是Function的实例;
alert(a.__proto__ === Function.prototype);//a的父原型指向到Function的原型;
alert(Function instanceof Object);//Function是Object的实例;
alert(Function.__proto__ === Function.prototype);//Function的父原型指向到Function的原型;
alert(Function.prototype.__proto__ === Object.prototype);//Function的原型的父原型指向到Object的原型
alert(Object.__proto__ === Function.prototype);//Object的父原型指向到Function的原型;
alert(Object.prototype.__proto__);//Object的原型是所有父原型的顶端,它不再具有父原型;
alert(a.prototype instanceof Object);//a的原型也是一个对象
alert(a.prototype.__proto__ === Object.prototype);//a的原型的父原型指向Object的原型
var A = function(){};
A.prototype = new a();
A.prototype.say = function(){
    alert('A');
}
alert(A instanceof Function);//A是Function的实例
alert(A.__proto__ === Function.prototype);//A的父原型指向到Function的原型
alert(A.prototype instanceof a);//A的原型是a的实例
alert(A.prototype.__proto__ === a.prototype);//A的原型的父原型指向到a的原型
var iA = new A();//iA是A的实例,iA.__proto__ === A.prototype
var iB = new a();//iB是a的实例,iB.__proto__ === a.prototype
iA.hi();
/*
iA本身没有hi方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,也没有找到,
于是再找A.prototype.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Object
*/
iB.hi();
/*
iB本身没有hi方法(构造中没有,自己也没有定义过),
于是找iB.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Object
*/
a.hi();
/*
a本身没有hi方法(构造中没有,自己也没有定义过),
于是找a.__proto__既Function.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Function
*/
iA.say();
/*
iA本身没有say方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,哇,发现了say,于是调用它,停止查找
所以,这里调用的是A.prototype.say
输出:A
*/
iB.say();
/*
iB本身没有say方法(构造中没有,自己也没有定义过),
于是找iB.__proto__即a.prototype,哇,发现了say,于是调用它,停止查找
所以,这里调用的是a.prototype.say
输出:a
*/
iA.bad();
/*
iA本身没有bad方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,也没有找到,
于是再找A.prototype.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,终于是找不到了,停止查找
返回错误,iA.bad不是一个function
*/
// --></mce:script>
</script>

感谢simon提出的修正意见!所有实例在查找属性方法时不会去查找自己的prototype(实例的prototype不在原型链内,只能作为一个属性)!

Javascript 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
babel基本使用详解
Feb 17 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
JS设置获取cookies的方法
Jan 26 #Javascript
js中小数转换整数的方法
Jan 26 #Javascript
javascript中取前n天日期的两种方法分享
Jan 26 #Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 #Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 #Javascript
javascript:json数据的页面绑定示例代码
Jan 26 #Javascript
jQuery focus和blur事件的应用详解
Jan 26 #Javascript
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php获取远程文件大小
2015/10/20 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP count()函数讲解
2019/02/03 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Openlayers实现地图全屏显示
2020/09/28 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
详解python eval函数的妙用
2017/11/16 Python
python入门教程 python入门神图一张
2018/03/05 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
求职信范文怎么写
2014/01/29 职场文书
财务总监管理职责范文
2014/03/09 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
读书小明星事迹材料
2014/05/03 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2014年库房工作总结
2014/11/26 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
反邪教教育心得体会
2016/01/15 职场文书
2019求职信大礼包
2019/05/15 职场文书