call&apply&bind对比

call()apply()bind()都是用来干嘛的?我们先来看2个例子

  • 例1的运行结果:
    this指向当前对象

  • 例2的运行结果:
    this指向windows

比较一下这两者的this的差别,第一个打印里面的this指向obj;第二个全局声明的shows()函数,thiswindow。而 call()apply()bind()方法就是用来重新定义this这个对象的!如:
修改this指向db对象
以上返回的结果都是一致的,this指向了db对象,只是bind方法后面多了一个(),由此也得出结论,bind返回的是一个函数,你必须重新调用它才会被执行。那这个函数是重新生成的还是原来的函数呢,我们来验证一下,验证如下:
bind返回

我们看到bind返回的是一个函数,当拿这个函数和原来的函数进行比较时,发现返回结果为false,也就是bind返回的是一个新的函数,新的函数的this的指向是我们调用bind时,传递的是第一个参数的值。

那既然bind返回的是一个新的函数,那我们是否可以继续修改这个新函数的this的指向呢,验证代码如下:
修改bind返回函数this指向

我们看到当我们对bind返回的函数再次调用修改bind修改this的指向时,this的指向和之前是一样的,也就是我们无法再次修改bind返回函数的this的指向,也就是通过调用bind函数修改this指向以后,this的指向无法再次修改,会固定为第一次调用bind函数传的第一个参数的值。

  • 下面我们再测试一下通过callapply修改this指向以后,是否还可以再次更改this的指向
    再次调用call函数
    再次调用apply函数

经过验证,说明通过调用callapply函数修改this指向以后,this的指向可以被再次修改,而原因就是callapply是在运行时才修改原函数的this的指向,

  • 我们再对比一下callapplybind传参的情况:

传参差异对比

从上面4个结果可以看出:callbindapply这三个函数的第一个参数代表this的指向对象,第二个参数有差别了:

  • call的参数是直接放进去的,第二个,第三个第n个参数都用逗号分割,直接放到后面obj.myFun.call(db,“河南”,“深圳”,…,“string”)。
  • apply的所有参数都必须放在一个数组里面传进去obj.myFun.apply(“db”,[“河南”,“深圳”,…,“string”])。
  • bind除了返回是函数以外,它的参数和call是一样。当然三者的参数不限定是string类型,允许是各种类型,包括函数,对象等等!

总结如下:

  1. callapplybind三个函数都是用来更改函数this的指向的;
  2. callapply函数返回的是对应函数的返回值;bind函数返回一个新函数,需要再次调用bind返回的函数才会更改this的指向;
  3. 通过callapply更改this指向以后的对象,还可以再次调用callapply函数更改this的指向,而通过bind函数更改this以后,this的指向固定,再次调用bind函数,无法更改this的指向;
  4. 三个函数传参的方式有所区别,第一个参数都是代表this的指向,callbind的第二个,第三个,第n个参数都是用逗号分割,直接放到call或者bind方法里面;apply的第二个参数是一个数组,所有需要的参数需要放到一个数组里面再作为apply的第二个参数传进去
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
call、bindapply是JavaScript中的函数方法,用于改变函数的执行上下文,即this的指向。 1. call函数:通过call方法,可以调用一个函数,并且可以指定函数内部this的指向。此外,call还可以接受多个参数,以逗号分隔。参数的数量和类型由函数自身决定。 2. apply函数:与call类似,apply也可以调用一个函数,并且可以指定函数内部this的指向。但是,与call不同的是,apply接受的参数是一个数组,数组的每个元素会作为参数传递给函数。 3. bind函数:bind函数并不会立即调用函数,而是返回一个新的函数,这个新函数的执行上下文被永久地绑定到bind方法的第一个参数上。当调用这个新函数时,函数的this指向被绑定的对象。同时,bind方法也可以接受多个参数,并且这些参数会被传递给绑定的函数。 这些函数在实际应用中有着不同的场景。例如,call和apply经常与数组相关,可以方便地对数组中的元素进行处理,如获取最大值、最小值等。而bind函数则用于在事件处理函数中绑定this的指向,以确保函数在执行时的上下文正确。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [javascript中call,apply,bind函数用法示例](https://download.csdn.net/download/weixin_38664989/12985801)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [call、applybind详细讲解](https://blog.csdn.net/m0_60273757/article/details/121772420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值