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 面向对象编程 function也是类
Sep 17 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
JavaScript函数柯里化
Nov 07 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
javascript时区函数介绍
2012/09/14 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python中lambda与def用法对比实例分析
2015/04/30 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python调用百度语音REST API
2018/08/30 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python实现中文文本分句的例子
2019/07/15 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Python多线程多进程实例对比解析
2020/03/12 Python
学习Python需要哪些工具
2020/09/04 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
普通简短的个人自我评价
2014/02/15 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
宣传活动总结范文
2014/07/01 职场文书
团拜会主持词
2015/07/04 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python