生活随笔
收集整理的这篇文章主要介绍了
深入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点
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'}
大致上就是这样了
总结
以上是生活随笔为你收集整理的深入bind的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
