js,call、apply、bind的区别及注意事项

这三个方法基本不常用,心血来潮记录一下

function.call(thisArg, arg1, arg2, ...)
apply(thisArg, argsArray)

function.bind(thisArg[, arg1[, arg2[, ...]]])

1.修改this的区别

  • call、apply、bind都可以修改this指向
  • call、apply修改this指向时会自动调用该方法
  • bind会返回一个新的方法,需要调用新方法才会执行

修改this及调用demo

 const one = {
   name: 'one',
   execNameFn(a, b) {
   console.log(this.name, a, b);
   }
}

 const two = {
    name: 'two'
}

// 修改 execNameFn调用时this的指向

one.execNameFn.call(two)
// 打印结果 two undefined undefined

one.execNameFn.apply(two)
// 打印结果 two undefined undefined

// 不会立即执行
const newFn = one.execNameFn.bind(two)
// 打印结果 undefined
newFn()
// 打印结果 two undefined undefined

2.传参的区别

  • call传递参数时直接写在第一个参数后面(第一个参数是当前指向的对象),用逗号隔开
  • apply传递参数是以数组格式写在第一个参数后面(第一个参数是当前指向的对象)
  • (注意)bind传递参数可以在还没创建出新函数时传递,也可以在新函数传递参数,在指向当前实例后面传递的参数优先级高,后面新创建的函数参数不能覆盖,详情看demo
const one = {
   name: 'one',
   execNameFn(a, b) {
   console.log(this.name, a, b);
   }
}

 const two = {
    name: 'two'
}

one.execNameFn.call(two,1,2)
// 返回值 two 1 2

// 使用数组传参
one.execNameFn.apply(two,[1,2])
// 返回值 two 1 2


// * 两种方式,第二种不能覆盖第一种
// 第一种
const newFn = one.execNameFn.bind(two,1,2)
// 执行
newFn() 
// 返回值 two 1 2

// 第二种
newFn(2,3)
// 返回值 two 1 2

// 通过返回的函数传递 入参
const newFn = one.execNameFn.bind(two)
newFn(1,2)
// 返回值 two 1 2

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值