JavaScript系列—手写bind()函数

迈不过友情╰ 2022-01-05 12:23 286阅读 0赞

本人在一次面试中，当面试官小姐姐让我重写一下bind函数的时候，一下子蒙圈了，所以特来研究一下。

在手写bind函数之前，我们先来回顾一下三剑客

### 1.**call,apply和bind** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

现在我们写一个例子看一下

![20190623215152897.png][]

打印

![20190623215127819.png][]

特殊的，假如this那块写了一个1，那么打印出来的就不是1，而是被包装成一个对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![20190623215306279.png][]

### 2.手写bind实现 ###

首先看一下下面的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

猜测一下这个this指向的是谁，这也是一道面试题。指向的是func函数，其实很简单，谁调用它它就指向谁，so不要和原型链搞混了，两码事！

![20190623220859213.png][]

下来我们开始实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

下来我们看一下原生的bind

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

### 3. 使用构造函数new ###

我们现在使用构造函数

<!DOCTYPE <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
      </style>
      <script>
        Function.prototype.customeBind = function(thisArg,...list){
          let self = this; // 目标函数
    
          return function(...arg2){
            self.apply(thisArg,[...list,...arg2])
          }
        }
    
        function func(...arg){
          console.log('答案是我，我是func');
          console.log(this);//this已经改变，指向{a:1}
          console.log(arg);//{1,2,3,4,5,6,7,8}
          console.log('答案是我，我是func');
        }
    
        func.prototype.miaov = function(){
          console.log(this);
        }
    
    
        let newFunc = func.bind({ a: 1 }, 1, 2, 3);
        let newFunc2 = func.customeBind({ a: 1 }, 1, 2, 3, 4);
        console.log('原生------------------');
        let f1 = new newFunc(5, 6, 7, 8);
        console.log(f1);
        console.log('自定义-----------------');
        let f2 = new newFunc2(5, 6, 7, 8);
        console.log(f2);
      </Script>
    </head>
    <body class="Site">
    
    <div class="parent">
    
    </div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6][]

继续我们寻找一下miaov这个函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 8][]

自定义的找不到啦

这是因为

自己实现的bind函数，如果把返回的新函数当成了构造函数，此时会遇到问题，就是找不到目标函数原型上的方法

我们画图来说明一下吧

![20190625201313799.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 9][]

上面的图画的对不对，我们就来看以下代码打印一下就知道

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 10][]

然后我们进行改正这个情况

<!DOCTYPE <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
      </style>
      <script>
        Function.prototype.customeBind = function(thisArg,...list){
          let self = this; // 目标函数
          
          // 自己实现的bind函数，如果把返回的新函数当成了构造函数，此时会遇到问题，
          // 就是找不到目标函数原型上的方法
          // 解决：让新函数继承目标函数的原型
          let Bound = function(...arg2){
            self.apply(thisArg,[...list,...arg2])
          }
          // 以某个对象作为原型创建一个新的对象出来
          Bound.prototype = Object.create(self.prototype);
          Bound.prototype.custructor = self;
    
          return Bound;
        }
    
        function func(...arg){
          console.log('答案是我，我是func');
          console.log(this);//this已经改变，指向{a:1}
          console.log(arg);//{1,2,3,4,5,6,7,8}
          console.log('答案是我，我是func');
        }
    
        func.prototype.miaov = function(){
          console.log(this);
        }
    
    
        let newFunc = func.bind({ a: 1 }, 1, 2, 3);
        let newFunc2 = func.customeBind({ a: 1 }, 1, 2, 3, 4);
        console.log('原生------------------');
        let f1 = new newFunc(5, 6, 7, 8);
        console.log(f1.miaov);
        console.log('自定义-----------------');
        let f2 = new newFunc2(5, 6, 7, 8);
        console.log(f2.miaov);
        console.log('看看f2');
        console.log(f2);
      </Script>
    </head>
    <body class="Site">
    
    <div class="parent">
    
    </div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 11][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 12][]

哦，千呐，这么一个小小的面试题，其实涉及的知识点并不少，脑壳疼。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211229/2d4b8dc342734fbbab6337127918db12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20211229/e2baf4ab5cfc4d7ea84c9a54b672fcde.png
[20190623215152897.png]: /images/20211229/dbbef240e2224677bd0358f26235354f.png
[20190623215127819.png]: /images/20211229/2920d554339f465d875373a357740796.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20211229/6d4f09d6310d4707b25acfc48d39a136.png
[20190623215306279.png]: /images/20211229/01f1d218d0bc48cca93ef6e810111c9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20211229/76b0e6a9dde244bf8b8c79918ed0058b.png
[20190623220859213.png]: /images/20211229/c5f6d9ed268945698f96537f1ea6548d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20211229/105b451489944a8ebd3c6ff76b1c8ed0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20211229/02eb2216cd2b4bf491ee571c0575c21e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6]: /images/20211229/141483d06ba34b6e8f6895ff79b43c84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 7]: /images/20211229/2c14ca3972434796aacf9ef2be298d40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 8]: /images/20211229/0f42ff884648486d81c29aca27c89698.png
[20190625201313799.png]: /images/20211229/65bdd577edb347d889b742221456eba8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 9]: /images/20211229/895a53bfbe0f4f2895e168201907ff33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 10]: /images/20211229/c689ba1e59dc4ef5bc345ae219916dfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 11]: /images/20211229/0ccacff8f6774180b5b3e3e9cf7c9b46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 12]: /images/20211229/dd10cc21d728402698b2870f704c08fb.png