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 EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
使用python实现飞机大战游戏
2020/03/23 Python
Pygame框架实现飞机大战
2020/08/07 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
机械机修工岗位职责
2014/08/03 职场文书
励志演讲稿600字
2014/08/21 职场文书
平面设计师岗位职责
2014/09/18 职场文书
晚会开幕词范文
2016/03/04 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL