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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 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中Object对象的笔记分享
2011/06/28 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php利用事务处理转账问题
2015/04/22 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JS跨域问题详解
2014/11/25 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
Js apply方法详解
2017/02/16 Javascript
React 组件间的通信示例
2018/06/14 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python实现数值积分方式
2019/11/20 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
教师自我剖析材料
2014/09/29 职场文书
营销经理工作检讨书
2014/11/03 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
金榜题名主持词
2015/07/02 职场文书