揭秘new/bind/apply/call幕后：深入剖析模拟实现

深入剖析new/bind/apply/call的模拟实现

在JavaScript中，new、bind、apply和call是四个重要的函数，它们在开发过程中经常使用。其中，new是，调用方式是没法模仿的，只能以函数的形式实现，比如myNew()。而bind、apply和call都是函数，且都可以模拟实现。

一、 模拟实现new

模拟实现new函数时，需要先创建一个空对象，然后将构造函数的prototype属性赋给这个空对象，再将构造函数的this指向这个空对象，最后执行构造函数。

function myNew(fn, ...args) {
  const obj = {};
  obj.__proto__ = fn.prototype;
  fn.call(obj, ...args);
  return obj;
}

需要注意的是，如果构造函数有返回值，则myNew函数也需要返回这个返回值。

二、 模拟实现bind

模拟实现bind函数时，需要创建一个新的函数，这个新函数的this指向是bind函数的第一个参数，且新函数的参数是bind函数的第二个参数。

function myBind(fn, context, ...args) {
  return function (...fnArgs) {
    fn.call(context, ...args, ...fnArgs);
  };
}

三、 模拟实现apply

模拟实现apply函数时，需要将bind函数的第二个参数作为第一个参数传入bind函数，然后将bind函数的第三个参数作为第二个参数传入bind函数，最后返回bind函数的返回值。

function myApply(fn, context, args) {
  return myBind(fn, context)(...args);
}

四、 模拟实现call

模拟实现call函数时，需要将bind函数的第二个参数作为第一个参数传入bind函数，然后将bind函数的第三个参数作为第二个参数传入bind函数，最后返回bind函数的返回值。

function myCall(fn, context, ...args) {
  return myBind(fn, context)(...args);
}

总结

通过模拟实现new、bind、apply和call这四个重要函数，可以深入理解这些函数的运作原理和技术细节，以便在自己的项目中更好地应用这些函数。