手写bind源码

• 改变函数this指向的三个方法：call   bind  apply

                三个方法的相同点：

                              目标函数被调用时，改变this的指向的值

                              三个方法都是函数的方法，挂在在Function.prototype上

                不同点：

                            目标函数调用call和apply后，会直接被执行

                            目标函数调用bind后，不会立即执行，而是返回一个新的函数，调用新函数才会执行目标函数

//自定义一个类似于bind函数的函数，将其挂载到函数Function上面，然后就可以用函数来调用该自定义的函数了
        //给函数扩展一个方法
        Function.prototype.customeBind = function (thisArg,...list){
            let self = this;
            console.log(self)//func
            //返回一个新函数
            return function(...arg2){
                //改变this的指向
                self.apply(thisArg,[...list,...arg2])
            }

        }
        function func(...arg){
            console.log(this);
            console.log(arg);
        }
        func.prototype.miaov = function (){
            console.log(123)
        }
        let newFunc = func.bind({a:1},1,2,3,4);
        //自定义bind函数
        let newFunc2 = func.customeBind({a:1},1,2,3,4)
        newFunc(5,6,7,8)
        newFunc2(5,6,7,8);

• 目标函数的实现

1.目标函数调用后返回新函数

2.调用新函数，也就是调用目标函数this为传入bind的第一个参数

3.把新函数当作构造函数，是可以找到目标函数的原型，所以新函数继承目标函数的原型

4.新函数当作构造函数后，目标函数this指向为原型对象

// 注意
  /*
目标函数：调用bind的函数，func.bind func就称之为是目标函数
新函数：bind返回的函数，
  */
  /*
1.返回的函数作为构造函数，新函数要继承目标函数的原型
2.一旦把新函数当成构造函数了，目标函数的this应该指向实例对象
  */

        //构造函数的问题
         Function.prototype.customeBind = function (thisArg,...list){
            let self = this;
            console.log(self)//func

           //自己实现的bind函数，如果把返回的新函数当成构造函数，此时会遇到问题，就是找不到目标函数原型上的方法，解决：放新函数继承目标函数的原型
           let Bound =  function(...arg2){
                //改变this的指向
                // self.apply(thisArg,[...list,...arg2])
                //如果这个函数作为了构造函数，那么目标函数的this，应该执行的是实例对象
                //如果这个不是作为构造函数，目标函数中的this还指向thisArg
                let thisArgSelf = this instanceof Bound ? this : thisArg;
                self.apply(thisArgSelf,[...list,...arg2])
                
            }
            //原型继承
            // Bound.prototype = self.prototype;
            //Object.create用来创建以某一个对象作为原型的对象的
            Bound.prototype = Object.create(self.prototype)//创建一个新的对象，该新对象是以self.prototype作为原型创建出来的
            Bound.prototype.constructor = self

            //返回一个新函数
            return Bound

        }
        function func(...arg){
            console.log(this);
            console.log(arg);
        }
        func.prototype.miaov = function (){
            console.log(123)
        }
        let newFunc = func.bind({a:1},1,2,3,4);
        //自定义bind函数
        let newFunc2 = func.customeBind({a:1},1,2,3,4)
        //构造函数
        let f1 =new newFunc(5,6,7,8)
        console.log(f1.miaov)
        let f2 =new newFunc2(5,6,7,8);
        console.log(f2.miaov)//undefined,因为f2是newFunc2的一个返回值创建出来的，这个返回值就是customeBind函数里面的匿名韩式创建出来的，而这个匿名函数于customeBind没有关联