深入浅出理解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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
javascript 验证日期的函数
Mar 18 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
Bootstrap布局方式详解
May 27 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
详解 TypeScript 枚举类型
Nov 02 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
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python3.5绘制随机漫步图
2018/08/27 Python
python实现小球弹跳效果
2019/05/10 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python: 传递列表副本方式
2019/12/19 Python
np.dot()函数的用法详解
2020/01/17 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
相亲活动方案
2014/08/26 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
教师节作文之小学四年级
2019/09/03 职场文书