做网站服务器还是虚拟空间好,如何自己建设淘宝网站首页,html5网站建设企业,国家扶持新型环保项目阅读本文约需要5分钟大家好#xff0c;我是你们的导师#xff0c;我每天都会给大家分享一些干货内容(当然了#xff0c;周末也要允许老师休息一下哈)。昨天给大家分享了JavaScript的call和apply的模拟实现#xff0c;今天给大家分享一下bind的模拟实现。什么是bind#xf… 阅读本文约需要5分钟大家好我是你们的导师我每天都会给大家分享一些干货内容(当然了周末也要允许老师休息一下哈)。昨天给大家分享了JavaScript的call和apply的模拟实现今天给大家分享一下bind的模拟实现。什么是bind一句话介绍 bindbind() 方法会创建一个新函数。当这个新函数被调用时bind() 的第一个参数将作为它运行时的 this之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )。由此我们可以首先得出 bind 函数的两个特点返回一个函数、可以传入参数。返回函数的模拟实现从第一个特点开始我们举个例子关于指定 this 的指向我们可以使用 call 或者 apply 实现关于 call 和 apply 的模拟实现可以看看我昨天分享的文章JavaScript之call和apply的模拟实现。我们来写第一版的代码此外之所以 return self.apply(context)是考虑到绑定函数可能是有返回值的依然是这个例子传参的模拟实现接下来看第二点可以传入参数。这个就有点让人费解了我在 bind 的时候是否可以传参呢我在执行 bind 返回的函数的时候可不可以传参呢让我们看个例子函数需要传 name 和 age 两个参数竟然还可以在 bind 的时候只传一个 name在执行返回的函数的时候再传另一个参数 age!这可咋办不急我们用 arguments 进行处理构造函数效果的模拟实现完成了这两点最难的部分到了因为 bind 还有一个特点就是一个绑定函数也能使用new操作符创建对象这种行为就像把原函数当成构造器。提供的 this 值被忽略同时调用时的参数被提供给模拟函数。也就是说当 bind 返回的函数作为构造函数的时候bind 时指定的 this 值会失效但传入的参数依然生效。举个例子注意尽管在全局和 foo 中都声明了 value 值最后依然返回了 undefind说明绑定的 this 失效了如果大家了解 new 的模拟实现就会知道这个时候的 this 已经指向了 obj。所以我们可以通过修改返回的函数的原型来实现让我们写一下构造函数效果的优化实现但是在这个写法中我们直接将 fBound.prototype this.prototype我们直接修改 fBound.prototype 的时候也会直接修改绑定函数的 prototype。这个时候我们可以通过一个空函数来进行中转到此为止大的问题都已经解决。三个小问题1.apply 这段代码跟 MDN 上的稍有不同在 MDN 中文版讲 bind 的模拟实现时apply 这里的代码是self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))多了一个关于 context 是否存在的判断然而这个是错误的举个例子以上代码正常情况下会打印 2如果换成了 context || this这段代码就会打印 1所以这里不应该进行 context 的判断大家查看 MDN 同样内容的英文版就不存在这个判断2.调用 bind 的不是函数咋办不行我们要报错3.我要在线上用那别忘了做个兼容最终代码所以最最后的代码就是今天就分享到这如果觉得对你有一丢丢帮助请点右下角【在看】让更多人看到该文章。大家也可以在底部给我留言对于有价值的留言我们都会一一回复的。
