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() {
        var currentLength = this.length;
        for (var i = 0; i < arguments.length; i++) {
            this[currentLength + i] = arguments[i];
        }
        return this.length;
    }
　 　应该不难看懂吧？以此类推，你可以考虑一下如何通过增强 Array.pop 来实现删除任意位置，任意多个元素（具体代码就不再细说了）

(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.Tlength() - 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.Tlength()方法，自定义方法之间也能组合出一些不错的新方法呀！

(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)))) -> 显示 329
     alert((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 方法中也是可行的！

 

<script type="text/javascript">
       function Person(id,name,age,sex){
           this.id = id;
           this.name = name;
           this.age = age;
           this.sex = sex;
       }
       Person.prototype.getName=function(){
           return this.name;
       }
       Person.prototype.addAge = function(iAge){
           this.age = this.age + iAge;
       }
       Person.prototype.getAge = function(){
           return this.age;
       }
       //加prototype表示，相当于JAVA中的实例方法（非静态的）
       //不加prototype表示，相当于JAVA中的静态方法（但是JAVA中的静态方法，也是可以用实例变量来引用到，
 但是JAVASCRIPT中不能用实例变量引用静态方法，只能用类名即Person）
       //再者，使用prototype那么，每个对象都会共用prototye的方法，或属性，对象自身不会在保留一份属性，
 //方法
       Person.prototype.jieChen = jieChen;
       //Person.jieChen = jieChen;

       function jieChen(n){
           return n == 1 ? 1:jieChen(n-1)*n;
       }
       function processClick(){
           var person = new Person('1001','JayChang',24,'male');
           person.addAge(2);
           alert(person.jieChen(3));
       }
    </script>

 

 或者

<script type="text/javascript">
	   function Person(id,name,age,sex){
	       this.id = id;
	       this.name = name;
	       this.age = age;
	       this.sex = sex;
	       this.getName = function(){
               return this.name;
           };
           this.addAge = function(iAge){
               this.age = this.age + iAge;
           };
           this.getAge = function(){
               return this.age;
           };
           this.jieChen = jieChen;
	   }
       function jieChen(n){
              return n == 1 ? 1:jieChen(n-1)*n;
       }
	   
	   
	   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;
        }
	</script>

 

   测试代码：

function processClick(){
           var array = new Array();
           var array2 = new Array(); 
           var p = new Person('0999','JayChang000',23,'male');
           for(var i = 1 ; i < 10 ;i ++){
               var p = new Person((1000+i)+"",'JayChang'+i,24+i,'male');
               array.push(p);
           }
           array2.pushPro(array);
           alert(array2.length);
           for(var i = 0 ; i < array2.length ; i ++){
               alert(array2[i].getName());
           }
}

 

 

在JavaScript 内部，对象的属性和方法追溯机制是通过所谓的prototype 链来实现的。当用new 操作符构造对象时，也会同时将构造函数的 prototype 对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器( 如Firefox) 可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

 

在原型链的最末端，就是Object 构造函数prototype 属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如 toString 等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date 和RegExp 等的prototype 都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。

 

这不就是“继承”吗？是的，这就是“继承”，是JavaScript 特有的“原型继承”。

 

“原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮孩子按自己的兴趣和爱好独立行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原型对象既有的财产，因为那可能会影响到其他孩子的利益。从这一点上看，原型对象又象一位严厉的父亲。

    覆盖父类的方法：

 

            function Person(name){
                alert('constuctor');
                this.name = name;
                this.sayHello=function(){
                    alert("Hi,I'm "+this.name);
                }
            }

            function Employee(name,salary){
                Person.call(this,name);
                this.sayHello = function(){
                    alert("Hi,I am "+name);    
                }
                this.showSalary = function(){
                    alert("My salary is"+" "+salary);
                }
            }

            Employee.prototype = new Person();
            
            //测试代码
            function processClick1(){
                 var p1 = new Person("JayChang");
                 var p2 = new Employee("Jerry",1234);
                p1.sayHello();
                p2.sayHello();
                p2.showSalary();
                alert(p1.constructor==p2.constructor);//Employee.prototype = new Person();那么结果为true
            }

 

 

//Employee集成Person的sayHello方法
 function Person(name){
                alert('constuctor');
                this.name = name;
                this.sayHello=function(){
                    alert("Hi,I'm "+this.name);
                }
            }

            function Employee(name,salary){
                Person.call(this,name);
                this.showSalary = function(){
                    alert("My salary is"+" "+salary);
                }
            }

            Employee.prototype = new Person();

            function processClick1(){
                 var p1 = new Person("JayChang");
                 var p2 = new Employee("Jerry",1234);
                p1.sayHello();
                p2.sayHello();
                p2.showSalary();
                alert(p1.constructor==p2.constructor);//Employee.prototype = new Person();那么结果为true
            }