• call、bind与apply函数的区别


    之前写过JavaScript中this的指向那篇博客中的最后一个关于修改定时器的this指向的时候,其实还有个方法是使用bind()函数来改变,且继承那篇博客中,也有写到call()的方法去将父类的属性传至子类属性中.那么,我们顺带来看看,call、bind以及apply三个函数.

    首先,我先解释下,为什么我将这三个函数放在一起写,先叙述下它们的相似之处:

    1.他们都是用来改变函数的this对象的指向的.

    2.第一个参数都是this要指向的对象.

    3.它们都可以利用后续参数来传参.

    那他们的区别又在哪里嘞?先看看下面的代码.

    var yee={
    name:
    '小李', sex:"女", age:23, foo:function(){ alert(this.name+","+this.sex+"年龄"+this.age)} } var gene={ name:"小黄", sex:"女", age:24}
    yee.foo();

    结果显而易见,一个简单的调用.那么,我们怎么使用yee中的foo()函数来显示gene中的数据呢.(如下)

    var yee={
    name:'小李',
    sex:"女",
    age:23,
    foo:function(){
    alert(this.name+","+this.sex+"年龄"+this.age)}
    }
    
    var gene={
    name:"小黄",
    sex:"女",
    age:24}
    yee.foo.call(gene)

    于apply而言,也是一样的:

    var yee={
    name:'小李',
    sex:"女",
    age:23,
    foo:function(){
    alert(this.name+","+this.sex+"年龄"+this.age)}
    }
    
    var gene={
    name:"小黄",
    sex:"女",
    age:24}
    yee.foo.apply(gene)

    但是,bind与apply以及call不相同,看下面:

    var yee={
    name:'小李',
    sex:"女",
    age:23,
    foo:function(){
    alert(this.name+","+this.sex+"年龄"+this.age)}
    }
    
    var gene={
    name:"小黄",
    sex:"女",
    age:24}
    yee.foo.bind(gene)();

    这样的话,区别应该很明显了吧.call与apply都是对函数直接进行调用,而bind方法返回的仍然是一个函数,因此我们在后面还是需要()来进行调用才可以.

    接下来,我们把上述例子改一点点,来看看:

    这里,我们将foo方法中多加了两个参数,我们先用call/apply的参数进行传参.

    首先,对于call而言,就加上:

    yee.foo.call(gene,"成都","林湾村铁道学院")

    而对于apply函数而言,是:

    yee.foo.apply(gene,["成都","林湾村铁道学院"])

    那么,这个区别也可以看出来啦!call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素和foo方法中一一对应,这就是它们之间的区别.

    但是,由于bind返回的仍然是一个函数,所以我们还可以在调用时候再进行传参.

    yee.foo.bind(gene)("成都","林湾村铁道学院")

    那我们在这里再说说如果使用bind()方式如何修改定时器中this的指向吧.这里,或许有人会想问,既然call、apply与bind函数都可以改变this.因为,call与apply再修改this指向后,函数会立即执行,但bind返回的就是一个新的函数,它会创建一个与原来函数主体相同的新韩淑,新函数中的this指向传入的对象.

    var name="Window";
    var obj={
    name:"This is obj",
    fun:function(){
    var time=null;
    clearInterval(time);
    time=setInterval(function(){
    console.log(this.name);//This is obj
    }.bind(this),2000)
    }
    }
  • 相关阅读:
    org.apache.ibatis.binding.BindingException: Parameter 'username' not found. Available parameters are [0, 1, param1, param2]
    在Springboot中Parameter 'XXX' not found. Available parameters are [1, 0, param1, param2]问题
    Springcould学习总结
    XXl-job基于springbooot的基本配置
    Nginx反向代理简单配置
    redis哨兵机制及配置
    redis的主从复制
    jedis在Java环境操作redis
    liunx环境redis的安装
    express之cookie和session
  • 原文地址:https://www.cnblogs.com/ljylearnsmore/p/14496783.html
Copyright © 2020-2023  润新知