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之$(document).ready()使用介绍
Apr 05 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
详解a++和++a的区别
Aug 30 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
JS图片懒加载的优点及实现原理
Jan 10 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
拼音码表的生成
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
php生成微信红包数组的方法
2019/09/05 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
python的id()函数介绍
2013/02/10 Python
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
用python读写excel的方法
2014/11/18 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
pycharm设置注释颜色的方法
2018/05/23 Python
python django model联合主键的例子
2019/08/06 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
银行领导证婚词
2014/01/11 职场文书
电影建国大业观后感
2015/06/01 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
python numpy中setdiff1d的用法说明
2021/04/22 Python