个人觉得很好理解的JavaScript原型和继承

前几天看了《再谈js面向对象编程》，当时就请教哈大神，发现文章有的地方可能会造成误导（或者说和ECMA有出入），后来自己翻一翻ECMA，总算找到“标准”的理解……

本文适合初学者，特别是对构造函数、原型和原型链概念比较模糊的，大牛请路过，好了，让我们一步步来看看 js 的原型（链）到底有多神秘……

一、函数创建过程

在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情，举一个空函数的例子：

当我们在代码里面声明这么一个空函数，js解析的本质是（肤浅理解有待深入）：

1、创建一个对象（有constructor属性及[[Prototype]]属性），根据ECMA，其中[[Prototype]]属性不可见、不可枚举

2、创建一个函数（有name、prototype属性），再通过prototype属性 引用 刚才创建的对象

3、创建变量A，同时把函数的 引用 赋值给变量A

如下图所示：





（注意图中都是“ 引用 ”类型）

每个函数的创建都经历上述过程。

二、构造函数

那么什么是构造函数呢？

按照ECMA的定义

Constructor is a function that creates and initializes the newly created object.

构造函数是用来新建同时初始化一个新对象的函数。

什么样的函数可以用来创建同时初始化新对象呢？答案是：任何一个函数，包括空函数。

所以，结论是：任何一个函数都可以是构造函数。

三、原型

根据前面空函数的创建图示，我们知道每个函数在创建的时候都自动添加了prototype属性，这就是函数的原型，从图中可知其实质就是对一个对象的引用（这个对象暂且取名原型对象）。

我们可以对函数的原型对象进行操作，和普通的对象无异！一起来证实一下。

围绕刚才创建的空函数，这次给空函数增加一些代码：

第7~9行代码就是给函数的原型对象增加一个say属性并引用一个匿名函数，根据“函数创建”过程，图解如下：





（灰色背景就是在空函数基础上增加的属性）

简单说原型就是函数的一个属性，在函数的创建过程中由js编译器自动添加。

那么原型有什么用呢？

先了解下new运算符，如下：

这是通过构造函数来创建对象的方式，那么创建对象为什么要这样创建而不是直接

var a1 = {};

呢？这就涉及new的具体步骤了，这里的new操作可以分成三步(以a1的创建为例)：

1、新建一个对象并赋值给变量a1：

var a1 = {};

2、把这个对象的

[[Prototype]]

属性指向函数

A

的原型对象：

a1.[[Prototype]] = A.prototype

3、调用函数A，同时把

this

指向1中创建的对象

a1

，对对象进行初始化：

A.apply(a1,arguments)

其结构图示如下：





从图中看到，无论是对象a1还是a2，都有一个属性保存了对函数

A

的原型对象的引用，对于这些对象来说，一些公用的方法可以在函数的原型中找到，节省了内存空间。

四、原型链

了解了new运算符以及原型的作用之后，一起来看看什么是[[Prototype]]？以及对象如何沿着这个引用来进行属性的查找？

在js的世界里，每个对象默认都有一个[[Prototype]]属性，其保存着的地址就构成了对象的原型链，它是由js编译器在对象 被创建 的时候自动添加的，其取值由

new

运算符的右侧参数决定：当我们

var object1 = {};

的时候，

object1

的

[[Prototype]]

就指向Object构造函数的原型对象，因为

var
object1 = {};

实质上等于

var object = new Object();

（原因可参照上述对

new A

的分析过程）。

对象在查找某个属性的时候，会首先遍历自身的属性，如果没有则会继续查找

[[Prototype]]

引用的对象，如果再没有则继续查找

[[Prototype]].[[Prototype]]

引用的对象，依次类推，直到

[[Prototype]].….[[Prototype]]

为

undefined

（

Object

的

[[Prototype]]

就是

undefined

）

如上图所示：

简单说就是通过对象的[[Prototype]]保存对另一个对象的引用，通过这个引用往上进行属性的查找，这就是原型链。

五、继承

有了原型链的概念，就可以进行继承。

这个时候产生了B的原型B.prototype

原型本身就是一个Object对象，我们可以看看里面放着哪些数据

B.prototype 实际上就是 {constructor : B , [[Prototype]] : Object.prototype}

因为prototype本身是一个Object对象的实例，所以其原型链指向的是Object的原型

但是我们只想把B的原型链指向A，如何实现？

第一种是通过改变原型链引用地址

ECMA中并没有__proto__这个方法，这个是ff、chrome等js解释器添加的，等同于EMCA的[[Prototype]]，这不是标准方法，那么如何运用标准方法呢？

我们知道new操作的时候，实际上只是把实例对象的原型链指向了构造函数的prototype地址块，那么我们可以这样操作

这样产生的结果是：

产生一个A的实例，同时赋值给B的原型，也即

B.prototype 相当于对象 {width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype}

这样就把A的原型通过

B.prototype.[[Prototype]]

这个对象属性保存起来，构成了原型的链接

但是注意，这样B产生的对象的构造函数发生了改变，因为在B中没有constructor属性，只能从原型链找到

A.prototype

，读出constructor:A

所以我们还要人为设回B本身

图示如下，其中红色部分代表原型链：





作为初学者浅陋的理解，本文目的在于更具象地去理解js的面向对象，疏漏之处请指正。