剖析javscript中类、prototype及new实例之间的关系

js的对象是一个包含属性、方法的 key/value 的Object，构造对象就是向一个Object中添加属性和方法，因此我们可以样来构造对象

var obj = {}
obj.title = "obj";
obj.getTitle = function(){ return this.title; }

显然这样构造对象的效率不高，难以维护，通过实例化“类”获取对象将更加优雅，js对类的支持与C++/Java等机制不同，js支持原型机制来完成类定义，其过程简单描述是将prototype定义的属性、方法复制到新对象中，并执行构造函数，直观描述如下：

1） 定义一个类，如ClassA = function(){}; ClassA就是一个对象，但是这个对象由js关联到一个原型对象prototype，并且将prototype的属性constructor默认设置为ClassA;

2） 向ClassA的原型对象prototype添加属性和方法

3） new 操作创建了一个新的对象，并把prototype对象所有的属性、方法复制到新对象，并执ClassA 函数完成构造

总结：

js的类-对象机制三个对象参与了过程，一个是Class，一个是关联到Class对象的原型对象prototype，最后是被new出来的Class的实例。

Class是一个函数（函数也是对象），其作用是构造函数，在new的时候将被执行，默认被赋值给prototype.constructor

prototype对象是一个模版，描述了将要添加给实例的属性和方法

被new出来的实例，一方面赋值了prototype中除开constructor所有的属性，以及在Class函数（构造函数）执行时添加的属性，并通过构造函数完成初始赋值。

js的new核心操作就是通过复制原型对象（prototype）到新实例完成class到object的过程，这也是js实现继承的核心思路。

测试代码如下，红色代码用于显示测试结果的：

(function(){

        ClassA = function(){

               this.title = "ClassA Instance!";

        }

        

        ClassA.title = "ClassA";                      //这个属性属于对象ClassA

        ClassA.getTitle = function(){         	//这个方法属于对象ClassA

               return this.title;                    //属于ClassA的东西，与new出来的ClassA的实例没有一毛钱关系

        }

        

        //为ClassA关联的prototype对象赋值，构造原型，这个原型将被复制到新对象；

        ClassA.prototype ={

               getTitle:function(){ return this.title }

        }

        var allName = "---------下面是class属性---\n";

        for (pname in ClassA){

               allName += pname + "=" + ClassA[pname] + "\n"

        }


        allName += "---------下面是prototype属性---\n";
        for (pname in ClassA.prototype){

               allName += pname + "=" + ClassA.prototype[pname] + "\n"

        }

        

        var classObj = new ClassA();

        allName += "---------下面是ClassA实例classObj的属性方法---\n";

        for (pname in classObj){

               allName += pname + "=" + classObj[pname] + "\n"

        }
        allName += "---------下面是ClassA.prototype.getTitle的值---\n";
        allName += "ClassA.prototype.getTitle="+ClassA.prototype.getTitle();

        allName += "\n---------下面是ClassA.getTitle的值---\n";

        allName += "ClassA.getTitle="+ClassA.getTitle();

        allName += "---------下面是classObj.getTitle的值---\n";

        allName += "下面是classObj.getTitle="+classObj.getTitle();

        alert(allName);     
})()

运行的结果如下：

---------下面是class属性---
title=ClassA
getTitle=function () {
    return this.title;
}
---------下面是ClassA.prototype属性---
name=_name_
getTitle=function () {
    return this.title;
}
constructor=function () {
    this.title = "ClassA Instance!";
}
---------下面是ClassA实例classObj的属性方法---
title=ClassA Instance!
name=_name_
getTitle=function () {
    return this.title;
}
constructor=function () {
    this.title = "ClassA Instance!";
}
---------下面是ClassA.getTitle的值---
ClassA.getTitle=ClassA
---------下面是classObj.getTitle的值---
classObj.getTitle=ClassA Instance!