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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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/11/05 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python爬虫实例详解
2018/06/19 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
少先队学雷锋活动月总结
2014/03/09 职场文书
业务员自荐信范文
2014/04/20 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
如何写好闭幕词
2019/04/02 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers