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学习5 jQuery事件模型
Feb 07 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
浅析javascript中的DOM
Mar 01 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 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异步执行的详解
2013/06/03 PHP
php实现中文转数字
2016/02/18 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python解析xml模块封装代码
2014/02/07 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
分享vim python缩进等一些配置
2018/07/02 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python 基于wx实现音乐播放
2020/11/24 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
思想汇报格式
2014/01/05 职场文书
趣味体育活动方案
2014/02/08 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
工作年限证明模板
2014/11/01 职场文书
先进党支部事迹材料
2014/12/24 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Hive导入csv文件示例
2022/06/25 数据库