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 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python实现两张图片的像素融合
2019/02/23 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
浅析matlab中imadjust函数
2020/02/27 Python
python实现双人五子棋(终端版)
2020/12/30 Python
C#实现启动一个进程
2016/10/01 面试题
会计学个人自荐信模板
2013/12/13 职场文书
四年级数学教学反思
2014/02/02 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技