call, apply && bind, currying

简要概括:

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);
        }
    }
}

时间: 2024-11-03 11:09:38

call, apply &amp;&amp; bind, currying的相关文章

js中call、apply、bind的用法

今天看博客时,看到了这样的一段js代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 我想突然看到这样的一段代码,即使js能力再强的人,可能也需要花点时间去理解.像我这样的菜鸟就更不用说了.其实,原文已经对这端代码做出了解释,但我还是想用我的想法去解释这段代码. 上面那段代码涉及到了call.bind,所以我想先区别一下call.apply.bind的用法.这三个方法的用法非常相似,将函数绑定到上下文中,即用

深入浅出妙用Javascript中apply、call、bind

这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写.炫耀从来不是我的动机,好奇才是." 对于这句话,不能赞同更多,也让我下决心好好写这篇,网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙

深入理解JavaScript中的call、apply、bind方法的区别_javascript技巧

在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply.call apply:应用某一对象的一个方法,用另一个对象替换当前对象 call:调用一个对象的一个方法,以另一个对象替换当前对象 function pers

开启Javascript中apply、call、bind的用法之旅模式_javascript技巧

我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先给大家列出一段代码示例: function fruits() {} fru

Javascript中apply、call、bind的巧妙使用_javascript技巧

apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子: function fruits() {} fruits.prototype = { color: "red", say: function() { console

Javascript中call,apply,bind方法的详解与总结_javascript技巧

以下内容会分为如下小节: 1.call/apply/bind方法的来源 2.Function.prototype.call() 3.Function.prototype.apply() 3.1:找出数组中的最大数 3.2:将数组的空元素变为undefined 3.3:转换类似数组的对象 4.Function.prototype.bind() 5.绑定回调函数的对象 6.call,apply,bind方法的联系和区别 1.call/apply/bind方法的来源 首先,在使用call,apply,

【优雅代码】深入浅出 妙用Javascript中apply、call、bind

这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写.炫耀从来不是我的动机,好奇才是." 对于这句话,不能赞同更多,也让我下决心好好写这篇,网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙

浅析Javascript中bind()方法的使用与实现_javascript技巧

我们先来看一道题目 var write = document.write; write("hello"); //1.以上代码有什么问题 //2.正确操作是怎样的 不能正确执行,因为write函数丢掉了上下文,此时this的指向global或window对象,导致执行时提示非法调用异常,所以我们需要改变this的指向 正确的方案就是使用 bind/call/apply来改变this指向 bind方法 var write = document.write; write.bind(docum

10个JavaScript难点

1. 立即执行函数 立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行.它没有绑定任何事件,也无需等待任何异步操作: (function() {    // 代码    // ...    })();   function(){-}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数.立即执行函数也可以理解为立即调用一个匿名函数.立即执行函数最常见的应用场景就是: