深入浅出理解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检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 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 什么是PEAR?(第三篇)
2009/03/19 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP如何使用Memcached
2016/04/05 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
js获取class的所有元素
2013/03/28 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Python try except finally资源回收的实现
2021/01/25 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
校长新学期致辞
2015/07/30 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Golang日志包的使用
2022/04/20 Golang
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript