javascript：自己实现一下bind()函数

小灰灰 2022-12-23 09:58 170阅读 0赞

##### 一、我们先来看看bind()函数的基本知识 #####

> 从mdn上我们可以看到：  
> bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center]

/我们需要知道：  
  
1、bind是Functoin原型链中Function.prototype的一个属性，每个函数都可以调用它。  
  
2、bind本身是一个函数名为bind的函数，返回值也是函数，函数名是bound 。（打出来就是bound加上一个空格）。

#### 二、实现的心路历程 ####

###### 1、 ######

> 1、调用bind的函数中的this指向bind()函数的第一个参数。  
> 2、传给bind()的其他参数接收处理了，bind()之后返回的函数的参数也接收处理了，也就是说合并处理了。  
> 3、并且bind()后的name为bound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格。  
> 4、bind后的返回值函数，执行后返回值是原函数（original）的返回值。  
> 5、bind函数形参（即函数的length）是1。bind后返回的bound函数形参不定，根据绑定的函数原函数（original）形参个数确定。

// 第一版 修改this指向，合并参数
    Function.prototype.bindFn = function bind(thisArg){ 
        if(typeof this !== 'function'){ 
            throw new TypeError(this + 'must be a function');
        }
        // 存储函数本身
        var self = this;
        // 去除thisArg的其他参数 转成数组
        var args = [].slice.call(arguments, 1);
        var bound = function(){ 
            // bind返回的函数 的参数转成数组
            var boundArgs = [].slice.call(arguments);
            // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果
            return self.apply(thisArg, args.concat(boundArgs));
        }
        return bound;
    }
    
    
    
    
    
    
    // 测试
    var obj = { 
        name: '轩辕Rowboat',
    };
    function original(a, b){ 
        console.log(this.name);
        console.log([a, b]);
    }
    var bound = original.bindFn(obj, 1);
    bound(2); // '轩辕Rowboat', [1, 2]

###### 2、但是上面的不能处理new操作符的问题，所以用例子去验证了一下： ######

> 1、bind原先指向obj的失效了，其他参数有效。  
>   
> 2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。

所以我们也要知道new操作符干了什么：

> 1.创建了一个全新的对象。  
>   
> 2.这个对象会被执行\[\[Prototype\]\]（也就是\_\_proto\_\_）链接。  
>   
> 3.生成的新对象会绑定到函数调用的this。  
>   
> 4.通过new创建的每个对象将最终被\[\[Prototype\]\]链接到这个函数的prototype对象上。  
>   
> 5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

所以相当于new调用时，bind的返回值函数bound内部要模拟实现new实现的操作。

// 第三版 实现new调用
    Function.prototype.bindFn = function bind(thisArg){ 
        if(typeof this !== 'function'){ 
            throw new TypeError(this + ' must be a function');
        }
        // 存储调用bind的函数本身
        var self = this;
        // 去除thisArg的其他参数 转成数组
        var args = [].slice.call(arguments, 1);
        var bound = function(){ 
            // bind返回的函数 的参数转成数组
            var boundArgs = [].slice.call(arguments);
            var finalArgs = args.concat(boundArgs);
            // new 调用时，其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。
            if(this instanceof bound){ 
                // 这里是实现上文描述的 new 的第 1, 2, 4 步
                // 1.创建一个全新的对象
                // 2.并且执行[[Prototype]]链接
                // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
                // self可能是ES6的箭头函数，没有prototype，所以就没必要再指向做prototype操作。
                if(self.prototype){ 
                    // ES5 提供的方案 Object.create()
                    // bound.prototype = Object.create(self.prototype);
                    // 但 既然是模拟ES5的bind，那浏览器也基本没有实现Object.create()
                    // 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
                    function Empty(){ }
                    Empty.prototype = self.prototype;
                    bound.prototype = new Empty();
                }
                // 这里是实现上文描述的 new 的第 3 步
                // 3.生成的新对象会绑定到函数调用的`this`。
                var result = self.apply(this, finalArgs);
                // 这里是实现上文描述的 new 的第 5 步
                // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)，
                // 那么`new`表达式中的函数调用会自动返回这个新的对象。
                var isObject = typeof result === 'object' && result !== null;
                var isFunction = typeof result === 'function';
                if(isObject || isFunction){ 
                    return result;
                }
                return this;
            }
            else{ 
                // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果
                return self.apply(thisArg, finalArgs);
            }
        };
        return bound;
    }

#### 三、总结一下 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bb0ea24791f842729069c0fe95184375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/2419a4521d444aa28402a73200439e6b.png