深入浅出理解javaScript原型链


Posted in Javascript onMay 09, 2015

本文实例讲述了javaScript的原型链。分享给大家供大家参考。具体分析如下:

对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。

看了这张图后突然对javascript有了质的理解。

深入浅出理解javaScript原型链

javascript的原型链有显式和隐式两种:

显式原型链:即我们常见的prototype;

隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问;隐式原型链用于javascript引擎内部对原型链的搜寻,通过显示原型链来设置;
 
一、prototype和__proto__的概念

prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性。

用chrome和FF都可以访问到对象的__proto__属性,IE不可以。

二、new 的过程

var Person = function(){};
var p = new Person();

new的过程拆分成以下三步:

(1) var p={}; 也就是说,初始化一个对象p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 也就是说构造p,也可以称之为初始化p

关键在于第二步,我们来证明一下:

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);

这段代码会返回true。说明我们步骤2是正确的。

三、示例

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();

p是一个引用指向Person的对象。我们在Person的原型上定义了一个sayName方法和age属性,当我们执行p.age时,会先在this的内部查找(也就是构造函数内部),如果没有找到然后再沿着原型链向上追溯。

这里的向上追溯是怎么向上的呢?这里就要使用__proto__属性来链接到原型(也就是Person.prototype)进行查找。最终在原型上找到了age属性。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
vue之数据交互实例代码
Jun 16 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
jquery实现动态改变div宽度和高度
May 08 #Javascript
You might like
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
python对excel文档去重及求和的实例
2018/04/18 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
证婚人经典证婚词
2014/01/09 职场文书
娱乐节目策划方案
2014/06/10 职场文书
个人工作表现评价材料
2014/09/21 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
学校安全管理制度
2015/08/06 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
python本地文件服务器实例教程
2021/05/02 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Python绘画好看的星空图
2022/03/17 Python