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 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
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
说明的比较细的php 正则学习实例
2008/07/30 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php判断linux下程序问题实例
2015/07/09 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
js 动态文字滚动的例子
2011/01/17 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
Python流程控制语句的深入讲解
2020/06/15 Python
keras中的History对象用法
2020/06/19 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
内勤岗位职责
2015/02/10 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
教师节祝酒词
2015/08/11 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python