zoukankan      html  css  js  c++  java
  • 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);
            }
        }
    }
  • 相关阅读:
    iview modal关闭问题 自动关闭、异步关闭、定时关闭
    关于localStorage和sessionStorage
    promise简单应用
    Vue(JavaScript)按照内容搜索和排序功能实现
    javascripit常用的验证工具
    vue中$refs的用法及作用
    JS遍历数组的三种方法:map、forEach、filter
    Vue项目搭建,Git提交分支,token验证登录流程(重点)
    axios捕获401 赋值token
    Quartus系列:Quartus II 原理图输入设计
  • 原文地址:https://www.cnblogs.com/wishyouhappy/p/3800637.html
Copyright © 2011-2022 走看看