js javascript 原型链详解

看了许多大神的博文，才少许明白了js 中原型链的概念，下面给大家浅谈一下，顺便也是为了巩固自己

首先看原型链之前先来了解一下new关键字的作用，在许多高级语言中，new是必不可少的关键字，其作用是为了产生一个类的实例对象，然后利用对象来进行操作，当然，在js身上也有高级语言的一些影子，它也配套了new的关键字下面看一下代码

//声明一个类
function Person(name){
    this name = name;
}

//创建一个Person的实例zzh
var zzh = new Person("zzh");

这里出现了new 的关键字，现在看起来，和高级语言中的new 没什么太大的区别，下面我们看一下new关键字其实做了哪些工作

其实总的来说，js 里的new 就只做了三步工作:

1、先让上面的zzh变量指向堆里的一个空对象

var zzh = {};

2、让zzh指向的这个对象的_proto_属性去指向Person类的prototype属性所指向的对象

zzh._proto_ = Person.prototype;

3、最后让zzh来执行Person的方法

Person.call(zzh);

是不是有点绕，没关系，我们来看一下这个流程图，凡事都要用图来说话嘛



这样看上去是不是清晰了很多，其实new涉及的正是我们今天要谈的原型链继承



下面我们来看一下原型链

什么是原型链?

看下面这个代码.

alert(zzh._proto_);//[object Object]

我们可以看到这里它返回了一个对象，而这个对象正是Person.prototype指针指向的那个对象.



如果这样还不清楚那我们换种方式

function Person(name){
	this.name = name;
}
Person.prototype.talk = function(){
	//
	alert("i'm talking");
};
var zzh = new Person("zzh");
zzh.__proto__.talk();//"i'm talking"

我们发现它打印了"i'm talking"，这样就很显而易见了， 实例的_proto_属性正是访问到了Person的prototype所指向的那块内存

下面大家看一下这个图



这就是一个原型链，而这个链的顶端就是null，object的prototype的_proto_指向的是null，所以我们说object的原型对象就是整个原型链的顶端

另外:

Function的_proto_指向的是它自己的原型

alert(Function._proto_ == Function.prototype);//true

Function的原型的_proto_又指向Object的原型

alert(Function.prototype._proto_ == Object.prototype);//true

而Object的_proto_指向的是Function的原型对象

alert(Object._proto_ == Function.prototype);//true

这样看来就很绕,Function和Object都由Function创建，而Function的原型又由Object的原型创建。

我们说万事万物皆对象嘛，所以说Function的原型是一个对象没有错

而对象又由函数创建，因为js里的函数既是方法又是该类的构造器，这点也不冲突，所以，这也完全解释的通。



看一个不怎么绕的图



我相信看到这里一定就对原型链有一个了解了

如果博文中出现什么错误，来来来，板砖朝这拍！