摘要：下面我们用一下方法来修改上面的例子我们看到通过方法就可以输出了语法格式参数当绑定函数被调用时，该参数会作为原函数运行时的指向。一个绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。
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
摘要：方法创建一个新的函数当被调用时，它的关键字被设置为提供的值。语法简单地看一下这些参数的含义当绑定函数被调用时，该参数会作为原函数运行时的指向当使用操作符调用绑定函数时，该参数无效。结尾文章很简短，知道怎么实现一个原生的就行。 前言 这是underscore.js源码分析的第五篇，如果你对这个系列感兴趣，欢迎点击 underscore-analysis/ watch一下，随时可以看到动态...
摘要：方法创建一个新的函数当被调用时，它的关键字被设置为提供的值。语法简单地看一下这些参数的含义当绑定函数被调用时，该参数会作为原函数运行时的指向当使用操作符调用绑定函数时，该参数无效。结尾文章很简短，知道怎么实现一个原生的就行。 前言 这是underscore.js源码分析的第五篇，如果你对这个系列感兴趣，欢迎点击 underscore-analysis/ watch一下，随时可以看到动态...
阅读 1833·2021-11-15 11:39
阅读 1181·2021-10-18 13:29
阅读 1159·2021-08-31 09:42
阅读 2709·2019-08-30 11:11
阅读 2089·2019-08-26 12:12
阅读 2098·2019-08-26 10:17
阅读 3367·2019-08-23 18:38
阅读 3198·2019-08-23 18:38
