简洁的代码,详细的解释,每个前端er都要会的手写bind方法。

前言

又是一年的金三银四,疯狂的手写剧情再度上演,接下来就让我们一起来实现下JavaScript里的bind函数。

一、思路梳理

在实现手写bind之前让我们先来梳理下bind函数的使用场景。通常我们在使用bind的时候,需要两个对象(所有的一切都是对象🙈):

  1. 想要执行的function(我们假设叫foo)。
  2. 希望能够调用foo的对象(我们假设叫obj)。

那我们在实现bind函数的时候主要突破点就是能够获取到foo以及obj。

还有一点bind和apply或者call方法不同的地方。bind会返回一个函数,再次执行返回的函数,才能是我们目标函数的真正的执行结果。所以对于目标函数foo原本需要的参数的传递方式就有三种情况:

  1. 在调用bind函数时传递
  2. 在调用bind返回的函数时传递
  3. 在调用bind时传递一部分,调用bind返回的函数时传递一部分。

这是在实现bind函数时另一个需要注意的地方。

那么接下来我们就带着这样的一个思路来实现bind方法吧。

二、bind方法的实现

function jBind(thisArg,...args) {
   
  return (...argus) => {
   
    // 传进来的是null和undefined时将this指向为window
    thisArg = thisArg ?? window

    // 确保传进来的是Object
    thisArg = Object(thisArg)
    
    // 生成一个唯一的key值,防止和传进来的对象的key重复
    const key = Symbol()
    thisArg[key] = this

    // 获得函数的执行结果
    const result = thisArg[key](...[...args, ...argus])

    // 删除手动添加的属性,使thisArg回到最初的样子
    delete obj[key]

    // 返回函数的执行结果
    return<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值