如何手写一个bind方法

作者: 之幸甘木 | 来源:发表于2021-03-17 19:49 被阅读0次

bind方法简介

关于bind() 方法的介绍，可以参照这里;

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

语法

function.bind(thisArg[, arg1[, arg2[, ...]]])

参数

thisArg

调用绑定函数时作为this参数传递给目标函数的值。

如果使用new运算符构造绑定函数，则忽略该值。当使用bind在setTimeout中创建一个函数（作为回调提供）时，作为thisArg传递的任何原始值都将转换为object。如果bind函数的参数列表为空，或者thisArg是null或undefined，执行作用域的this将被视为新函数的 thisArg。

arg1, arg2, ...

当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值

返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

实现bind方法1.0

首先，我们定义一个函数，这个函数的第一个参数作为thisArg，后面的参数作为返回的新方法的参数：

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  let thisArg = args.shift(); // 一箭双雕的写法
}

也可以利用剩余参数：

Function.prototype.mybind = function (thisArg, ...args) {
  // ...
}

剩余参数是ES6的新特性，一般说来，不支持bind的情况一般也不支持剩余参数，所以，不推荐这种写法。

然后，mybind方法会返回一个新函数，该函数将外层函数的参数与内层函数的参数连接起来一起作为参数：

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  let thisArg = args.shift();
  
  return function () {
    newArgs = args.concat(Array.from(arguments));
    // ...
  }
}

我们可以使用apply来完成this指向变更，在那之前可以使用变量thisFunc先保存原函数：

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  let thisArg = args.shift();
  let thisFunc = this;
  
  return function () {
    newArgs = args.concat(Array.from(arguments));
    return thisFunc.apply(thisArg, newArgs);
  }
}

在调用apply必须先检测thisFunc是不是Function，这里没写是因为我懒。

低版本浏览器在不支持bind的情况下会支持apply吗？还真会。

支持apply的最低浏览器版本均低于支持bind的最低浏览器版本

当然，你也可以手动实现apply:

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  // 手动实现需要在第一个参数为null时
  let thisArg = args.shift() || window;
  let thisFunc = this;
  
  return function () {
    newArgs = args.concat(Array.from(arguments));
    let fn = Symbol('thisFunc');
    thisArg[fn] = _Func;
    let res = thisArg[fn](...newArgs);
    delete thisArg[fn];
    return res;
  }
}

数组解构也是个ES6的语法，感觉又把自己绕进去了。

这样，一个类似于bind的方法就写好了，下面我们调用一下它。

使用mybind 1.0

情景1：普通函数

var age = 18;

let myfn = function (a, b, c) {
  console.log(this.age, a, b, c);
}

myfn();  // 18 undefined undefined undefined

let xiaohuang = {
  age: 12
}

let myfn1 = myfn.mybind(xiaohuang, 1);

myfn1(3); // 12 1 3 undefined

let myfn2 = myfn.bind({ age: 114514 });

myfn2(19, 19, 810);  // 114514 19 19 810

myfn2(19, 19, 810);  // 114514 19 19 810

没有问题，一切正常。

情景2：构造函数

let Animal = function (name) {
  this.name = name;
}

let buly = {
  name: 'buly'
}

let Cat = Animal.mybind(buly);

let tom = new Cat('tom');

console.log(tom, buly); // {} {name: "tom"}
// expected output: {name: "tom"} {name: "buly"}

哦吼，出问题了。

实现bind方法2.0

看来我们根据具体的情况采取不同的策略，当传入的函数是一个构造函数时，我们不需要更改this的指向。

如何判断是否为构造函数呢？只需要判断this instanceof 构造方法的值就可以了。

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  let thisArg = args.shift();
  let thisFunc = this;
  
  // 因为需要构造函数，所以不能是匿名函数了
  let fBound = function () {
    newArgs = args.concat(Array.from(arguments));
    // 判断是否为构造函数
    thisArg = this instanceof fBound ? this : thisArg;
    return thisFunc.apply(thisArg, newArgs);
  }
  
  return fBound;
}

使用bind2.0

情景2：构造函数

let Animal = function (name) {
  this.name = name;
}

let buly = {
  name: 'buly'
}

let Cat = Animal.mybind(buly);

let tom = new Cat('tom');

console.log(tom, buly); // {name: "tom"} {name: "buly"}

— 我很高兴你完成了手写bind的全部内容。
— 不好意思，你高兴的太早了。

情景3：带原型对象（prototype，下同）的构造函数

let Animal = function (name) {
  this.name = name;
}

// 箭头函数中的this会穿透作用域，所以不要用箭头函数哦
Animal.prototype.say  = function() {
  console.log('hello, my name is ' + this.name);
}

let buly = {
  name: 'buly'
}

let Cat = Animal.mybind(buly);

let tom = new Cat('tom');

tom.say(); // Error: tom.say is not a function

新返回的函数与原函数的原型对象并没有建立联系，所以new出来的对象不能访问到原函数的原型对象上的方法。

实现bind方法3.0

让我们简单粗暴一点：

    Function.prototype.mybind = function () {
      let args = Array.from(arguments);
      let thisArg = args.shift();
      let thisFunc = this;

      // 因为需要构造函数，所以不能是匿名函数了
      let fBound = function () {
        newArgs = args.concat(Array.from(arguments));
        // 判断是否为构造函数
        thisArg = this instanceof fBound ? this : thisArg;
        return thisFunc.apply(thisArg, newArgs);
      }

      // 直接将原函数的prototype赋值给绑定函数 
      fBound.prototype = this.prototype;

      return fBound;
    }

当然，我们不推荐这种粗暴的继承方式，这种情况下，若更改新函数的原型对象，则原函数的原型对象也会被改变。

推荐方法1：原型式继承

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  let thisArg = args.shift();
  let thisFunc = this;
  // 中间函数
  let fNop = function () { };
  
  // 因为需要构造函数，所以不能是匿名函数了
  let fBound = function () {
    newArgs = args.concat(Array.from(arguments));
    // 判断是否为构造函数
    thisArg = this instanceof fBound ? this : thisArg;
    return thisFunc.apply(thisArg, newArgs);
  }
  
  fNop.prototype = this.prototype;
  // 原型式继承
  fBound.prototype = new fNop();
  
  return fBound;
}

你可能不太能理解这段东西，我试着简单的解释一下：

如果我们采用ES6中的class的话，是这样的:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

let tom = new Cat('tom');

这里，tom的__proto__指向Cat的原型对象，tom的__proto__的__proto__指向Animal的原型对象

但ES5只支持构造函数，不支持class，所以们先创建一个空函数fNop，然后使其原型对象指向原函数的原型对象。在使得fBound的原型对象指向fNop的实例，这也变相实现了fBound extends fNop。

以上纯属个人理解，仅供参考。

推荐方法2： Object.create

方便书写又方便理解，其实就是浅拷贝。

Function.prototype.mybind = function () {
  let args = Array.from(arguments);
  let thisArg = args.shift();
  let thisFunc = this;
  
  // 因为需要构造函数，所以不能是匿名函数了
  let fBound = function () {
    newArgs = args.concat(Array.from(arguments));
    // 判断是否为构造函数
    thisArg = this instanceof fBound ? this : thisArg;
    return thisFunc.apply(thisArg, newArgs);
  }
  
  // Object.create拷贝原型对象
  fBound.prototype = Object.create(this.prototype);
  
  return fBound;
}

使用bind3.0

情景3：带原型对象（prototype，下同）的构造函数

let Animal = function (name) {
  this.name = name;
}

// 箭头函数中的this会穿透作用域，所以不要用箭头函数哦
Animal.prototype.say  = function() {
  console.log('hello, my name is ' + this.name);
}

let buly = {
  name: 'buly'
}

let Cat = Animal.mybind(buly);

let tom = new Cat('tom');

tom.say(); // hello, my name is tom

和真正的bind不同，使用我们手动实现的bind，最后实例化的对象的构造函数是fBound而不是原构造函数。

总结

实现bind的技术要点如下：

将剩余的参数和传入的参数拼接，作为新的参数。知识点有：解构赋值、Array.prototype.concat、Array.prototype.apply；
判断是否为构造函数，使用instanceof操作符；
实现原型继承，参考JS中的继承与原型链。

其他的技术要点，可以参考我之前的文章《如何手写一个call方法》。

MDN提供的polyFill代码

polyfill：补丁。意思是在浏览器不支持bind时，采用该代码以解决此问题：

全部代码如下：

//  Yes, it does work with `new (funcA.bind(thisArg, args))`
if (!Function.prototype.bind) (function(){
  var ArrayPrototypeSlice = Array.prototype.slice;
  Function.prototype.bind = function(otherThis) {
    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 baseArgs= ArrayPrototypeSlice.call(arguments, 1),
        baseArgsLength = baseArgs.length,
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          baseArgs.length = baseArgsLength; // reset to default base arguments
          baseArgs.push.apply(baseArgs, arguments);
          return fToBind.apply(
                 fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
          );
        };

    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
})();

这里提出2条解读：

最外层是匿名函数自调用，是防止浪费存储资源的做法。
baseArgs.length = baseArgsLength;这一步的原因有二。一是闭包导致了所有函数共用一个baseArgs；二是因为push是一种会修改原数组的API，所以不可避免的会改动baseArgs。使用concat或者数组解构可以更好地解决此问题。

如何手写一个bind方法

bind方法简介

语法

参数

返回值

实现bind方法1.0

使用mybind 1.0

实现bind方法2.0

使用bind2.0

实现bind方法3.0

使用bind3.0

总结

MDN提供的polyFill代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读