深入浅出理解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 attachEvent和addEventListener使用方法
Mar 19 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
使用python实现rsa算法代码
2016/02/17 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
超简单使用Python换脸实例
2019/03/27 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python实现验证码识别
2020/06/15 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
优秀中专生推荐信
2013/11/17 职场文书
会计岗位职责模板
2014/03/12 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
太空授课观后感
2015/06/17 职场文书
运动会100米加油稿
2015/07/21 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers