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获得下拉框值的代码
Aug 13 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JS定时器实例详细分析
Oct 11 Javascript
js中小数转换整数的方法
Jan 26 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
详解JavaScript对象类型
Jun 16 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
微信小程序合法域名配置方法
May 06 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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连接MYSQL数据库实例代码
2016/01/20 PHP
php微信开发接入
2016/08/27 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python实现计算器功能
2019/10/31 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
认识深刻的检讨书
2014/02/16 职场文书
建设工地安全标语
2014/06/07 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
基层党支部承诺书
2015/04/30 职场文书
胡桃夹子观后感
2015/06/11 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
CSS基础详解
2021/10/16 HTML / CSS