源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS中使用apply方法通过不同数量的参数调用函数的方法

  • 时间:2021-01-19 23:05 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS中使用apply方法通过不同数量的参数调用函数的方法
apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同。 apply()方法接收两个参数,一个是对象,一个是参数数组。 apply()作用 [b]1、用于延长函数的作用域[/b] 示例:
var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
sayColor();//"red"
sayColor.apply(o);//"blue" 
这里通过apply()方法把函数动态绑定到了对象o上了,这时this指向o对象,得到结果"blue"。 [b]2、对象不需要与方法有任何耦合关系[/b] 下面举个耦合的例子,看如何通过apply来解决这种耦合。
var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
o.sayColor=sayColor;
o.sayColor();//"blue" 
这里先将函数放到了对象o中,这里对象和方法就紧耦合到一起了,方法的调用必须通过对象o。 没有使用apply()和call()方法那样灵活。 重构上面代码,得到前例中的代码。
var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
sayColor();//"red"
sayColor.apply(o);//"blue" 
这里对象并没有绑定任何方法,只是在需要使用的时候,利用函数的apply或call方法来动态绑定。 对象和方法之间没有耦合在一起。这里还可以通过ES5提供的bind()方法来完成 [b]3、实现可变参数函数传参[/b] 下面一个计算任意数量数字平均值的函数
average(,,);
average();
average(,,,,,,,,);
average(,,,,,,,,,); 
average函数是一个称为可变参数或可变元函数(函数的元数是指其期望的参数个数)的例子。 当然这个函数也可以写成一个接收数组的形式。
averageOfArray([,,]);
averageOfArray([]);
averageOfArray([,,,,,,,,]);
averageOfArray([,,,,,,,,,]); 
使用可变参数的函数更简洁、优雅。可变参数函数具有便捷的语法,至少让调用者预先明确地知道提供了多少个参数。 如果我有这样一个数组
var scores=getAllScores(); 
如何使用average函数计算平均值呢? [b]1.可变参数函数版本。[/b] 这时就可以和apply()方法配合使用,这里因为函数并没用引用this变量,因此第一个参数我们传入一个null。代码如下:
var scores=getAllScores();
average.apply(null,scores); 
[b]2.直接参数为数组的形式[/b] 这里可以直接传入数组参数。
var scores=getAllScores();
averageOfArray(scores); 
以上两种形式,个人觉得都是可以,反而第二种更简单。多知道一种方法,对于遇到别人写的函数时,可以轻松应对,不需要重构代码。这个好处反而更多。 [b]4、实现可变参数方法的传值[/b] 示例:buffer对象包含一个可变参数的append方法,该方法添加元素到函数内部的state数组中。
var buffer={
state:[],
append:function(){
for(var i=,n=arguments.length;i<n;i++){
this.state.push(arguments[i]);
}
}
}; 
这时append方法可以接受任意多个参数。
buffer.append('Hello,');
buffer.append('firtName',' ','lastName','!');
buffer.append('newLine'); 
形式如
buffer.append(arg1,arg2,arg3,...) 
借助apply方法的this参数,我们可以指定一个可计算的数组调用append方法
buffer.append.apply(buffer,getInputStrings()); 
注意:这里的buffer很重要,如果传递不同的对象,则append方法将尝试修改该错误对象的state属性提示 •使用apply方法指定一个可计算的参数数组来调用可变参数的函数 •使用apply方法的第一个参数给可变参数的方法提供一个接收者 附录一 [b]average函数[/b]
function average(){
var args=[].slice.call(arguments);
var sum=args.reduce(function(prev,cur){
return prev+cur;
});
return parseInt(sum/args.length,);
} 
[b]averageOfArray函数 [/b]
function averageOfArray(arr){ 
var sum=arr.reduce(function(prev,cur){
return prev+cur;
});
return parseInt(sum/arr.length,);
} 
[b]ES5 bind()方法 [/b] 这个方法创建一个函数的实例,其this值会被绑定到传给bind()函数的值。 例如
var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
var oSayColor=sayColor.bind(o);
oSayColor();//"blue" 
兼容低版本,参考使用下面的版本 :
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = [].slice.call(arguments, ),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP? this: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
if (this.prototype) {
// Function.prototype doesn't have a prototype property
fNOP.prototype = this.prototype; 
}
fBound.prototype = new fNOP();
return fBound;
};
} 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部