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 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
微信小程序实现点击页面出现文字
Sep 21 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
10个实用的PHP代码片段
2011/09/02 PHP
PHP实现下载功能的代码
2012/09/29 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python生成随机数组的方法小结
2017/04/15 Python
python实现图片压缩代码实例
2019/08/12 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python字符串下标与切片及使用方法
2020/02/13 Python
施工资料员岗位职责
2014/01/06 职场文书
精彩自我鉴定
2014/01/16 职场文书
大学生创业策划书
2014/02/02 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL