JavaScript prototype背后的工作原理

“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。粗略来说就是：prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象（我们可以称这个对象为"prototype对象"）。

通过以此函数作为构造函数构造出来的对象都自动的拥有构造函数的prototype对象的成员属性和方法。

其中的要点是：

1. prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
2. prototype的值是一个对象
3. 可以任意修改函数的prototype属性的值。
4. 一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

//定义一个函数(构造函数),并定义一些属性和方法用来给另外一个构造函数构造出来的对象继承
var function1=function(){
    this.name="function1";
    this.saySomething=function(){alert("This's a method of "+this.name);}//定义一个方法
}

//定义另外一个构造函数
var function2=function(){
    
}

//将构造函数function2的prototype属性设置为一个由function1构造出来的对象，以便使由function2构造出来的对象(并且原本是没有任何属性和方法的对象)拥有function1的属性和方法
function2.prototype=new function1();
var obj1=new function1();
//obj1本来什么成员也没有，多得prototype机制，是它坐享其成地拥有了function1对象的属性和方法。
obj1.saySomething();

 

当然，上述例子离真正实际上使用的“继承”还相差甚远，但也体现出继承的意义：一个对象拥有了另一个对象的属性和方法。（如儿子拥有了老爸的血型和脾气，人类继承了动物的本能如进食和打斗等等）

以上部分大概阐述了prototype的概念和作用，但单凭这些还不够对prototype加深认识。现在来看看prototype背后是怎样工作的：

先来看看用new形式创建对象的过程：

//以func()作为构造函数创建一个对象obj
var obj=new func();

 

这个过程是这样的：javascript引擎首先遇到了关键字new后，马上开辟了一块内存，创建了一个空对象(并且将this指向这个对象)，接着执行构造函数func()对这个空对象进行构造(构造函数里面有什么属性和方法都一一给这个空白对象装配上去，这也就是为什么构造函数叫“构造函数”的原因)。

其实，new和执行构造函数之间还有一件事引擎没有显式地告诉我们，而是偷偷地做了，这就是给这个空对象赋予prototype对象。

这里不得不提到一个跟prototype一样同样是系统保留而且同样重要的东西：__proto__

__proto__是一个对象自动拥有的内置属性（请注意：prototype是函数的内置属性，__proto__是对象的内置属性，但它们最终都指向同一个对象，就是那个用来被继承的对象），用chrome和FF都可以访问到一个对象的__proto__属性，IE就不可以。

正是一个对象的__proto__指向着这个对象的构造函数的prototype对象，才使这个对象认识了它的构造函数的prototype对象，并拥有了这个prototype对象的属性和方法。

所以var obj=new func()这个过程更具体是这样的：

1. javascript解析引擎遇到new后，开辟一片内存并创建了一个空对象，并且将“this”指向这个空对象
2. javascript解析引擎将这个空对象的__proto__指向后面紧跟着的构造函数默认的prototype对象（一指向到prototype对象后，解析引擎就知道了“噢，这个对象要拥有这个prototype对象的属性和方法了”）
3. javascript解析引擎执行构造函数体内的代码，也就正式开始对这个空对象进行构造（或者说装配）的过程了(this.name="xxx",this.sayHello=function(){...}等等)
4. 对象被构造装配好，并赋值到等号左边的变量。