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 相关文章推荐
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
深入探讨前端框架react
Dec 09 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php中的登陆login
2007/01/18 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
解决python读取几千万行的大表内存问题
2018/06/26 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
浅析python中while循环和for循环
2019/11/19 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
三年大学自我鉴定
2014/01/16 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
党员干部学习心得体会
2016/01/23 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript