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);
        
  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值