重新定义函数功能：揭秘new、call、apply、bind背后的秘密

2024-02-19 05:56:24

new 的实现

new 运算符的作用是创建一个新对象并调用其构造函数，可谓 JavaScript 中最常用的操作符之一。其工作流程大致如下：

创建一个新对象并将其作为构造函数的 this 上下文。
调用构造函数，并将所有参数传递给它。
构造函数返回一个对象时，将该对象赋给刚创建的新对象。

让我们自己实现一下 new 运算符：

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

call 的实现

call 方法允许将函数应用于指定的 this 值，并传递给它指定的参数。函数内部的 this 值将指向该指定的值，而其参数将替换函数默认的参数。我们可以这样实现它：

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

apply 的实现

apply 方法与 call 方法相似，但它将参数作为数组传递给函数，而不是逐个传递。我们可以用这种方式实现 apply：

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

bind 的实现

bind 方法将函数绑定到指定的对象，并返回一个新的函数。新函数将具有相同的参数和功能，但其 this 值将被绑定到给定的对象。以下是如何实现 bind：

Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...callArgs) {
    return fn.apply(context, [...args, ...callArgs]);
  };
};

浅拷贝与深拷贝

拷贝是指将一个对象的数据复制到另一个对象中。浅拷贝只复制第一层属性，而深拷贝则复制所有属性，包括嵌套的对象。

实现浅拷贝很简单，可以使用 Object.assign() 方法或扩展运算符：

const obj1 = { name: 'John', age: 30 };
const obj2 = Object.assign({}, obj1); // 浅拷贝
const obj3 = { ...obj1 }; // 浅拷贝

深拷贝则需要递归复制所有属性，包括嵌套的对象，其实现稍微复杂一些：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

节流

节流是一种函数优化技术，它可以防止函数在一定时间间隔内被多次调用。节流有两种实现方式，一种是使用时间戳，另一种是使用定时器。

// 使用时间戳的节流
function throttle(fn, delay) {
  let lastCallTime = 0;

  return function(...args) {
    const now = Date.now();
    if (now - lastCallTime >= delay) {
      lastCallTime = now;
      fn.apply(this, args);
    }
  };
}

// 使用定时器的节流
function throttle(fn, delay) {
  let timerId = null;

  return function(...args) {
    if (!timerId) {
      timerId = setTimeout(() => {
        fn.apply(this, args);
        timerId = null;
      }, delay);
    }
  };
}

防抖

防抖也是一种函数优化技术，它可以防止函数在一段时间内被重复调用。与节流不同的是，防抖只会在最后一次函数调用结束后才执行函数。

function debounce(fn, delay) {
  let timerId = null;

  return function(...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

Promise.all()

Promise.all() 方法可以接收一个 Promise 数组并返回一个新的 Promise。新的 Promise 会在所有传入的 Promise 都完成后才解析。如果任何一个 Promise 被拒绝，新的 Promise 也会被拒绝。

Promise.all([promise1, promise2, promise3])
  .then(results => {
    // 所有 Promise 都已成功解析，results 包含每个 Promise 的结果
  })
  .catch(error => {
    // 其中一个 Promise 被拒绝，error 包含拒绝原因
  });