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

最新推荐文章于 2024-09-05 15:47:23 发布

weixin_30335353

最新推荐文章于 2024-09-05 15:47:23 发布

阅读量62

点赞数

原文链接：http://www.cnblogs.com/weijiutao/p/10606988.html

版权

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

我们先看下面?的这张图：

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

直接看上图，有一个函数 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 里面的方法变了儿子要是用的话会怎么样呢，看了上面的解释应该很容易答出来了，因为儿子是继承爹的，所以爹的变化了，那么儿子的也会跟这变。如下图