• js里function的apply vs. bind vs. call


    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply、bind、call,都在function的原型里。这3种方法的异同在stackoverflow的这个答案里说的最清楚,下面只是自己的理解。

    1. 异同

    这3种方式的相同点是:改变了func调用的上下文,链接到新的对象上。这使得任何函数都可以被其他对象调用,即使这个对象没有定义该函数。

    区别是:调用的方式不同。

    1. call: 最简单,立即调用,按顺序传参
    2. apply:立即调用,按数组传参
    3. bind: 延迟调用(返回一个新的func),按顺序传参

    2. 例子

    上代码:

    var person = {
        name: "Alex",
        code: function(lang1, lang2, lang3, lang4){
    		//在这里断点,观察arguments和lang1-4的区别
            console.log(this.name + " code in " + arguments.toString());
        }
    };
    
    var machine = {
        name: "alphago"
    };
    
    //普通的调用方式
    person.code("C#");
    
    //call是按顺序传参
    person.code.call(machine, "python", "perl");
    
    //apply是按数组传参,如果不能转成数组,抛TypeError
    person.code.apply(machine, ["C", "C++", "lisp"]);
    //Uncaught TypeError: CreateListFromArrayLike called on non-object
    //person.code.apply(machine, "C", "C++", "lisp");
    //不报错,但转出的数组为空
    //person.code.apply(machine, {lang1:"C", lang2:"C++", lang3:"lisp"});
    
    var func = person.code.bind(machine);
    func("python", "perl");
    //按顺序传参,类似call
    //func(["C", "C++", "lisp"]);
    
    var func1 = person.code.bind(machine, "python", "perl");
    func1("C#");
    

    3. 使用场景

    1. 如果是可变数量的参数,那么很明显只能使用apply;
    2. 如果要延迟调用某个函数,那么只能使用bind;
    3. bind能够实现所谓的柯里化(function currying),即先传一部分参数进去,使用的时候再传另一部分参数,这种场景下也只能使用bind。
  • 相关阅读:
    js简直了,连大小都不能直接比,还变量提升,这个是挖了多少坑啊,故意的把,,,,写起来又不简单,运行起来又不是很稳,很迷啊
    bootstrap 强制左移
    图片轮播/无缝滚动的原理
    jQuery放大镜的原理
    下拉列表的两种实现方式
    Html css图片文本对齐问题
    一键换肤原理
    setInterval与clearInterval用法
    jQuery课堂测验
    Css画圣诞树
  • 原文地址:https://www.cnblogs.com/AlexanderYao/p/5653441.html
Copyright © 2020-2023  润新知