javascript中的原型链深入理解

来源：互联网发布：aerial for windows 编辑：程序博客网时间：2024/04/29 10:30

javascript中的原型链深入理解

作者：字体：[增加减小] 类型：转载时间：2014-02-24 我要评论

要弄清楚原型链就要先弄清楚 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()

您可能感兴趣的文章:

JavaScript原型及原型链终极详解
浅谈javascript原型链与继承
深入浅出理解javaScript原型链
JavaScript中原型和原型链详解
js对象继承之原型链继承实例
javascript 原型链维护和继承详解
Javascript原型链和原型的一个误区
javascript学习笔记（五）原型和原型链详解
javascript教程之不完整的继承(js原型链)
Javascript原型链的原理详解

0 0