源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 15|回复: 14

[JavaScript] javascript中的原型链深入理解

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-2-24 15:23:51 | 显示全部楼层 |阅读模式
要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言 要弄清楚原型链就要先弄清楚 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()
回复

使用道具 举报

1

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2022-9-19 20:21:27 | 显示全部楼层
啦啦啦啦啦啦哈哈哈
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-21 09:03:34 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

61

积分

注册会员

Rank: 2

积分
61
发表于 2023-5-11 21:39:15 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-7-2 21:40:33 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-2 21:39:13 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2024-7-24 04:21:33 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

20

主题

6240

回帖

105

积分

注册会员

Rank: 2

积分
105
发表于 2024-9-7 21:31:59 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2024-9-22 20:33:53 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

14

主题

2973

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-10-8 03:41:57 | 显示全部楼层
。。。。。。。。。。。。。。。
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 01:58 , Processed in 0.069030 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表