JS手写bind之处理new的情况详解

实现兼容new操作的bind

你好，我是本际云服务器推荐网的小编小本本，今天给大家分享一下兼容new操作的bind的实现。我们先看一下通过代码实现的方法：

JS手写bind之处理new的情况详解

new操作符的使用

在JS中，使用new操作符可以通过函数来创建一个对象实例。除了普通函数外，函数还可以是构造函数。使用new操作符时，首先创建一个空对象{}，然后将空对象的原型属性__proto__指向构造函数的原型对象Person.prototype，然后将函数中的this设置为这个空对象。如果函数没有返回一个对象，则默认返回这个this，否则就返回那个对象。

判断函数是否被new调用

我们可以使用instanceof操作符来判断一个函数是否正在被new调用。如果this instanceof Fn为true，则表示正在通过new构建实例。

如果你在开发环境中不通过new来使用某个对象，会在控制台中提示你要通过new来调用这个对象。这里需要用到上述技巧。

new和bind

如果我们new的是Function.prototype.bind返回的新函数，会发生什么？结果等价于直接使用new原始函数。不同的是，我们仍旧可以进行参数的预置。

我们通过this instanceof boundFn来判断是否用了new，如果是的话，就直接new原始函数，记得带上bind预置好的参数。与原本的方法一样(参照《前端面试题：手写bind》)。boundFn.prototype=fn.prototype，这个可写可不写，只是让bind返回的新函数的prototype指向原函数的prototype。如果是原生bind返回的函数，它是没有protoype属性的，因为它是一种特别的函数，而我们实现的bind返回的却是一个普通函数，所以并不能完全模拟它。

完整实现的bind方法

完整的实现方法如下：

Function.prototype.myBind = function(thisArg, …prefixArgs) {
  const fn = this;
  const boundFn = function(…args) {
    if (this instanceof boundFn) {
      return new fn(…prefixArgs, …args);
    }
    return fn.call(thisArg, …prefixArgs, …args);
  }
  boundFn.prototype = fn.prototype;
  return boundFn;
}

这里，我们用this instanceof boundFn来判断是否通过new调用当前函数。如果是通过new调用，则直接new原始函数，并带上bind预置好的参数。

与原本一样(参照《前端面试题：手写bind》),boundFn.prototype=fn.prototype用于让bind返回的新函数的prototype指向原函数的prototype。如果是原生bind返回的函数，它是没有prototype属性的，可以认为它是一种特别的函数，而我们实现的bind返回的却是一个普通函数，所以并不能完全模拟它。

总结

手写bind需要我们学习更多知识：bind的详尽用法（包括改变this、预置参数、new的表现）、闭包的使用（保存一些私有变量）、通过原型链的方式（this instanceof boundFn）判断是否通过new调用当前函数、使用call在执行时改变函数的this指向。以上就是全部的内容，欢迎大家继续关注我们后续更多的精彩内容。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7170.html