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 相关文章推荐
初学Javascript的一些总结
Nov 03 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
下载文件的点击数回填
2006/10/09 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python计算回文数的方法
2015/03/11 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python字节单位转换实例
2019/12/05 Python
聊聊python中的循环遍历
2020/09/07 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
好家长事迹材料
2014/01/23 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2014年接待工作总结
2014/11/26 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
内乡县衙导游词
2015/02/05 职场文书
答谢酒会主持词
2015/07/02 职场文书
工作会议简报
2015/07/20 职场文书
学会感恩主题班会
2015/08/12 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python