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实现滑动图片自己测试的例子
Nov 05 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
深入理解js数组的sort排序
May 28 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 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中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php中this关键字用法分析
2016/12/07 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
详解javascript void(0)
2020/07/13 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Django多数据库的实现过程详解
2019/08/01 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
2014年廉洁自律承诺书
2014/05/26 职场文书
五好关工委申报材料
2014/05/31 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
手术室护士个人总结
2015/02/13 职场文书
志愿者个人总结
2015/03/03 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
pt-archiver 主键自增
2022/04/26 MySQL
vue实现在data里引入相对路径
2022/06/05 Vue.js