理解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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
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
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
express.js中间件说明详解
2019/03/19 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
python自动发邮件库yagmail的示例代码
2018/02/23 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python编写猜数字小游戏
2019/10/06 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
幼儿园毕业教师感言
2014/02/21 职场文书
给校长的一封建议书
2014/03/12 职场文书
春季防火方案
2014/05/10 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
质检员工作总结2015
2015/04/25 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python