常见手写前端面试题，看看自己能写出来多少-阿里云开发者社区

每到跳槽的时候，总会遇到一些公司让手写几道面试题，从而看你对JavaScript掌握的程度

实现防抖函数

防抖函数原理：在事件被触发n秒后再执⾏回调，如果在这n秒内⼜被触发，则重新计时。

使用场景: 防⽌多次提交按钮，只执⾏最后提交的⼀次,表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似

  const debounce = (fn, delay) => {
    let timer = null;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  };

实现节流函数

节流函数原理:规定在⼀个单位时间内，只能触发⼀次函数。如果这个单位时间内触发多次函数，只有⼀次⽣效。

适⽤场景: 拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动,缩放场景：监控浏览器resize.

const throttle = (fn, delay = 500) => {
  let flag = true;
  return (...args) => {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
};

深克隆

简易版
1. 他⽆法实现对函数、RegExp等特殊对象的克隆
2. 会抛弃对象的constructor,所有的构造函数会指向Object
3. 对象有循环引⽤,会报错
```
  const newObj = JSON.parse(JSON.stringify(oldObj));
```

最终版本

⼀些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map

  const clone = (parent) => {
    const isType = (obj, type) => {
      if (typeof obj !== 'object') return false;
      const typeString = Object.prototype.toString.call(obj);
      let flag;
      switch (type) {
        case 'Array':
          flag = typeString === '[object Array]';
          break;
        case 'Date':
          flag = typeString === '[object Date]';
          break;
        case 'RegExp':
          flag = typeString === '[object RegExp]';
          break;
        default:
          flag = false;
      }
      return flag;
    };
    // 处理正则
    const getRegExp = (re) => {
      var flags = '';
      if (re.global) flags += 'g';
      if (re.ignoreCase) flags += 'i';
      if (re.multiline) flags += 'm';
      return flags;
    };
    // 维护两个储存循环引⽤的数组
    const parents = [];
    const children = [];
    const _clone = (parent) => {
      if (parent === null) return null;
      if (typeof parent !== 'object') return parent;
      let child, proto;
      if (isType(parent, 'Array')) {
        // 对数组做特殊处理
        child = [];
      } else if (isType(parent, 'RegExp')) {
        // 对正则对象做特殊处理
        child = new RegExp(parent.source, getRegExp(parent));
        if (parent.lastIndex) child.lastIndex = parent.lastIndex;
      } else if (isType(parent, 'Date')) {
        // 对Date对象做特殊处理
        child = new Date(parent.getTime());
      } else {
        // 处理对象原型
        proto = Object.getPrototypeOf(parent);
        // 利⽤Object.create切断原型链
        child = Object.create(proto);
      }
      // 处理循环引⽤
      const index = parents.indexOf(parent);
      if (index != -1) {
        // 如果⽗数组存在本对象,说明之前已经被引⽤过,直接返回此对象
        return children[index];
      }
      parents.push(parent);
      children.push(child);
      for (let i in parent) {
        // 递 归
        child[i] = _clone(parent[i]);
      }
      return child;
    };
    return _clone(parent);
  };

实现Event

  class EventEmeitter {
      constructor() {
        this._events = this._events || new Map(); // 储存事件/回调键值对
        this._maxListeners = this._maxListeners || 10; // 设⽴监听上限
      }
  }
  // 触发名为type的事件
  EventEmeitter.prototype.emit = function (type, ...args) {
    let handler;
    // 从储存事件键值对的this._events中获取对应事件回调函数
    handler = this._events.get(type);
    if (args.length > 0) {
      handler.apply(this, args);
    } else {
      handler.call(this);
    }
    return true; JS笔试题
    134
  };
  // 监听名为type的事件
  EventEmeitter.prototype.addListener = function (type, fn) {
    // 将type事件以及对应的fn函数放⼊this._events中储存
    if (!this._events.get(type)) {
      this._events.set(type, fn);
    }
  };
  // 触发名为type的事件
  EventEmeitter.prototype.emit = function (type, ...args) {
    let handler;
    handler = this._events.get(type);
    if (Array.isArray(handler)) {
      // 如果是⼀个数组说明有多个监听者,需要依次此触发⾥⾯的函数
      for (let i = 0; i < handler.length; i++) {
        if (args.length > 0) {
          handler[i].apply(this, args);
        } else {
          handler[i].call(this);
        }
      }
    } else {
      // 单个函数的情况我们直接触发即可
      if (args.length > 0) {
        handler.apply(this, args);
      } else {
        handler.call(this);
      }
    }
    return true;
  };
  // 监听名为type的事件
  EventEmeitter.prototype.addListener = function (type, fn) {
    const handler = this._events.get(type); // 获取对应事件名称的函数清单
    if (!handler) {
      this._events.set(type, fn);
    } else if (handler && typeof handler === "function") {
      // 如果handler是函数说明只有⼀个监听者
      this._events.set(type, [handler, fn]); // 多个监听者我们需要⽤数组储存
    } else {
      handler.push(fn); // 已经有多个监听者,那么直接往数组⾥push函数即可
    }
  };
  EventEmeitter.prototype.removeListener = function (type, fn) {
    const handler = this._events.get(type); // 获取对应事件名称的函数清
    // 如果是函数,说明只被监听了⼀次
    if (handler && typeof handler === "function") {
      this._events.delete(type, fn);
    } else {
      let postion;
      // 如果handler是数组,说明被监听多次要找到对应的函数
      for (let i = 0; i < handler.length; i++) {
        if (handler[i] === fn) {
          postion = i;
        } else {
          postion = -
          1;
        }
      }
      // 如果找到匹配的函数,从数组中清除
      if (postion !== -1) {
        // 找到数组对应的位置,直接清除此回调
        handler.splice(postion, 1);
        // 如果清除后只有⼀个函数,那么取消数组,以函数形式保存JS笔试题
        135
        if (handler.length === 1) {
          this._events.set(type,
            handler[0]);
        }
      } else {
        return
        this;
      }
    }
  }

实现instanceOf

  // 模 拟 instanceof
  function instance_of(L, R) {
    //L 表示左表达式，R 表示右表达式
    var O = R.prototype; // 取 R 的显示原型
    L = L.proto; // 取 L 的隐式原型
    while (true) {
      if (L === null) return false;
      if (O === L)
        // 这⾥重点：当 O 严格等于 L 时，返回 true
        return true;
      L = L.proto;
    }
  }

模拟new

new操作符做了这些事：
- 它创建了⼀个全新的对象
- 它会被执⾏[[Prototype]]（也就是proto）链接
- 它使this指向新创建的对象
- 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上
- 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调⽤将返回该对象引⽤
```
// objectFactory(name, 'cxk', '18')
  function objectFactory() {
    const obj = new Object();
    const Constructor = [].shift.call(arguments);
    obj. proto = Constructor.prototype;
    const ret = Constructor.apply(obj, arguments);
    return typeof ret === "object" ? ret : obj;
  }
```

实现⼀个call

将函数设为对象的属性
指定this到函数并传⼊给定参数执⾏函数

如果不传⼊参数，默认指向为 window

  Function.prototype.myCall = function (context) {
    //此处没有考虑context⾮object情况
    context.fn = this;
    let args = [];
    for (let i = 1, len = arguments.length; i < len; i++) {
      args.push(arguments[i]);
    }
    context.fn(...args);
    let result = context.fn(...args);
    delete context.fn;
    return result;
  };

实现apply⽅法

apply原理与call很相似

  Function.prototype.myapply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;
    var result;
    if (!arr) {
      result = context.fn();
    } else {
      var args = [];
      for (var i = 0, len = arr.length; i < len; i++) {
        args.push("arr[" + i + "]");
      }
      result = eval("context.fn(" + args + ")");
    }
    delete context.fn;
    return result;
  };

实现bind

返回⼀个函数，绑定this，传递预置参数

bind返回的函数可以作为构造函数使⽤。故作为构造函数时应使得this失效，但是传⼊的参数依然有效

  if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
      if (typeof this !== 'function') {
        throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
      } 
      var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () { }, fBound = function () {
          return fToBind.apply(this instanceof fBound
            ? this
            : oThis,
            aArgs.concat(Array.prototype.slice.call(arguments)));
        };
      if (this.prototype) {
        fNOP.prototype = this.prototype;
      }
      fBound.prototype = new fNOP();
      return fBound;
    };
  }

模拟Object.create

Object.create()⽅法创建⼀个新对象，使⽤现有的对象来提供新创建的对象的proto。

  function create (proto) {
    function F () { }
    F.prototype = proto;
    return new F();
  }

实现类的继承

function Parent (name) {
  this.parent = name
}
Parent.prototype.say = function () {
  console.log(`${this.parent}: 你打篮球的样⼦像kunkun`)
}
function Child (name, parent) {
  // 将⽗类的构造函数绑定在⼦类上
  Parent.call(this, parent)
  this.child = name
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.say = function () {
  console.log(`${this.parent}好，我是练习时⻓两年半的${this.child}`);
}
// 注意记得把⼦类的构造指向⼦类本身
Child.prototype.constructor = Child;
var parent = new Parent('father');
parent.say() // father: 你打篮球的样⼦像kunkun
var child = new Child('cxk', 'father');
child.say() // father好，我是练习时⻓两年半的cxk

实现JSON.parse

var json = '{"name":"cxk", "age":25}';
var obj = eval("(" + json + ")");

实现Promise

var PromisePolyfill = (function () {
  // 和reject不同的是resolve需要尝试展开thenable对象
  function tryToResolve (value) {
    if (this === value) {
      throw TypeError('Chaining cycle detected for promise!')
    }
    if (value !== null &&
      (typeof value === 'object' || typeof value === 'function')) {
      try {
        var then = value.then
        var thenAlreadyCalledOrThrow = false
        if (typeof then === 'function') {
          then.bind(value)(
            function (value2) {
              if (thenAlreadyCalledOrThrow) return
              thenAlreadyCalledOrThrow = true
              tryToResolve.bind(this, value2)()
            }.bind(this),
            function (reason2) {
              if (thenAlreadyCalledOrThrow) return
              thenAlreadyCalledOrThrow = true
              resolveOrReject.bind(this, 'rejected', reason2)()
            }.bind(this)
          )
        } else {
          resolveOrReject.bind(this, 'resolved', value)()
        }
      } catch (e) {
        if (thenAlreadyCalledOrThrow) return
        thenAlreadyCalledOrThrow = true
        resolveOrReject.bind(this, 'rejected', e)()
      }
    } else {
      resolveOrReject.bind(this, 'resolved', value)()
    }
  }
  function resolveOrReject (status, data) {
    if (this.status !== 'pending') return
    this.status = status
    this.data = data
    if (status === 'resolved') {
      for (var i = 0; i < this.resolveList.length; ++i) {
        this.resolveList[i]()
      }
    } else {
      for (i = 0; i < this.rejectList.length; ++i) {
        this.rejectList[i]()
      }
    }
  }
  function Promise (executor) {
    if (!(this instanceof Promise)) {
      throw Error('Promise can not be called without new !')
    }
    if (typeof executor !== 'function') {
      throw TypeError('Promise resolver ' + executor + ' is not a function')
    }
    this.status = 'pending'
    this.resolveList = []
    this.rejectList = []
    try {
      executor(tryToResolve.bind(this), resolveOrReject.bind(this, 'rejected'))
    } catch (e) {
      resolveOrReject.bind(this, 'rejected', e)()
    }
  }
  Promise.prototype.then = function (onFullfilled, onRejected) {
    if (typeof onFullfilled !== 'function') {
      onFullfilled = function (data) {
        return data
      }
    }
    if (typeof onRejected !== 'function') {
      onRejected = function (reason) {
        throw reason
      }
    }
    var executor = function (resolve, reject) {
      setTimeout(function () {
        try {
          var value = this.status === 'resolved'
            ? onFullfilled(this.data)
            : onRejected(this.data)
          resolve(value)
        } catch (e) {
          reject(e)
        }
      }.bind(this))
    }
    if (this.status !== 'pending') {
      return new Promise(executor.bind(this))
    } else {
      // pending
      return new Promise(function (resolve, reject) {
        this.resolveList.push(executor.bind(this, resolve, reject))
        this.rejectList.push(executor.bind(this, resolve, reject))
      }.bind(this))
    }
  }
  // for prmise A+ test
  Promise.deferred = Promise.defer = function () {
    var dfd = {}
    dfd.promise = new Promise(function (resolve, reject) {
      dfd.resolve = resolve
      dfd.reject = reject
    })
    return dfd
  }
  // for prmise A+ test
  if (typeof module !== 'undefined') {
    module.exports = Promise
  }
  return Promise
})()
PromisePolyfill.all = function (promises) {
  return new Promise((resolve, reject) => {
    const result = []
    let cnt = 0
    for (let i = 0; i < promises.length; ++i) {
      promises[i].then(value => {
        cnt++
        result[i] = value
        if (cnt === promises.length) resolve(result)
      }, reject)
    }
  })
}
PromisePolyfill.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; ++i) {
      promises[i].then(resolve, reject)
    }
  })
}

常见手写前端面试题，看看自己能写出来多少

实现防抖函数

实现节流函数

深克隆

实现Event

实现instanceOf

模拟new

实现⼀个call

实现apply⽅法

实现bind

模拟Object.create

实现类的继承

实现JSON.parse

实现Promise

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

常见手写前端面试题，看看自己能写出来多少

实现防抖函数

实现节流函数

深克隆

实现Event

实现instanceOf

模拟new

实现⼀个call

实现apply⽅法

实现bind

模拟Object.create

实现类的继承

实现JSON.parse

实现Promise

热门文章

最新文章

相关课程

相关电子书

相关实验场景