javascript中的原型链深入理解


Posted in Javascript onFebruary 24, 2014

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中,函数就有2个功能

第一、 作为一般函数调用
第二、 作为它原型对象的构造函数 也就new()

我们来看一个例子

function a(){ 
this.name = 'a'; 
}

当创建一个函数,它会发生什么呢?

第一、它会创建1个函数对象 也就是a 本身

第二、它会创建1个原型对象@a(用@来表示)

第三、函数对象会有一个prototype指针,它指向了对应的原型对象,这里就指向了@a

第四、@a对象中有一个construtor指针,指向它的构造函数,这里就指向了a

http://img.blog.csdn.net/20140222125611500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGpsMTU3MDEx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

这个prototype属性究竟有什么用呢?

其实prototype 属性表示当前函数能够控制的范围(或者说它指明了当前函数是谁的构造函数),这里a就是@a原型对象的构造函数,所以我们会看见有这种写法

function a(){ 
this.name = 'a'; 
} var a1 = new a();

这就和其他常见语言相似了,new 就是调用原型对象(通过prototype指针)里面构造函数(constructor)创建一个新的对象实例。

那么修改了prototype指向对象里面的属性,也就影响了所有以它为模板创建的实例,我们可以这样来验证

function a(){ 
this.name = 'a'; 
} var a1 = new a(); 
a.prototype.age = 1; 
alert(a1.age);

结果:1

那为什么a1对象可以直接访问到age属性呢?a1对象里面我并没有定义age属性啊,

那是因为所有实例里面都会有一个引用_proto_(在firfox,chrome下可以直接访问,ie不支持)指向了这个原型,这里就是指向了@a,

function a(){ 
this.name = 'a'; 
} var a1 = new a(); 
alert(a1._proto_ == a.prototype)

结果:true

在访问属性的时候,会先在a1对象内部中寻找,如果没有,就会顺着_proto_指向的对象里面去寻找,这里会到@a中寻找,找到就返回值,没有找到就返回undefined,用个成语来形容,就是顺藤摸瓜嘛!

至此原型链的含义就出来了,由于原型对象也有一个_proto_指针,又指向了另一个原型,一个接一个,就形成了原型链。Object.prototype是最顶层的原型,所以如果修改了Object.prototype的属性,那么就影响了所有的对象。

在来看一段代码

function a(){ 
this.name = 'a'; 
} function b(){ 
this.age = 1; 
} 
b.prototype = new a(); 
alert(new b().name);

我们显示的将b的原型指向了a的一个实例,然后,b的实例也可以访问a的属性了。这就是javascript的继承了,那为什么b.prototype 指向的是a的一个实例,而不是直接指向a.prototype 呢?
b.prototype = new a.prototype;

如果像上面这么写,修改p.prototype中的属性,那么a的原型也会改变了,相当于是子类修改了父类,并且子类和父类的属性糅合在了一起,这显然是不合适的。换句话说,b也成为了@a的构造函数,a,b成了平级的关系。

我们可以下一个定义:

函数a 继承函数b 也就是让函数a成为函数b原型的一个实例的构造函数,构造函数里面声明的属性是函数a自己的,原型实例里面的属性就是继承b的

var $ = jQuery = function(selector,context){ 
//不可能在自己的构造函数中又一次构造自己,所以返回了另外一个构造函数的实例 
return new init(selector,context); 
} 
jQuery.fn = jQuery.prototype = { 
size:function(){ 
return this.length; 
} 
} function init (selector,context){ 
} 
init.prototype = jQuery.fn;; 
}

这是jquery的一段源码,我们在使用jquery的时候,并没有使用new关键字,那它是如何构造对象的呢?

用上面的知识,可以解释,jquery这里只是一个一般函数的调用,它返回了jquery原型的另外一个构造函数创建的对象,也就是new init()

Javascript 相关文章推荐
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
js改变Iframe中Src的方法
May 05 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 #Javascript
动态加载js、css等文件跨iframe实现
Feb 24 #Javascript
js操纵dom生成下拉列表框的方法
Feb 24 #Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 #Javascript
JS取request值以及自动执行使用示例
Feb 24 #Javascript
减少访问DOM的次数提升javascript性能
Feb 24 #Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 #Javascript
You might like
PHP中的array数组类型分析说明
2010/07/27 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
Vue Promise的axios请求封装详解
2018/08/13 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
python创建进程fork用法
2015/06/04 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
利用python开发app实战的方法
2019/07/09 Python
Python笔记之观察者模式
2019/11/20 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
关于打架的检讨书
2014/01/17 职场文书
护士求职自荐信范文
2014/03/19 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
音乐课外活动总结
2015/05/09 职场文书
党小组鉴定意见
2015/06/02 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫