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中常用的运算符小结
Jan 18 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
微信小程序实现星级评价
Nov 20 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
原生js实现日期选择插件
May 21 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 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
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
护士辞职信模板
2014/01/20 职场文书
高中学生期末评语
2014/04/25 职场文书
高考标语大全
2014/06/05 职场文书
小组名称和口号
2014/06/09 职场文书
党代会心得体会
2014/09/04 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
活动总结书怎么写
2015/05/11 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python脚本框架webpy模板控制结构
2021/11/20 Python