美团前端二面高频面试题合集

手写 bind、apply、call

// call

Function.prototype.call = function (context, ...args) {
   
  context = context || window;

  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;

  context[fnSymbol](...args);
  delete context[fnSymbol];
}

// apply

Function.prototype.apply = function (context, argsArr) {
   
  context = context || window;

  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;

  context[fnSymbol](...argsArr);
  delete context[fnSymbol];
}

// bind

Function.prototype.bind = function (context, ...args) {
   
  context = context || window;
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;

  return function (..._args) {
   
    args = args.concat(_args);

    context[fnSymbol](...args);
    delete context[fnSymbol];   
  }
}

节流

节流(throttle)：触发高频事件，且 N 秒内只执行一次。这就好比公交车，10 分钟一趟，10 分钟内有多少人在公交站等我不管，10 分钟一到我就要发车走人！类似qq飞车的复位按钮。

核心思想：使用时间戳或标志来实现，立即执行一次，然后每 N 秒执行一次。如果N秒内触发则直接返回。

应用：节流常应用于鼠标不断点击触发、监听滚动事件。

实现:

// 版本一：标志实现
function throttle(fn, wait){
   
    let flag = true;  // 设置一个标志
    return function(...args){
   
        if(!flag) return;
        flag = false;
        setTimeout(() => {
   
            fn.call(this, ...args);
            flag = true;
        }, wait);
    }
}

// 版本二：时间戳实现
function throttle(fn, wait) {
   
    let pre =