JavaScript：prototype属性使用方法

参考：
http://bokee.shinylife.net/blog/article.asp?id=455
http://dev.csdn.net/article/84222.shtm
http://www.cnblogs.com/goody9807/archive/2007/04/16/715109.html

一、基本使用方法

      prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。

简而言之，prototype就是“一个给类的对象添加方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“继承”的效果。

      具体来说，prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，当你用prototype编写一个类后，如果new一个新的对象，浏览器会自动把prototype中的内容替你附加在对象上。这样，通过利用prototype就可以在JavaScript中实现成员函数的定义，甚至是“继承”的效果。

      一个简单的示例如下：

Number.prototype.add = function(num){return(this+num);}

Number.prototype.add = function(num){return(this+num);}

这是对已有类添加方法。这样写，可以增强已有类的功能，例如可以给Array类增加push方法如下：

Array.prototype.push = function(new_element){
        this[this.length]=new_element;
        return this.length;
    }

Array.prototype.push = function(new_element){ this[this.length]=new_element; return this.length; }

对于自定义的类（或者称函数对象），也可以这样写：

function MyApplication() {
    this.counter = 0;
    this.map = new GMap2(document.getElementById("map_canvas"));
      this.map.setCenter(new GLatLng(39.917,116.397), 14);
      GEvent.bind(this.map, "click", this, this.onMapClick);
    }

    MyApplication.prototype.onMapClick = function() {
      this.counter++;
      alert("这是您第 " + this.counter + " 次点击地图");
    }

function MyApplication() { this.counter = 0; this.map = new GMap2(document.getElementById("map_canvas")); this.map.setCenter(new GLatLng(39.917,116.397), 14); GEvent.bind(this.map, "click", this, this.onMapClick); } MyApplication.prototype.onMapClick = function() { this.counter++; alert("这是您第 " + this.counter + " 次点击地图"); }
这里定义了创建地图的类，并且为其定义了“单击”事件的响应函数。

二、prototype的动态特性及弊端

     需要注意的是，prototype为我们提供了方便，使我们可以在类定义完成之后，仍可以随时为其添加方法、属性，随时添加随时使用——也就是prototype的定义具有动态性。但是越灵活的语言出现错误的可能性越大。这就需要我们在使用时，必须养成一些良好的习惯。

      “首先，如果可以动态添加属性和方法，那么很容易让人想到，当我调用时，我想要调用的属性或者方法存在不？这是一个很严肃的问题，如果当我们调用时根本没有该属性或者方法，将可能导致我们的脚本down掉。” 对于这个问题，在使用时我们以后可以按照下面的写法书写：

 function MyObject(name, size)
 {
    this.name = name;
    this.size = size;
 }

 MyObject.prototype.height = "2.26 meters";
 MyObject.prototype.tellHeight = function()
 {
    return "height of "+this.name+" is "+this.height;
 }

///////使用
var myobj1 = new MyObject("haha", 3);
if (myobj1.tellHeight)
{
    domDiv.innerHTML += myobj1.tellHeight()+";
}

function MyObject(name, size) { this.name = name; this.size = size; } MyObject.prototype.height = "2.26 meters"; MyObject.prototype.tellHeight = function() { return "height of "+this.name+" is "+this.height; } ///////使用 var myobj1 = new MyObject("haha", 3); if (myobj1.tellHeight) { domDiv.innerHTML += myobj1.tellHeight()+"; }

       属性和方法在不在的问题简单，可是属性和方法变不变化的问题可就严重了。在不在我们可以检测，变不变呢？比如，请看下面的代码：

function MyObject(name, size)
{
    this.name = name;
    this.size = size;
}

MyObject.prototype.color = "red";
MyObject.prototype.tellColor = function()
{
    return "color of "+this.name+" is "+this.color;
}

var myobj1 = new MyObject("tiddles", "7.5 meters");
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";



       MyObject.prototype.color = "green";



       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

function MyObject(name, size) { this.name = name; this.size = size; } MyObject.prototype.color = "red"; MyObject.prototype.tellColor = function() { return "color of "+this.name+" is "+this.color; } var myobj1 = new MyObject("tiddles", "7.5 meters"); domDiv.innerHTML += myobj1.tellColor()+"<br /><br />"; MyObject.prototype.color = "green"; domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

修改的是类MyObject的color属性。但是你惊奇的会看到你之前实例化的对象myobj1的属性值竟然也变化了：
color of tiddles is red
color of tiddles is green
上面是属性，还有方法，方法也是可以变的！

function MyObject(name, size)
{
    this.name = name;
    this.size = size;
}

MyObject.prototype.color = "red";
MyObject.prototype.tellColor = function()
{
    return "color of "+this.name+" is "+this.color;
}

var myobj1 = new MyObject("tiddles", "7.5 meters");
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

MyObject.prototype.color = "green";
MyObject.prototype.tellColor = function()
{
    return "your color of "+this.name+" is "+this.color;
}

domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

function MyObject(name, size) { this.name = name; this.size = size; } MyObject.prototype.color = "red"; MyObject.prototype.tellColor = function() { return "color of "+this.name+" is "+this.color; } var myobj1 = new MyObject("tiddles", "7.5 meters"); domDiv.innerHTML += myobj1.tellColor()+"<br /><br />"; MyObject.prototype.color = "green"; MyObject.prototype.tellColor = function() { return "your color of "+this.name+" is "+this.color; } domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

这段代码的结果是：

color of tiddles is red
your color of tiddles is green
Java和C#这些比较严格的语言，虽然降低了灵活性，但也减少了犯错误的可能。这样，即使一个新手，他写出的代码也不会与高手差太多。但是，像Javascript这样的脚本语言，由于太灵活，所以，一定要有好的代码编写习惯，否则出现了上面的问题，调试时可就难咯！

三、prototype的实现机制

可以说，prototype实际上是“引用”，而非“赋值”。也就是给一个类添加一个属性或者方法，是给它添加了个引用，而非赋值一份给它。看看下面的这个例子：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Test "prototype"</title>
<mce:script type="text/javascript"><!--
        function ClassA()
        {
            alert("a");
            this.a=function(){alert();};
        }
        function ClassB()
        {
            alert("b");
            this.b=function(){alert();};
        }

        ClassB.prototype.a=new ClassA();        //会导致弹出 a 对话框
        ClassB.prototype.xx = "xx";

        function initialize()
        {
            var objB1=new ClassB();                 //弹出 b 对话框
            var objB2=new ClassB();                 //弹出 b 对话框
            alert(objB1.a==objB2.a);                    //true
            alert(objB1.b==objB2.b);                //false
            alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: xx, objB2.xx: xx
            ClassB.prototype.xx = "yy";
            alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: yy
            objB2.xx = "zz";
            alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: zz
        }

// --></mce:script>
</head>
<body>
<mce:script type="text/javascript"><!--
        initialize();

// --></mce:script>
</body>
</html>

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Test "prototype"</title> <mce:script type="text/javascript"><!-- function ClassA() { alert("a"); this.a=function(){alert();}; } function ClassB() { alert("b"); this.b=function(){alert();}; } ClassB.prototype.a=new ClassA(); //会导致弹出 a 对话框 ClassB.prototype.xx = "xx"; function initialize() { var objB1=new ClassB(); //弹出 b 对话框 var objB2=new ClassB(); //弹出 b 对话框 alert(objB1.a==objB2.a); //true alert(objB1.b==objB2.b); //false alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: xx, objB2.xx: xx ClassB.prototype.xx = "yy"; alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: yy objB2.xx = "zz"; alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: zz } // --></mce:script> </head> <body> <mce:script type="text/javascript"><!-- initialize(); // --></mce:script> </body> </html>

其执行结果是依次弹出以下窗口：
a
b
b
true
false
objB1.xx: xx, objB2.xx: xx
objB1.xx: yy, objB2.xx: yy
objB1.xx: yy, objB2.xx: zz
相关的解释已经注释在代码中。从上面的代码可以发现，prototype只是给ClassB添加了ClassA实例的引用。因此，两个ClassB的实例中的a实例相等。

同时，ClassA的构造函数只在添加引用时被执行一次，此后ClassB的对象实例化时，只执行ClassB的构造函数。