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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js日期相关函数总结分享
Oct 15 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
教你安装python Django(图文)
2013/11/04 Python
python使用marshal模块序列化实例
2014/09/25 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
pygame实现五子棋游戏
2019/10/29 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
岗位职责怎么写
2014/03/14 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
办公室主任岗位职责
2015/01/31 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python