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 相关文章推荐
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
javascript模拟命名空间
2015/04/17 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
省级四好少年事迹材料
2014/01/25 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
集中采购方案
2014/06/10 职场文书
实习证明格式范文
2014/10/14 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android