JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JS中使用apply方法通过不同数量的参数调用函数的方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
BACkground-color: #008080">apply()方法定义
函数的apply()方法和call方法作用相同，区别在于接收的参数的方式不同。
apply()方法接收两个参数，一个是对象，一个是参数数组。
BACkground-color: #008080">apply()作用
1、用于延长函数的作用域
示例：
{Color:'blue'};
function sayColor()
{
console.log(thi
s.color
);
}
sayColor(
);//"red"
sayColor.apply(o
);//"blue"
这里通过apply()方法把函数动态绑定到了对象o上了，这时this指向o对象，得到结果"blue"。
2、对象不需要与方法有任何耦合关系
下面举个耦合的例子，看如何通过apply来解决这种耦合。
{Color:'blue'};
function sayColor()
{
console.log(thi
s.color
);
}
o.sayColor=sayColor;
o.sayColor(
);//"blue"
这里先将函数放到了对象o中，这里对象和方法就紧耦合到一起了，方法的调用必须通过对象o。
没有使用apply()和call()方法那样灵活。
重构上面代码，得到前例中的代码。
{Color:'blue'};
function sayColor()
{
console.log(thi
s.color
);
}
sayColor(
);//"red"
sayColor.apply(o
);//"blue"
这里对象并没有绑定任何方法，只是在需要使用的时候，利用函数的apply或call方法来动态绑定。
对象和方法之间没有耦合在一起。这里还可以通过ES5提供的bind()方法来完成
3、实现可变参数函数传参
下面一个计算任意数量数字平均值的函数
);
average(
);
average(,
);
average(,
);
average函数是一个称为可变参数或可变元函数(函数的元数是指其期望的参数个数)的例子。
当然这个函数也可以写成一个接收数组的形式。
);
averageOfArray([]
);
averageOfArray([,]
);
averageOfArray([,]
);
使用可变参数的函数更简洁、优雅。可变参数函数具有便捷的语法，至少让调用者预先明确地知道提供了多少个参数。
如果我有这样一个数组
);
BACkground-color: #008080">如何使用average函数计算平均值呢？
1.可变参数函数版本。
这时就可以和apply()方法配合使用，这里因为函数并没用引用this变量，因此第一个参数我们传入一个null。代码如下：
);
average.apply(null,scores
);
2.直接参数为数组的形式
这里可以直接传入数组参数。
);
averageOfArray(scores
);
以上两种形式，个人觉得都是可以，反而第二种更简单。多知道一种方法，对于遇到别人写的函数时，可以轻松应对，不需要重构代码。这个好处反而更多。
4、实现可变参数方法的传值
示例：buffer对象包含一个可变参数的append方法，该方法添加元素到函数内部的state数组中。
{
state:[],append:function()
{
for(var i=,n=argument
s.length;i
{
this.state.push(arguments[i]);
}
}
};
这时append方法可以接受任意多个参数。
Hello,'
);
buffer.append('firtName',' ','lastName','!'
);
buffer.append('newLine'
);
形式如
arg2,arg3,...)
借助apply方法的this参数，我们可以指定一个可计算的数组调用append方法
注意：这里的buffer很重要，如果传递不同的对象，则append方法将尝试修改该错误对象的state属性。
BACkground-color: #008080">提示
•使用apply方法指定一个可计算的参数数组来调用可变参数的函数
•使用apply方法的第一个参数给可变参数的方法提供一个接收者
BACkground-color: #008080">附录一
average函数
{
var args=[].slice.call(arguments
);
var sum=arg
s.reduce(function(prev,cur)
{
return prev+cur;
}
);
return parseInt(sum/arg
s.length,
);
}
averageOfArray函数
{
var sum=arr.reduce(function(prev,cur)
{
return prev+cur;
}
);
return parseInt(sum/arr.length,
);
}
ES5 bind()方法
这个方法创建一个函数的实例，其this值会被绑定到传给bind()函数的值。
例如
{Color:'blue'};
function sayColor()
{
console.log(thi
s.color
);
}
var oSayColor=sayColor
.bind(o
);
oSayColor(
);//"blue"
兼容低版本,参考使用下面的版本 ：
.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,aArg
s.concat(Array.prototype.slice.call(arguments))
);
};
if (thi
s.prototyp
E) {
// Function.prototype doesn't have a prototype property
fNO
p.prototype = thi
s.prototype;
}
fBound.prototype = new fNOP(
);
return fBound;
};
}
大佬总结
以上是大佬教程为你收集整理的JS中使用apply方法通过不同数量的参数调用函数的方法全部内容，希望文章能够帮你解决JS中使用apply方法通过不同数量的参数调用函数的方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
