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]
注意:功能实现了,但是对系统原型方法进行破坏,所以团队项目中最好不要这样做!!!