资讯专栏INFORMATION COLUMN

用原生js实现一个bind方法

channg / 887人阅读

摘要:下面我们用一下方法来修改上面的例子我们看到通过方法就可以输出了语法格式参数当绑定函数被调用时,该参数会作为原函数运行时的指向。一个绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。

bind用法介绍:
bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

这段是来自MDN:bind的介绍,我们可以理解bind方法返回一个新的函数,这个函数内部的this指向提供的参数值,来看个例子

 const person = {
      age: 20,
      getAge() {
        return this.age
      }
    }
  const getAge = person.getAge
  console.log(getAge()) // output :undefined

上面代码输出了undefined,什么原因呢?相信大家都知道,getAge()执行时内部的this指向了window,而window并没有age这个属性,我们并没有定义全局的age变量,那我们怎么解决这个问题呢?那就是用哪个bind方法,需要注意的是bind方法的兼容性,IE9以上包括IE9。其他现代浏览器不用说肯定是支持的。下面我们用一下bind方法来修改上面的例子

 const person = {
      age: 20,
      getAge() {
        return this.age
      }
    }
  const getAge = person.getAge.bind(person)
  console.log(getAge()) // output :20

我们看到通过bind方法就可以输出age了

bind语法格式
fun.bind(thisArg[, arg1[, arg2[, ...]]])
参数

thisArg

当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时,该参数无效。

arg1, arg2, ...

当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法
返回值
返回由指定的this值和初始化参数改造的原函数拷贝

个人理解:bind方法接受的第一个参数是你想绑定的this值,通常是个对象,这个对象在函数内部用this可以获取到,第一个参数后面可以跟若干个参数,这些参数可以在bind的时候传递,相当于预设参数。

好了,知道用法和参数后我们就可以实现一个简陋版的了

Function.prototype.bind=function (context) {
  if(typeof this !=="function"){
    throw new Error(`${this.name} is not a function`)
  }
  const srcFun=this// 保存原始函数
  const arg=Array.prototype.slice.call(arguments,1)// 把arguments类数组转为真实数组
  let noop=function(){}
  const fBound= function () {
   if(this instanceof noop){
     context=this
   }
    // 合并新旧参数
    return srcFun.apply(context,arg.concat(Array.prototype.slice.call(arguments,0)))
  }
  if(this.prototype){
    noop.prototype=this.prototype//维护原型关系,指向原始函数
  }
  fBound.prototype=new noop()//新函数的prototype的__proto__指向noop.prototype
  return fBound
}

很简陋,没有严谨的判断。

一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

上面是MDN的一段话,也就是bind返回的函数也可以当做构造函数来用,此时bind传递的第一个参数无效,但是其他参数有效。

那么要做判断处理就是

//代码2
if(this instanceof noop){
     context=this
   }

这段代码就可以区分出是在把函数当做构造函数来new了还是当做普通方法来调用了,我们知道
当new 的时候实际做了这点事

var obj={}
obj._proto_=构造函数的prototype
构造函数.call(obj)

所以现在在代码2中的this是构造函数的实例,那就得更改bind后的函数,让bind后的fBound函数的prototype指向noop的实例,这样此时的this就借助noop实例指向了noop的原型,那么this instanceof noop就是true了

总结

上面是我对bind方法的一些理解和实现,仅供参考和学习。bind方法在react中会比较常用到,有些面试题也会让自己实现一个,所以尝试一下也能学到不少东西了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95473.html

相关文章

  • 如何写一个bind

    摘要:方法创建一个新的函数当被调用时,它的关键字被设置为提供的值。语法简单地看一下这些参数的含义当绑定函数被调用时,该参数会作为原函数运行时的指向当使用操作符调用绑定函数时,该参数无效。结尾文章很简短,知道怎么实现一个原生的就行。 前言 这是underscore.js源码分析的第五篇,如果你对这个系列感兴趣,欢迎点击 underscore-analysis/ watch一下,随时可以看到动态...

    zhaofeihao 评论0 收藏0
  • 如何写一个bind

    摘要:方法创建一个新的函数当被调用时,它的关键字被设置为提供的值。语法简单地看一下这些参数的含义当绑定函数被调用时,该参数会作为原函数运行时的指向当使用操作符调用绑定函数时,该参数无效。结尾文章很简短,知道怎么实现一个原生的就行。 前言 这是underscore.js源码分析的第五篇,如果你对这个系列感兴趣,欢迎点击 underscore-analysis/ watch一下,随时可以看到动态...

    Prasanta 评论0 收藏0
  • 彻底弄清 this call apply bind 以及原生实现 有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能 this 指向问题 this this 的指向在严格模式和非严格模式下有所不同;this 究竟指向什么是,在绝大多数情况下取决于函数如何被调用 全局执行...

    zr_hebo 评论0 收藏0
  • js基础深入浅出

    摘要:当多个事件触发的时候,会把异步事件依次的放入里等同步事件执行完之后,再去队列里一个个执行拾遗常用方法总结面试的信心来源于过硬的基础参考高级程序设计你所不知道的深入浅出知识点思维导图经典实例总结那些剪不断理还乱的关系 持续不断更新。。。 基本类型和引用类型 vue props | Primitive vs Reference Types 基本类型和字面值之间的区别 基本类型和字面值相等,...

    phodal 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<