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 相关文章推荐
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
Python日志模块logging简介
2015/04/13 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python如何实现机器人聊天
2020/09/10 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
体育口号大全
2014/06/18 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
水浒传读书笔记
2015/06/25 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
小程序实现侧滑删除功能
2022/06/25 Javascript