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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
JS之相等操作符详解
Sep 13 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php程序内部post数据的方法
2015/03/31 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
UNIX命令速查表
2012/03/10 面试题
最新的咖啡店创业计划书
2013/12/30 职场文书
土建资料员岗位职责
2014/01/04 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
基于redis+lua进行限流的方法
2022/07/23 Redis