Javascript 中的 Prototype属性

prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，而且特殊的地方便在于：它是一个给类的对象添加方法的方法！这一点可能听起来会有点乱，别急，下面我便通过实例对这一特殊的方法作已下讲解：

首先，我们要先了解一下类的概念，JavaScript 本身是一种面向对象的语言，它所涉及的元素根据其属性的不同都依附于某一个特定的类。我们所常见的类包括：数组变量(Array)、逻辑变量(Boolean)、日期变量(Date)、结构变量(Function)、数值变量(Number)、对象变量(Object)、字符串变量(String) 等，而相关的类的方法，也是程序员经常用到的，例如数组的push方法、日期的get系列方法、字符串的split方法等等，但是在实际的编程过程中不知道有没有感觉到现有方法的不足？prototype 方法应运而生！下面，将通过实例由浅入深讲解 prototype 的具体使用方法：

1、最简单的例子，了解 prototype：

(1) Number.add(num)：作用，数字相加

Number.prototype.add = function(num){    return(this + num);}alert((3).add(15)) // 显示 18

(2) Boolean.rev(): 作用，布尔变量取反

Boolean.prototype.rev = function(){    return(!this);}alert((true).rev()) // 显示 false

是不是很简单？这一节仅仅是告诉读者这种方法是这样运用的。

2、已有方法的实现和增强，初识 prototype：

(1) Array.push(new_element)

作用：在数组末尾加入一个新的元素

Array.prototype.push = function(new_element){    this[this.length] = new_element;    return this.length;}//让我们进一步来增强他，让他可以一次增加多个元素！Array.prototype.pushPro = function(arguments) {    var currentLength = this.length;    for (var i = 0; i < arguments.length; i++) {        this[currentLength + i] = arguments[i];    }         return this.length;}

应该不难看懂吧？

(2) String.length

作用：这实际上是 String 类的一个属性，但是由于 JavaScript 将全角、半角均视为是一个字符，在一些实际运用中可能会造成一定的问题，现在我们通过 prototype 来弥补这部不足。

String.prototype.cnLength = function(){    var arr = this.match(/[^\x00-\xff]/ig);    return this.length+(arr == null ? 0 : arr.length);}alert("EaseWe空间Spaces".cnLength()) // 显示 16

这里用到了一些正则表达式的方法和全角字符的编码原理，由于属于另两个比较大的类别，本文不加说明，请参考相关材料。

3、新功能的实现，深入 prototype：

在实际编程中所用到的肯定不只是已有方法的增强，更多的实行的功能的要求，下面我就举两个用 prototype 解决实际问题的例子：

(1) String.left()

问题：用过 vb 的应该都知道left函数，从字符串左边取 n 个字符，但是不足是将全角、半角均视为是一个字符，造成在中英文混排的版面中不能截取等长的字符串

作用：从字符串左边截取 n 个字符，并支持全角半角字符的区分

String.prototype.left = function(num, mode){    if(!/\d+/.test(num)){        return(this);    }    var str = this.substr(0, num);    if(!mode){        return str;    }     var n = str.cnLength() - str.length;    num = num - parseInt(n/2);    return this.substr(0,num);}alert("EaseWe空间Spaces".left(8)) // 显示 EaseWe空间alert("EaseWe空间Spaces".left(8,true)) // 显示 EaseWe空

本方法用到了上面所提到的String.cnLength()方法，自定义方法之间也能组合出一些不错的新方法呀！

//字符串去除空格String.prototype.trim(){    return this.replace(/(^\s+)|(\s+$)/g, "");}

(2) Date.DayDiff()

作用：计算出两个日期型变量的间隔时间（年、月、日、周）

Date.prototype.DayDiff = function(cDate, mode){    try{        cDate.getYear();    }catch(e){        return(0);    }    var base = 60*60*24*1000;    var result = Math.abs(this - cDate);    switch(mode){        case "y":            result/=base*365;            break;        case "m":            result/=base*365/12;            break;        case "w":            result/=base*7;            break;        default:            result/=base;            break;    }    return(Math.floor(result));}alert((new Date()).DayDiff((new Date(2002,0,1)))) // 显示 329alert((new Date()).DayDiff((new Date(2002,0,1)),"m")) // 显示 10

当然，也可以进一步扩充，得出响应的小时、分钟，甚至是秒。

(3) Number.fact()

作用：某一数字的阶乘

Number.prototype.fact=function(){    var num = Math.floor(this);    if(num<0){        return NaN;    }    if(num==0 || num==1){        return 1;    }else{        return (num*(num-1).fact());    }}alert((4).fact()) // 显示 24

这个方法主要是说明了递归的方法在 prototype 方法中也是可行的！

Javascript中的phototype是JS中比较难理解的一个部分

4、原型法设计模式

原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

5、Javascript的方法类型

• 类方法

• 对象方法

• 原型方法

function People(name){    this.name=name;    //对象方法    this.Introduce = function(){        alert("My name is "+this.name);    }}//类方法People.Run = function(){    alert("I can run");}//原型方法People.prototype.IntroduceChinese = function(){    alert("我的名字是"+this.name);}//测试var p1 = new People("Windking");p1.Introduce();//My name is WindkingPeople.Run();//I can runp1.IntroduceChinese(); //我的名字是Windking

6、prototype的含义

Javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。

先看一个实验的例子：

function baseClass(){    this.showMsg = function(){        alert("baseClass::showMsg");       }}function extendClass(){}extendClass.prototype = new baseClass();var instance = new extendClass();instance.showMsg(); // 显示baseClass::showMsg

我们首先定义了baseClass类，然后我们要定义extentClass，但是我们打算以baseClass的一个实例为原型，来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为：extendClass是以baseClass的一个实例为原型克隆创建的。

那么就会有一个问题，如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样？

下面是扩展实验2：

function baseClass(){    this.showMsg = function(){        alert("baseClass::showMsg");       }}function extendClass(){    this.showMsg =function (){        alert("extendClass::showMsg");    }}extendClass.prototype = new baseClass();var instance = new extendClass();instance.showMsg();//显示extendClass::showMsg

实验证明：函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

那么又会有一个新的问题：如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办？

答案是可以使用call:

extendClass.prototype = new baseClass();var instance = new extendClass();var baseinstance = new baseClass();baseinstance.showMsg.call(instance);//显示baseClass::showMsg

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用，调用它的对象方法showMsg” 好了，这里可能有人会问，为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别，我们想调用的是baseClass的对象方法

但是为什么既然有了var baseinstance = new baseClass();为什么不直接使用baseinstance.showMsg()呢？

补充：

call 方法

调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,  [,.argN]]]]])

参数
名称描述thisObj可选项。将被用作当前对象的对象。arg1, arg2,  , argN可选项。将被传递方法参数序列。说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

最后，下面这个代码如果理解清晰，那么这篇文章说的就已经理解了：

function baseClass(){    this.showMsg = function(){        alert("baseClass::showMsg");       }       this.baseShowMsg = function(){        alert("baseClass::baseShowMsg");    }}baseClass.showMsg = function(){    alert("baseClass::showMsg static");}function extendClass(){    this.showMsg = function (){        alert("extendClass::showMsg");    }}extendClass.showMsg = function(){    alert("extendClass::showMsg static")}extendClass.prototype = new baseClass();var instance = new extendClass();instance.showMsg(); //显示extendClass::showMsginstance.baseShowMsg(); //显示baseClass::baseShowMsginstance.showMsg(); //显示extendClass::showMsgbaseClass.showMsg.call(instance);//显示baseClass::showMsg staticvar baseinstance = new baseClass();baseinstance.showMsg.call(instance);//显示baseClass::showMsg

注：可参考 Javascript 函数定义方式  原型部分