js 原型，原型链，原型链继承浅析

对于网上的关于原型，原型链和原型链继承的晦涩语言说明就不累赘了，复制粘贴过来再解释一遍怕本身也整蒙了，本人最怕空气忽然安静，四目对视，大眼对小眼，一脸懵逼。

咱们先看下面👇的这张图：

首先先记住一句话，无论是什么语言，核心思想都是：万物皆对象。

 

直接看上图，有一个函数 function FOO( ){};在 js 中函数都有一个 prototype 方法，这就是函数的原型。(constructor 方法是指向它的函数，本文不作详细解释。）

 

图中 f1 = new FOO ( );在 js 中每一个对象都会有一个 __proto__ 属性，祖师爷规定的，因此 f1 中也会有 __proto__ 属性，它指向 FOO 函数的 prototype，咱们说万物皆对象，因此 FOO 函数的 prototype 方法也是一个对象，那么它也有一个 __proto__ 属性，那么它的 __proto__ 属性指向它上一级的 prototype，(如上图)，万物接对象，因此最顶层的就是一个 Object 对象，它也有 __proto__ 属性，可是它的 __proto__ 上层没有东西了，因此指向 null。这样造成的链式就是原型链了。

 

在对上图作完解释后感受仍是会有点不理解，下面咱们将上述文言文转化为白话文。

 

如今有一个函数 function 爹( ){ }; 爹里面必定有一个方法叫 prototype，即原型。

 

爹.prototype.money = 10000; 在爹的 prototype 里加一个 money 属性，值为 10000;

 

如今 儿子 = new 爹 ( ); 儿子如今是个对象，那它就有个 __proto__ 属性，它是从爹 new 出来的实例，那它的 __proto__ 指向爹的 prototype;

 

那么儿子就能够从爹那里继承 money = 10000;即 console.log( 儿子.money ); // 10000

 

咱们说万物皆对象，那爹的 prototype 里面也应该有个 __proto__ 属性，它指向爷爷的 prototype ( 原型 )；爷爷的 prototype 也有 __proto__ 属性，指向太爷爷的 prototype ( 原型 ) ...... 万物皆对象，最后会指向 Object 的 prototype ( 原型 ); 可是祖宗总得有个头，最后一个祖宗，即 Object ，它的 __proto__ 指向 null ，这就造成了原型链。知识遗漏：null 没有 prototype (原型)。

 

上面的白话文以下图所示。

 

上面咱们将原型，原型链和原型链继承简单介绍完了，如今着重看一下原型链继承。

咱们用构造函数的方法从爹( father ) 那里 new 了一个儿子( son );当打印 son.money 的时候发现儿子居然也有 10000 块，这就说明儿子已经从爹那里继承了 money = 10000 这个属性了。那若是这个儿子是个败家子，他从爹那里继承过来 10000 立马买了个爱粪叉，还剩不到 10000 会是什么样子。以下图所示。

从上图能够看出儿子从爹那里继承过来的属性其实就至关于复制了一份，即从爹那里复制了一张 money = 10000 的银行卡，本质上并无去花爹卡里的钱，因此小儿子也能够从爹那里复制一张银行卡，卡里 money = 10000。这样就解释通了在爹的 prototype ( 原型 )里的共有属性任何儿子都能继承，若是以为从爹那里继承的方法很差的话能够本身重写，并不影响其余儿子去使用从爹那里继承的方法。

 

若是说爹的 prototype 里面的方法变了儿子要是用的话会怎么样呢，看了上面的解释应该很容易答出来了，由于儿子是继承爹的，因此爹的变化了，那么儿子的也会跟这变。以下图

 

好了，上述就是本人对 js 原型，原型链和原型链继承的我的理解了，再深层次的理解你们能够看看网上其余大神的解释，上述表达若是哪里有不当之处或者遗漏的地方请大神指出。