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里的函数既是方法又是该类的构造器,这点也不冲突,所以,这也完全解释的通。


看一个不怎么绕的图

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

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

posted @ 2016-10-16 18:01  浩大王  阅读(333)  评论(0编辑  收藏  举报