京东前端二面常考手写面试题（必备）

实现发布-订阅模式

class EventCenter{
   
  // 1. 定义事件容器，用来装事件数组
    let handlers = {
   }

  // 2. 添加事件方法，参数：事件名 事件方法
  addEventListener(type, handler) {
   
    // 创建新数组容器
    if (!this.handlers[type]) {
   
      this.handlers[type] = []
    }
    // 存入事件
    this.handlers[type].push(handler)
  }

  // 3. 触发事件，参数：事件名 事件参数
  dispatchEvent(type, params) {
   
    // 若没有注册该事件则抛出错误
    if (!this.handlers[type]) {
   
      return new Error('该事件未注册')
    }
    // 触发事件
    this.handlers[type].forEach(handler => {
   
      handler(...params)
    })
  }

  // 4. 事件移除，参数：事件名 要删除事件，若无第二个参数则删除该事件的订阅和发布
  removeEventListener(type, handler) {
   
    if (!this.handlers[type]) {
   
      return new Error('事件无效')
    }
    if (!handler) {
   
      // 移除事件
      delete this.handlers[type]
    } else {
   
      const index = this.handlers[type].findIndex(el => el === handler)
      if (index === -1) {
   
        return new Error('无该绑定事件')
      }
      // 移除事件
      this.handlers[type].splice(index, 1)
      if (this.handlers[type].length === 0) {
   
        delete this.handlers[type]
      }
    }
  }
}

手写 new 操作符

在调用 new 的过程中会发生以上四件事情：

（1）首先创建了一个新的空对象

（2）设置原型，将对象的原型设置为函数的 prototype 对象。

（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）

（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

function objectFactory() {
   
  let newObject = null;
  let constructor = Array.prototype.shift.call(arguments);
  let result = null;
  // 判断参数是否是一个函数
  if (typeof constructor !== "function") {
   
    console.error("type error");
    return;
  }
  // 新建一个空对象，对象的原型为构造函数的 prototype 对象
  newObject = Object.create(constructor.prototype);
  // 将 this 指向新建对象，并执行函数
  result = constructor.apply(newObject, arguments);
  // 判断返回对象
  let flag = result && (typeof result === "object" || typeof result === "function");
  // 判断返回结果
  return flag ? result : newObject;
}
// 使用方法
objectFactory(构造函数, 初始化参数);

实现apply方法

apply原理与call很相似，不多赘述

// 模拟 apply
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;
};

debounce（防抖）

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

const debounce = (fn, time) => {
   
  let timeout = null;
  return function() {
   
    clearTimeout(timeout)
    timeout = setTimeout(() => {
   
      fn.apply(this, arguments);
    }, time);
  }
};

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

判断对象是否存在循环引用

循环引用对象本来没有什么问题，但是序列化的时候就会发生问题，比如调用JSON.stringify()对该类对象进行序列化，就会报错: Converting circular structure to JSON.

下面方法可以用来判断一个对象中是否已存在循环引用：

const isCycleObject = (obj,parent) => {
   
    const parentArr = parent || [obj];
    for(let i in obj) {
   
        if(typeof obj[i] === 'object') {
   
            let flag = false;
            parentArr.forEach((pObj) => {
   
                if(pObj === obj[i]){
   
                    flag = true;
                }
            })
            if(flag) return true;
            flag = isCycleObject(obj[i],[...parentArr