JS原型链如何简单的理解

蜗牛IT

发布时间:17-11-2910:15

首先我们看一张经典的图,是不是很懵逼 。

哈哈!不用慌,我当年看也是很懵逼的。而且很多做前端很多年的都不一定了解这个图,所以如果你了解了,至少在JS领域,你的上限就会大大提高哟。

因为时间有限,本文我就带大家分析其中一条线路。基本上一条线路通了,其他的自然就走得通了

首先在分析之前,我们要弄清楚一个概念。 对象 函数 以及 原型 之间的关系。首先我们来谈谈的对象的问题,在JS中,任何事实存在的东西都是对象。包括函数也是一个对象。那么我们平时new出来的对象,看似是由函数实例出来的,但是,这其实是一个假象,这也是习惯于JAVA,C++等基于类语言的一个区别就在这里。

第一个概念我们要了解,JS的所有对象不是说是构造函数实例化(也就是new)而来的。在JS中,构造函数这个概念还是存在的,但是实例化这个概念在JS中并没有的。那么JS的对象哪里的来的?重点就是在于一个叫做原型属性的东西。也就说,JS对象其实是产生与构造函数的原型属性中的。

但是对象并不等于构造函数的原型属性,他们并不是相等;

也就是说,他们并不是一个对等关系。那么是啥关系,这个关系叫做 克隆 ,虽然没有具体代码去描述这个关系,但是JS还是给我们保留了一个属性去维持这个中关系。叫做__proto__,其实在图上我们也可以发现这个关系存在的。

比如,上图new foo(),很明显,这是一个实例的对象,构造函数是函数foo,那么对象和构造函数之间有一个__proto__连接着。

其实通过代码,我们也可以确认这个关系:

这也就是为什么,我们在构造函数原型属性上的写的方法和属性我们在实例化对象之后是可以访问到的原因,就是这个__proto__起了很大的一个作用。

但是到现在为止,原型链,链这个东西哪里去了?

好了,我们现在已经知道实例和构造函数以及构造函数原型属性之间的关系了。那么,构造函数的原型我们可以typeof一下,看看会发生什么。

那么意思它也是一个对象,那么它是对象,那么他的构造函数是谁?这个对象来自与哪里?我们其实看到图里面,foo.prototype其实是指向的是Object.prototype。然后我们可以试一试。

这其实就很清楚的说明一点,也就是说函数foo的原型对象是产生与Object实例的原型,那么这样,实例,对象原型,object原型之间就有了一条链式关系了,包括最后Object的原型属性也是往上链接的就是变成了null了。

其实我们再typeof null的时候就可能会纳闷,这旮旯怎么会是对象了。其实它不仅仅是对象,也是JS整个体系的最上一级。所有JS对象都是由它一级一级克隆下来的,想不到把,哈哈!

返回顶部