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


Posted in Javascript onMay 31, 2016

apply()方法定义

函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同。
apply()方法接收两个参数,一个是对象,一个是参数数组。

apply()作用

1、用于延长函数的作用域

示例:

var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
sayColor();//"red"
sayColor.apply(o);//"blue"

这里通过apply()方法把函数动态绑定到了对象o上了,这时this指向o对象,得到结果"blue"。

2、对象不需要与方法有任何耦合关系

下面举个耦合的例子,看如何通过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()方法来完成

3、实现可变参数函数传参

下面一个计算任意数量数字平均值的函数

average(,,);
average();
average(,,,,,,,,);
average(,,,,,,,,,);

average函数是一个称为可变参数或可变元函数(函数的元数是指其期望的参数个数)的例子。

当然这个函数也可以写成一个接收数组的形式。

averageOfArray([,,]);
averageOfArray([]);
averageOfArray([,,,,,,,,]);
averageOfArray([,,,,,,,,,]);

使用可变参数的函数更简洁、优雅。可变参数函数具有便捷的语法,至少让调用者预先明确地知道提供了多少个参数。

如果我有这样一个数组

var scores=getAllScores();

如何使用average函数计算平均值呢?

1.可变参数函数版本。

这时就可以和apply()方法配合使用,这里因为函数并没用引用this变量,因此第一个参数我们传入一个null。代码如下:

var scores=getAllScores();
average.apply(null,scores);

2.直接参数为数组的形式

这里可以直接传入数组参数。

var scores=getAllScores();
averageOfArray(scores);

以上两种形式,个人觉得都是可以,反而第二种更简单。多知道一种方法,对于遇到别人写的函数时,可以轻松应对,不需要重构代码。这个好处反而更多。

4、实现可变参数方法的传值

示例: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方法的第一个参数给可变参数的方法提供一个接收者

附录一

average函数

function average(){
var args=[].slice.call(arguments);
var sum=args.reduce(function(prev,cur){
return prev+cur;
});
return parseInt(sum/args.length,);
}

averageOfArray函数

function averageOfArray(arr){ 
var sum=arr.reduce(function(prev,cur){
return prev+cur;
});
return parseInt(sum/arr.length,);
}

ES5 bind()方法

这个方法创建一个函数的实例,其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;
};
}
Javascript 相关文章推荐
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 #Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 #Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 #Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 #Javascript
BootStrap创建响应式导航条实例代码
May 31 #Javascript
浅谈js中的延迟执行和定时执行
May 31 #Javascript
温习Javascript基础语法之词法结构
May 31 #Javascript
You might like
PHP制作万年历
2015/01/07 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python学生管理系统学习笔记
2019/03/19 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python画微信表情符的实例代码
2019/10/09 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
体育专业学生自我评价范文
2014/01/17 职场文书
小露珠教学反思
2014/04/30 职场文书
平安工地建设方案
2014/05/06 职场文书
作文评语集锦
2014/12/25 职场文书
长城导游词400字
2015/01/30 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
食堂卫生管理制度
2015/08/04 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书