Js中call、apply和bind的区别

call、apply和bind三个方法都可以用来改变函数的this指向

call()

call( ) 是接收一个及其以上的参数,第一个参数表示this要指向的对象,其余参数表示调用函数需要传入的参数,返回调用函数的返回结果,属于立即执行函数

apply()

apply( ) 是接收两个参数,第一个参数表示this要指向的对象,第二参数表示调用函数需要传入的参数所组成的数组,返回调用函数的返回结果,属于立即执行函数

bind()

bind( ) 是接收一个及其以上的参数,和call()一致,但是其返回是一个函数,而不是调用函数的返回结果。

区别 

相同点

都是改变this的指向,传入的第一个参数都是绑定this的指向,在非严格模式中,如果第一个参数是null或者undefined,会把全局对象(浏览器是window)作为this的值,要注意的是,在严格模式中,null 就是 null,undefined 就是 undefined

不同点

call和apply唯一的区别

call传入的是参数列表,apply传入的是数组,也可以是类数组

bind和call、apply的区别

bind返回的是一个改变了this指向的函数,便于稍后调用,不像call和apply会立即调用;bind和call很像,传入的也是参数列表,但是可以多次传入,不需要像call,一次传入

当 bind 返回的函数 使用new作为构造函数时,绑定的 this 值会失效,this指向实例对象,但传入的参数依然生效 (new调用的优先级 > bind调用)

示例

// call 方法
function foo() {
    console.log(this.name)
}

const obj1 = { name: 'Alice' }
const obj2 = { name: 'Bob'}

foo.call(obj1)  // 输出:Alice
foo.call(obj2)  // 输出:Bob

// apply方法
function bar(greeting) {
    console.log(greeting + ',' + this.name)
}

bar.apply(obj1, ['Hello']) // 输出:Hello,Alice
bar.apply(obj2, ['Hi'])    // 输出:Hi,Bob

// bind方法
const baz = foo.bind(obj1)
baz()  // 输出:Alice

总结 

特性callapplybind
用法直接调用函数并指定 this 值直接调用函数并指定 this 值创建一个新函数并指定 this 值
参数传递方式逐个传递参数以数组形式传递参数预设参数(可选)
返回值返回函数调用的结果返回函数调用的结果返回一个新函数
适用场景当你知道参数个数时当参数以数组形式存在时当你需要一个函数的特定上下文时
是否立即调用
  • 三者都可以改变函数的this对象指向

  • 三者第一个参数都是this要指向的对象,如果没有这个参数或参数为undefined或null,则默认指向全局window

  • 三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入

  • bind是返回绑定之后的函数,apply和call是立即执行

本篇博客到此就结束了,希望各位大佬们点点关注点点赞,红豆泥阿里嘎多! 🌹

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值