bind的用法和模拟实现

淩亂°似流年 2021-12-10 04:23 262阅读 0赞

参考文档一：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Function/bind][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Function_bind]  
参考文档二：[https://blog.csdn.net/YZ0826/article/details/80176169][https_blog.csdn.net_YZ0826_article_details_80176169]

bind方法从功能上来说和call、apply方法相同，用于改变方法的this指向，唯一的区别是call和apply会立即执行，而bind则是返回待执行函数，下面上一个例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bind</title>
    </head>
    <body>
    
    </body>
    <script> var obj = { before: 1, count: function (after) { return this.before + after; } }; var count = obj.count; //所有的打印结果均为3 console.log(count.call(obj, 2)); console.log(count.apply(obj, [2])); var newCount = count.bind(obj, 2); console.log(newCount()); </script>
    </html>

由于bind返回待执行函数的特殊性，可以通过bind来完成参数预设的功能。例子如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bind</title>
    </head>
    <body>
    
    </body>
    <script> var obj = { before: 1, count: function (par1, par2) { return this.before + par1 + par2; } }; var count = obj.count; var newCount = count.bind(obj, 2); //暴露出去的newCount方法其实是已经设置好par1的obj.count方法（当然也设置好了this指向） console.log(newCount(3)); //但如果参数不足（或者说函数存在非必须参数），则需要在方法内做兼容，下面不传入par2则会打印NaN（因为undefined参与了计算） console.log(newCount()); </script>
    </html>

bind的模拟实现（不考虑bind作为构造函数的情况）：

Function.prototype.bind = function () { 
            var that = this;
            var context = arguments.length > 0 ? arguments[0] : null;
            var args = Array.prototype.slice.call(arguments, 1);
            //实质上就是返回了一个执行apply的函数
            return function () { 
                return that.apply(context, args.concat(Array.prototype.slice.call(arguments)));
            }
        }

官方给出的bind实现：

Function.prototype.bind = function(oThis) { 
        if (typeof this !== 'function') { 
          // closest thing possible to the ECMAScript 5
          // internal IsCallable function
          throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }
    
        var aArgs   = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP    = function() { },
            fBound  = function() { 
              // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
              return fToBind.apply(this instanceof fBound
                     ? this
                     : oThis,
                     // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                     aArgs.concat(Array.prototype.slice.call(arguments)));
            };
    
        // 维护原型关系
        if (this.prototype) { 
          // Function.prototype doesn't have a prototype property
          fNOP.prototype = this.prototype; 
        }
        // 下行的代码使fBound.prototype是fNOP的实例,因此
        // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
        fBound.prototype = new fNOP();
    
        return fBound;
      };

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Function_bind]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
[https_blog.csdn.net_YZ0826_article_details_80176169]: https://blog.csdn.net/YZ0826/article/details/80176169