理解Javascript_05_原型继承原理


Posted in Javascript onOctober 13, 2010

prototype与[[prototype]]

在有面象对象基础的前提下,来看一段代码:

//Animal构造函数 
function Animal(name){ 
this.name = name; 
} 
//Animal原型对象 
Animal.prototype = { 
id:"Animal", 
sleep:function(){ 
alert("sleep"); 
} 
} var dog = new Animal("旺才"); 
alert(dog.name);//旺才 
alert(dog.id);//Animal 
dog.sleep()//sleep

其对应的简易内存分配结构图:
理解Javascript_05_原型继承原理
现在让我们来解释一下这张内存图的来龙去脉:

首先明确一点[[prototype]]与prototype并不是同一个东西。

那先来看prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型,更明确的说是代表了由函数对象(构造函数)所创建出来的对象的原型。结合本例,Animal.prototype就是dog的原型,dog所引用的那个对象将从Animal.prototype所引用的对象那继承属性与方法。

每个对象都有一个名为[[Prototype]]的内部属性,指向于它所对应的原型对象。在本例中dog的[[prototype]]指向Animal.prototype,大家都知道,Animal.prototype也是一个对象,即然是一个对象,那它必然也有[[prototype]]属性指向于它所对应的原型对象,由此便构成了一种链表的结构,这就是原型链的概念。额外要说的是:不同的JS引擎实现者可以将内部[[Prototype]]属性命名为任何名字,并且设置它的可见性,前且只在JS引擎内部使用。虽然无法在JS代码中访问到内部[[Prototype]](FireFox中可以,名字为__proto__因为Mozilla将它公开了),但可以使用对象的 isPrototypeOf()方法进行测试,注意这个方法会在整个Prototype链上进行判断。

注:关于函数对象的具体内容,将在后继的博文中讲解。

属性访问原则

使用obj.propName访问一个对象的属性时,按照下面的步骤进行处理(假设obj的内部[[Prototype]]属性名为__proto__):
1. 如果obj存在propName属性,返回属性的值,否则
2. 如果obj.__proto__为null,返回undefined,否则
3. 返回obj.__proto__.propName
调用对象的方法跟访问属性搜索过程一样,因为方法的函数对象就是对象的一个属性值。
提示: 上面步骤中隐含了一个递归过程,步骤3中obj.__proto__是另外一个对象,同样将采用1, 2, 3这样的步骤来搜索propName属性。
理解Javascript_05_原型继承原理
这就是基于Prototype的继承和共享。其中object1的方法fn2来自object2,概念上即object2重写了object3的方法fn2。
JavaScript对象应当都通过prototype链关联起来,最顶层是Object,即对象都派生自Object类型。

结合是上面的理论,让我们再来看一个更加复杂的示例,他明确的解释了prototype、[[prototype]]、原型链以及属性访问的相关要点:

//Animal构造函数 
function Animal(name){ 
this.name = name; 
} 
//Animal原型对象 
Animal.prototype = { 
id:"Animal", 
sleep:function(){ 
alert("sleep"); 
} 
} function Human(name,age){ 
Animal.call(this,name); 
this.age = age; 
} 
Human.prototype = new Animal(); 
Human.prototype.id = "Human"; 
Human.prototype.say = function(){ 
alert("hello everyone,My name is "+this.name +",I'm "+this.age+" and I'm a "+this.id); 
} 
//Human相关调用 
var jxl = new Human('笨蛋',25); 
alert(jxl.name);//笨蛋 
alert(jxl.id);//Human 
jxl.say();//hello everyone,My name is 笨蛋,I'm 25 and I'm a Human 
alert(Animal.prototype.isPrototypeOf(jxl));//true 
alert(Object.prototype.isPrototypeOf(jxl));//true

根据上面的代码,你能画出相应的内存图吗?好,让我们来看一下:
理解Javascript_05_原型继承原理
注:prototype的根为Object.prototype,对象Object.prototype的内部[[prototype]]属性为null.
其实,这里还有很多东西可以讲,但在其原理都在这张图上了,可试着调整一下代码的次序,如将Human.prototype.id = "Human";放在Human.prototype = new Animal();的前面,看一下运行结果,解释一下为什么之类的,你可以学到很多。

我发现,通过内存来展现程序内部运行细节真的是太完美了!

Javascript 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 #Javascript
理解Javascript_03_javascript全局观
Oct 11 #Javascript
理解Javascript_02_理解undefined和null
Oct 11 #Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 #Javascript
javascript getElementsByClassName实现代码
Oct 11 #Javascript
javascript Array.prototype.slice使用说明
Oct 11 #Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
You might like
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python使用selenium实现批量文件下载
2019/03/11 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
python with语句的原理与用法详解
2020/03/30 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
生产车间主任的个人自我鉴定
2013/10/25 职场文书
承办会议欢迎词
2014/01/17 职场文书
就业协议书范本
2014/10/08 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
求职自我评价范文
2015/03/09 职场文书
单位考核鉴定意见
2015/06/05 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
frg-100简单操作(设置)说明
2022/04/05 无线电
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers