美文网首页
JavaScript中的call,apply,bind方法

JavaScript中的call,apply,bind方法

作者: 小焲 | 来源:发表于2017-08-27 17:37 被阅读0次

    call,apply,bind一般用来指定this的环境。
    在了解他们的用法之前我们来看一段代码

    var a = {
        user:"小焲",
        fn:function(){
            console.log(this.user);
        }
    }
    a.fn(); //小焲
    var b = a.fn;
    b(); //undefined
    

    看到这里是不是很奇怪,同样的函数,为什么结果不一样。这是因为this的指向改变。如果想了解this指向问题请参考彻底理解js中this的指向,不必硬背。
    我们这里主要解决怎么让b能够输出this.user。

    1、call()

    var a = {
        user:"小焲",
        fn:function(){
            console.log(this.user); //小焲
        }
    }
    var b = a.fn;
    b.call(a);
    

    通过call,我们把b函数的this指向改为了a,执行之后就能输出‘小焲’。
    call方法除了第一个参数以外还可以添加多个参数,如下:

    var a = {
        user:"小焲",
        fn:function(e,ee){
            console.log(this.user); //小焲
            console.log(e+ee); //3
        }
    }
    var b = a.fn;
    b.call(a,1,2);
    

    对于函数fn(a,b,c),如果我们要改变this指向,只需将之改为fn(null,a,b,c),第一个参数为你要指向的目标,我这里取了null。这时this就默认指向window。

    2、apply()

    apply方法和call方法有些相似,它也可以改变this的指向,也可以传参。它和call唯一的区别就是,apply的传参必须用数组包裹,且只能穿数组这一个参数。如下

    var a = {
        user:"小焲",
        fn:function(e,ee){
            console.log(this.user); //小焲
            console.log(e+ee); //11
        }
    }
    var b = a.fn;
    b.apply(a,[10,1]);
    

    3、bind()

    bind方法也可以改变this指向,但是和call、apply方法有些不同。
    不过我们先来看看bind也像call一样使用会如何。

    var a = {
        user:"小焲",
        fn:function(){
            console.log(this.user);
        }
    }
    var b = a.fn;
    b.bind(a);
    //未执行
    

    是不是很奇怪。这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。

    var a = {
        user:"小焲",
        fn:function(){
            console.log(this.user); //小焲
        }
    }
    var b = a.fn;
    var c = b.bind(a);
    c();
    

    所以在对事件函数进行变更this指向的时候多用bind,如果使用call就视为函数自执行了,那不是我们想要的。

    同样样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。

    var a = {
        user:"小焲",
        fn:function(e,d,f){
            console.log(this.user); //小焲
            console.log(e,d,f); //10 1 2
        }
    }
    var b = a.fn;
    var c = b.bind(a,10);
    c(1,2);
    

    相关文章

      网友评论

          本文标题:JavaScript中的call,apply,bind方法

          本文链接:https://www.haomeiwen.com/subject/jhqidxtx.html