JavaScript中的原型prototype

1.从需求认识原型

现在我们有一个很简单的需求就是让数组有计算总和的方法？如何实现呢？如下代码：

var arr = [1,2,3,4,5];//需要进行求和的数组

//给数组添加求和的方法
arr.sum = function(){
    var result = 0 ;
    //this指针指向arr数组
    for( var i = 0 ; i < this.length ;i++ ){
        result += this[i];
    }
    return result ;//将计算结果进行返回
}
alert(arr.sum());//查看结果

上面是对需求的一个简单实现，完成了任务，但是现在需求有改动了，我需要以后用到数组求和的时候不能总是写这个方法吧，类似于下面的代码？

var arr = [1,2,3,4,5];//需要进行求和的数组

//给数组添加求和的方法
arr.sum = function(){
    var result = 0 ;
    //this指针指向arr数组
    for( var i = 0 ; i < this.length ;i++ ){
        result += this[i];
    }
    return result ;//将计算结果进行返回
}
alert(arr.sum());//查看结果

var arr2 = [1,2,3,4,5];//需要进行求和的数组

//给数组添加求和的方法
arr2.sum = function(){
    var result = 0 ;
    //this指针指向arr2数组
    for( var i = 0 ; i < this.length ;i++ ){
        result += this[i];
    }
    return result ;//将计算结果进行返回
}
alert(arr2.sum());//查看结果

上面的代码没有对代码复用进行封装，在JavaScript中怎样对这种需求进行实现呢？

2.原型是什么呢

对上面的问题是可以解决的使用JavaScript中的原型进行解决，原型是什么呢？可以简答的理解为让能复用的属性和方法在内存中只存在一份（提高计算性能），不能每一次都创建一个方法进行计算。如下改进代码：

var arr = [1,2,3,4,5];
var arr2 = [33,66,99];

//给数组对象添加原型方法，使数组具有求和运算的能力
Array.prototype.sum = function(){
    var result = 0 ;
    for( var i = 0 ; i < this.length ; i++ ){
        result += this[i];
    }
    return result ;
}

//用原型进行改进过后的方法，以后只要是数组就可以直接调用了，相当于在JavaScript中的内置对象中直接添加方法
alert(arr.sum());
alert(arr2.sum());

这样我们的需求就完全实现了，也实现了对代码的复用，和计算效率的提高一举两得的事情，其实还可以这样理解原型方法和普通方法之间的区别，普通方法类似于CSS中的style样式，原型方法类似于CSS中的class可以实现复用。

3.JavaScript是基于原型设计架构的语言

上面我们已经看到了prototype的应用场景和应用，但是毫不夸张的说JavaScript这个语言就是基于原型进行设计架构的。需要注意的事项是：如果平时在我们的项目里面没有特殊的需求，最好不要对系统中的对象源码进行覆盖性操作，这样会影响项目组中其他人开发。如下代码：

var arr = [1,2,3]

//对系统内置对象Array中的push()方法进行覆盖操作
Array.prototype.push = function(){
    //arguments指向arr中的参数
    for(var i = 0 ; i < arguments.length ; i++){
        this[this.length] = arguments[i];
    }
    return this.length;
}
//调用自己实现的push方法
arr.push(4,5,6);
alert(arr);//[1,2,3,4,5,6]

注意：功能实现了，但是对系统原型方法进行破坏，所以团队项目中最好不要这样做！！！