掌握手写六大前端经典函数，实现面试从容应对

掌握前端核心函数：提升编码能力，展现技术实力

对于前端工程师而言，熟练运用一些常见的函数对于透彻理解语言底层原理和解决复杂问题至关重要。本文将带领你逐步实现六个经典的前端函数：call、apply、bind、new、instanceof 和 curry 。

1. call 和 apply

call 和 apply 都是用于调用函数的方法，但它们传递参数的方式有所不同。call 接受参数列表，而 apply 接受一个参数数组。

Function.prototype.myCall = function (context, ...args) {
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

Function.prototype.myApply = function (context, args) {
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

2. bind

bind 用于创建函数的新版本，其中 this 值固定为指定的上下文。

Function.prototype.myBind = function (context, ...args) {
  const fn = this;
  return function (...innerArgs) {
    return fn.apply(context, args.concat(innerArgs));
  };
};

3. new

new 运算符用于创建一个新对象，并将其指定为构造函数的 this 值。

function myNew(fn, ...args) {
  const obj = {};
  Object.setPrototypeOf(obj, fn.prototype);
  const result = fn.apply(obj, args);
  return typeof result === 'object' ? result : obj;
}

4. instanceof

instanceof 运算符用于检查一个对象是否属于某个类。

function myInstanceof(obj, fn) {
  let proto = obj.__proto__;
  while (proto) {
    if (proto === fn.prototype) {
      return true;
    }
    proto = proto.__proto__;
  }
  return false;
}

5. curry

curry 是一种将多参数函数转换为一系列单参数函数的技术。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    }
    return function (...innerArgs) {
      return curried(...args.concat(innerArgs));
    };
  };
}

结论

通过手动实现这些函数，你可以加深对 JavaScript 底层原理的理解，在面试中展示你的技术能力，并提升你的整体编码水平。这就好比装备了一个工具箱，让你能够自信地解决复杂问题，提升你的编码能力。

常见问题解答

1. 为什么需要自己实现这些函数？
   自己实现这些函数可以让你深入了解 JavaScript 的底层工作原理，并提升你的问题解决能力。

2. 实现这些函数有什么挑战？
   理解函数的内部机制以及如何处理 this 值可能会有些棘手。

3. 这些函数在实际应用中有什么用？
   这些函数在高级编程技术中广泛应用，如函数式编程、模块化和代码可重用性。

4. curry 函数的优势是什么？
   curry 函数使你可以分步构建函数，增强代码的可读性和灵活性。

5. instanceof 运算符和 myInstanceof 函数有什么区别？
   instanceof 是 JavaScript 的内置运算符，而 myInstanceof 是一个模拟实现，可以提供更好的理解。