2022秋招前端面试题（一）（附答案）

闭包产生的本质

当前环境中存在指向父级作用域的引用

手写 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];   
  }
}

复制代码

前端进阶面试题详细解答

函数防抖

触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会重新计时。

简单版：函数内部支持使用 this 和 event 对象；

function debounce(func, wait) {
   
    var timeout;
    return function () {
   
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
   
            func.apply(context, args)
        }, wait);
    }
}
复制代码

使用：

var node = document.getElementById('layout')
function getUserAction(e) {
   
    console.log(this, e)  // 分别打印：node 这个节点 和 MouseEvent
    node.innerHTML = count++;
};
node.onmousemove = debounce(getUserAction, 1000)
复制代码

最终版：除了支持 this 和 event 外，还支持以下功能：

• 支持立即执行；
• 函数可能有返回值；
• 支持取消功能；

function debounce(func, wait, immediate) {
   
    var timeout, result;

    var debounced = function () {
   
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);