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 相关文章推荐
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
详解vue组件之间的通信
Aug 30 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
anaconda如何查看并管理python环境
2019/07/05 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
社区戒毒工作方案
2014/06/04 职场文书
信用卡工作证明模板
2014/09/14 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
公司2015年终工作总结
2015/05/26 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python