理解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 数组的 uniq 方法
Jan 23 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
js 调用百度分享功能
Feb 27 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
destoon数据库表说明汇总
2014/07/15 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python分类测试代码实例汇总
2020/07/23 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
小学节能减排倡议书
2014/05/15 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
详解nginx location指令
2022/01/18 Servers
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL