深入bind

蔚落 2022-03-07 11:42 217阅读 0赞

今天来聊聊**bind** 关于之前的call跟apply 查看[此链接][Link 1]

我们要明确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 作为构造函数时候 在原型上添加属性 实例能找到这个属性**

## 实现一个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'}

大致上就是这样了

[Link 1]: https://segmentfault.com/a/1190000018195263