深入bind

今天来聊聊bind 关于之前的call跟apply 查看此链接我们要明确4点内容1. bind之后返回一个函数let obj = { name : ‘skr’}function fn(){ console.log(this)}let bindfn = fn.bind(obj)console.log(typeof bindfn) // function 2.bind改变this 并且可以传参 bind之后的函数仍旧可以传参let obj = { name : ‘skr’}function fn(){ console.log(arguments,this)}let bindfn = fn.bind(obj,‘陈’,‘孙’,‘李’)bindfn(‘张三李四’) //[Arguments] { ‘0’: ‘陈’, ‘1’: ‘孙’, ‘2’: ‘李’, ‘3’: ‘张三李四’ }，{ name: ‘skr’ }3.bind之后的函数做为构造函数执行，this是作为新的一个引用let obj = { name : ‘skr’}function fn(name){ this.name = name console.log(this) //{ name: ‘坤坤’ } console.log(obj) //{ name: ‘skr’ }}let bindfn = fn.bind(obj)let obj2 = new bindfn(‘坤坤’) 4 作为构造函数时候 在原型上添加属性 实例能找到这个属性let obj = { name : ‘skr’}function fn(name){ this.name = name console.log(this) //{ name: ‘坤坤’ } console.log(obj) //{ name: ‘skr’ }}let bindfn = fn.bind(obj)let obj2 = new bindfn(‘坤坤’) fn.prototype.arrt = ‘小生’console.log(obj2.arrt) // 小生实现一个bind遵循以上4点bind之后返回一个函数Function.prototype.bind = function(){ return function(){ // 代码省略 }}bind改变this 并且可以传参 bind之后的函数仍旧可以传参Function.prototype.bind = function(context){ let _this = this let args = Array.prototype.slice.call(arguments,1) // 保存外部函数的参数 return function(){ return _this.apply(context,args.concat(Array.from(arguments))) // 链接内部函数参数 }}let obj = { name :“1”}function a(){ console.log(this,arguments)}a.bind(obj,1,2,3,4,5,6)(7,8,9) /*打印结果：{ name: ‘1’ } [Arguments] { ‘0’: 1, ‘1’: 2, ‘2’: 3, ‘3’: 4, ‘4’: 5, ‘5’: 6, ‘6’: 7, ‘7’: 8, ‘8’: 9 } */bind之后的函数做为构造函数执行，this是作为新的一个引用Function.prototype.bind = function(context){ let _this = this let args = Array.prototype.slice.call(arguments,1) // 保存外部函数的参数 let fn2 = function(){ return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments))) // 看看是否是new 出来的 是new的话就不改变this } return fn2}let obj = { name :“1”}function a(name){ this.name = name console.log(this)}let bindfn = a.bind(obj) let obj2 = new bindfn(‘2’) // {name:‘2’}console.log(obj) // {name:‘1’}作为构造函数时候 在原型上添加属性 实例能找到这个属性Function.prototype.bind = function(context){ let _this = this let args = Array.prototype.slice.call(arguments,1) // 保存外部函数的参数 function ConS(){} let fn2 = function(){ return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments))) // 看看是否是new 出来的 是new的话就不改变this } console.log(this) ConS.prototype = this.prototype // 通过第三方 new ConS().proto === this.prototype fn2.prototype = new ConS() // new fn2().proto === new ConS() —> new fn2().proto.proto === this.prototype 从而拿到this实例上的原型属性和方法 return fn2}let obj = { name :“1”}function a(name){ this.name = name console.log(this)}let bindfn = a.bind(obj) let obj2 = new bindfn(‘2’) // {name:‘2’}console.log(obj2) // {name:‘1’}大致上就是这样了