今天来聊聊 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’}
大致上就是这样了