zoukankan      html  css  js  c++  java
  • call、apply以及bind

    call与apply都可以改变js的this指向,两者最主要的区别就是使用时传参的不同,apply的参数可以以数组的形式传进来,但是call方法的参数必须要一个一个的传进来,就像这样。

    func.call(this, arg1, arg2);
    var arr= [arg1, arg2];
    func.apply(this,arr);

    可以看出call与apply主要有两个参数,第一个是改变this的指向,如下:

    function log(){
        console.log(this.color);
    }
    
    var obj={
        color:"red"
    };
    
    log.call(obj);

    这里的输出结果就是red,当然,我们还可以使用

    log.apply(obj);

    这两种方式都改变了this的指向,使得log方法的this变成obj,从而输出red。这是call与apply的一种用法,除了改变this指向之外,我们还可以给原本的方法传入参数。

    var arr1=[1,2,3];
    var arr2=[5,6,9];
    Array.prototype.push.apply(arr1,arr2);
    console.log(arr1);

    [ 1, 2, 3, 5, 6, 9 ]

    这里的用法就是先把数组的push方法的this指向了arr1,然后把arr2作为push方法的参数传了进来,所以才会输出arr1的时候的值是arr1和arr2的合并。这个例子也说明了apply方法和call之间的区别。apply传进去的是arr2整个数组,而如果使用call方法则必须把这个数组的元素一个个的拆开传进去。接着我们来继续看例子:

    var arr1=[1,2,3];
    var max=Math.max.apply(null,arr1);
    console.log(max);

    3

    这次我们做的是找出数组中的最大值,需要注意的是这个例子中我们的第一个参数写的是null,那是因为这里并没有改变this的指向,而是借用了max这个方法使用在arr1的参数中。再看,这次我们想写个log函数,输出传进来的内容。

    function log(v){
        console.log(v)
    }
    log(1);
    log(1,2);
    
    1
    1

    这种写法是不行的,因为当我们传的参数不止一个的时候就出问题了,剩下的都无法输出,解决办法之一就是使用apply。

    function log(){
        console.log.apply(null,arguments)
    }
    log(1);
    log(1,2);
    
    1
    1 2

    我们还可以这样写

    function log(){
        var len=arguments.length;
        for(var i= 0;i<len;i++) {
            console.log(arguments[i]);
        }
    }
    log(1,2,3);
    
    1
    2
    3

    至于bind方法,看个例子

    var obj={
        color:"red"
    };
    function log(){
        console.log(this.color)
    }
    var func=log.bind(obj);
    func();
    
    red

    所以,可以把bind理解为绑定this值。

    最后引用一段coco大神的总结

    • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
    • apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
    • apply 、 call 、bind 三者都可以利用后续参数传参;
    • bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
  • 相关阅读:
    loj 6035 「雅礼集训 2017 Day4」洗衣服
    BZOJ 3251 树上三角形
    UwrhrQNgRh
    百度之星2018资格赛1002题解
    [CF-676B]PYRAMID OF GLASSES
    【CF-371C】Hamburgers
    洛谷P1012拼数——字符串排序
    位运算详解及应用
    NOIP 2014 Day2 T1 无线网络发射器
    写代码要注意的几点(2)
  • 原文地址:https://www.cnblogs.com/jelly7723/p/5536055.html
Copyright © 2011-2022 走看看