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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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/12/27 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
举例区分Python中的浅复制与深复制
2015/07/02 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python的mysqldb安装步骤详解
2017/08/14 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
年终考核评语
2014/01/19 职场文书
元宵晚会主持词
2014/03/25 职场文书
社区春季防火方案
2014/06/02 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
校长四风对照检查材料
2014/09/27 职场文书
新郎新娘答谢词
2015/01/04 职场文书
冲出亚马逊观后感
2015/06/03 职场文书