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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
原生js实现碰撞检测
Mar 12 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python通过smpt发送邮件的方法
2015/04/30 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python批量爬取下载抖音视频
2019/06/17 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
高中毕业自我评价
2014/02/08 职场文书
学历公证书范本
2014/04/09 职场文书
金融事务专业求职信
2014/04/25 职场文书
岗位明星事迹材料
2014/05/18 职场文书
减负增效提质方案
2014/05/23 职场文书
美术专业自荐信
2014/07/07 职场文书
代理词怎么写
2015/05/25 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python