js原型链原理看图说明


Posted in Javascript onJuly 07, 2012

当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表。。
在数据结构中学过链表不,链表中有一个位置相当于指针,指向下一个结构体。

于是乎__proto__也一样,每当你去定义一个prototype的时候,相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型。

文字说起来有点儿绕,看图说话

var foo = { 
x: 10, 
y: 20 
};

js原型链原理看图说明


当我不指定__proto__的时候,foo也会预留一个这样的属性,

如果有明确的指向,那么这个链表就链起来啦。

很明显,下图中b和c共享a的属性和方法,同时又有自己的私有属性。

__proto__默认的也有指向。它指向的是最高级的object.prototype,而object.prototype的__proto__为空。

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 
} 
}; 
var b = { 
y: 20, 
__proto__: a 
}; var c = { 
y: 30, 
__proto__: a 
}; 
// call the inherited method 
b.calculate(30); // 60

js原型链原理看图说明


理解了__proto__这个属性链接指针的本质。。再来理解constructor。

当定义一个prototype的时候,会构造一个原形对象,这个原型对象存储于构造这个prototype的函数的原形方法之中.

function Foo(y){ 
this.y = y ; 
} Foo.prototype.x = 10; 
Foo.prototype.calculate = function(z){ 
return this.x+this.y+z; 
}; 
var b = new Foo(20); 
alert(b.calculate(30));

js原型链原理看图说明

【参考文档】

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

Javascript 相关文章推荐
js函数般调用正则
Apr 08 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
jquery实现保存已选用户
Jul 21 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
jqTransform form表单美化插件使用方法
Jul 05 #Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 #Javascript
JavaScript中变量提升 Hoisting
Jul 03 #Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 #Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 #Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 #Javascript
JavaScript中的细节分析
Jun 30 #Javascript
You might like
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python实现AES和RSA加解密的方法
2019/03/28 Python
python小白学习包管理器pip安装
2020/06/09 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
体育教育专业毕业生自荐信
2013/11/15 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2014年度培训工作总结
2014/11/27 职场文书
归元寺导游词
2015/02/06 职场文书
捐款仪式主持词
2015/07/04 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS