简要概括:
apply(): 将函数作为指定对象的方法来调用,传递给它的是指定的参数数组
——function.apply(thisobj, args) 或者 function.apply(thisobj, args)
bind(): 主要作用:将函数绑定到一个对象,返回一个新函数,通过可选的指定参数,作为指定对象的方法调用该方法
——function.bind(o) 或者是function.bind(o, args...);
call(): 类似apply,将函数作为指定对象的方法来调用,传递给它的是指定参数
——function.call(thisobj, args.....)
apply
function.apply(thisobj, args)
1、thisobj是调用function的对象,函数体内thisobj为this,如果参数为null则使用全局对象
2、返回调用函数function的返回值
eg:
var data = [1, 2, 3, 4, 5];
Math.max.apply(null, data); //5
var data = [1, 2, 3, 4, 5];
console.log(data.toString()); //1,2,3,4,5
//将默认的toString方法应用到一个对象上
Object.prototype.toString.apply(data); //"[object Array]"
call
function.call(thisobj, args...)——和apply用法类似,只是传递的参数不是数组
1、thisobj是调用function的对象,函数体内thisobj为this,如果参数为null则使用全局对象
2、返回调用函数function的返回值
eg:
//call
var data = [1, 2, 3, 4, 5];
Math.max.call(null, data); //NAN
Math.max.call(null, 1, 2, 3, 4, 5); //5
var data = [1, 2, 3, 4, 5];
Object.prototype.toString.call(data); //"[object Array]"
Object.prototype.toString.call(1); //"[object Number]"
bind
function.bind(o, args)
1、o要绑定在函数上的对象
2、args...要绑定在函数上的零个或者是多个函数值
3、返回一个新函数,该函数会当做o的方法调用,并向它传入args参数
eg1:
//bind
var sum = function( y){
return this.x + y;
}
var obj = {x: 1};
var objSum = sum.bind(obj);
objSum(3); //4
eg2:
function sum(){
var result=0;
for(var i=0, n=arguments.length; i<n; i++){
result += arguments[i];
}
return result;
}
var newSum = sum.bind(null, 1); //此处this值绑定到null,第一个参数绑定到1
newSum(2); //3
newSum(2, 3, 4); //10
eg3:
function sum(){
var result=0;
for(var i=0, n=arguments.length; i<n; i++){
result += arguments[i];
}
return result;
}
var newSum = sum.bind(null, 1, 2); //此处this值绑定到null,第一个和第二个参数绑定到1、2
newSum(2); //5
newSum(2, 3, 4); //12
例2和例3中包含了函数柯里化(currying)的思想,即将函数的默认参数和可变参数结合, 把接受多个参数的函数变换成接受一个单一参数的函数,并返回接受新函数,这个新函数能够接受原函数的参数。
currying主要功能是通过已有的函数动态创建函数,创建的新函数仍然通过已有的函数发生作用,只是通过传入更过的参数来简化函数的参数方面的调用
另外, 柯里话在DOM的回调函数中用的很多
eg1:
var curry = function(fn){
var args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(null, args.concat(Array.prototype.slice.call(arguments)));
}
}
function sum(){
var result=0;
for(var i=0, n=arguments.length; i<n; i++){
result += arguments[i];
}
return result;
}
var newSum= curry(sum, 1, 2);
newSum= newSum(1, 2, 3); //9
eg2:
var curry = function(fn){
var args=[];
return function(){
if(arguments.length){
[].push.apply(args,arguments);
return arguments.callee;
}else{
return fn.apply(this,args);
}
}
};
function sum(){
var result=0;
for(var i=0, n=arguments.length; i<n; i++){
result += arguments[i];
}
return result;
}
var newSum= curry(sum);
newSum= newSum(1)(2)(3);
newSum(); // 6
newSum(4)(); //10
了解更多currying可参考链接1, 链接二
另外, bind是ECMAScript5中新增的方法,在ECMAScript3中可以采用如下方式使用:
bind是ECMAScript5中新增的方法,在ECMAScript3中可以采用如下方式使用:
function bind(f, o){
if(f.bind){
return f.bind(o);
}else{
return function(){
return f.apply(o, arguments);
}
}
}