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不可用的问题探究
Oct 01 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 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书写安全的脚本代码
2012/02/05 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
文字幻灯片
2006/06/26 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
javascript实现评分功能
2020/06/24 Javascript
python版本的读写锁操作方法
2016/04/25 Python
python制作小说爬虫实录
2017/08/14 Python
python获取代理IP的实例分享
2018/05/07 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python调用支付宝支付接口流程
2019/08/15 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python二维图制作的实例代码
2020/12/03 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
实用求职信范文分享
2013/12/25 职场文书
食品业务员岗位职责
2014/03/18 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2015年人事科工作总结
2015/04/28 职场文书
客户答谢会致辞
2015/07/30 职场文书