面试常见手写题 ​

export default function debounce(
  fn, // 需要防抖处理的函数
  wait = 1000, // 防抖时间
  immediate = false, // 是否需要立即执行
) {
  let timer = null
  let isImmediate = false

  return (...args) => {
    if (timer) clearTimeout(timer)

    if (immediate && isImmediate) {
      fn(...args)
      isImmediate = true
    }

    timer = setTimeout(() => {
      fn(...args)
      isImmediate = false
    }, wait)
  }
}

export default function throttle(
  fn, // 需要节流处理的函数
  wait = 1000,
) {
  let preTime = 0

  return (...args) => {
    const currentTime = Date.now()
    const diffTime = currentTime - preTime

    if (diffTime - wait > 0) {
      fn(...args)
      preTime = currentTime
    }
  }
}

function deepClone(obj, map = new WeakMap()) {
  if (obj === null) return obj
  if (obj instanceof Date) return new Date(obj)
  if (obj instanceof RegExp) return new RegExp(obj)
  if (typeof obj !== 'object') return obj
  if (map.has(obj)) return map.get(obj) //解决循环引用

  const cloneobj = new obj.constructor() //生成obj的对应类型
  map.set(obj, cloneobj)

  Reflect.ownKeys(obj).forEach((key) => {
    cloneobj[key] = deepClone(obj[key], map)
  })
  return cloneobj
}

// MyPromise.js

const PROMISE_STATUS = {
  PENDING: 'pending',
  FULFILLED: 'fulfilled',
  REJECTED: 'rejected',
}

function resolvePromise(thenPromise, x, resolve, reject) {
  // 如果相等了，说明return的是自己，抛出类型错误并返回
  if (thenPromise === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  // 判断x是不是 MyPromise 实例对象
  if (x instanceof MyPromise) {
    // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }
}

export default class MyPromise {
  constructor(fn) {
    // fn 是一个执行器，进入会立即执行
    // 并传入resolve和reject方法
    try {
      fn(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
  }

  // 储存状态的变量，初始值是 pending
  status = PROMISE_STATUS.PENDING
  // 成功之后的值
  value = null
  // 失败之后的原因
  reason = null

  // 存储成功回调函数
  onFulfilledCallbacks = []
  // 存储失败回调函数
  onRejectedCallbacks = []

  // 更改成功后的状态
  resolve = (value) => {
    // 只有状态是等待，才执行状态修改
    if (this.status !== PROMISE_STATUS.PENDING) return

    // 状态修改为成功
    this.status = PROMISE_STATUS.FULFILLED
    // 保存成功之后的值
    this.value = value
    // resolve里面将所有成功的回调拿出来执行
    while (this.onFulfilledCallbacks.length) {
      // Array.shift() 取出数组第一个元素，然后（）调用
      // shift不是纯函数，取出后，数组将失去该元素，直到数组为空
      this.onFulfilledCallbacks.shift()(value)
    }
  }

  // 更改失败后的状态
  reject = (reason) => {
    // 只有状态是等待，才执行状态修改
    if (this.status !== PROMISE_STATUS.PENDING) return

    // 状态成功为失败
    this.status = PROMISE_STATUS.REJECTED
    // 保存失败后的原因
    this.reason = reason
    // resolve里面将所有失败的回调拿出来执行
    while (this.onRejectedCallbacks.length) {
      this.onRejectedCallbacks.shift()(reason)
    }
  }

  then(onFulfilled, onRejected) {
    // then 后面可能什么都没有传入，所以需要做下判断
    const realOnFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value

    const realOnRejected =
      typeof onRejected === 'function'
        ? onRejected
        : (reason) => {
            throw reason
          }

    // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
    const thenPromise = new MyPromise((resolve, reject) => {
      const fulfilledMicrotask = () => {
        // 创建一个微任务等待 promise2 完成初始化
        // https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide
        queueMicrotask(() => {
          try {
            // 获取成功回调函数的执行结果
            const x = realOnFulfilled(this.value)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      }

      const rejectedMicrotask = () => {
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 调用失败回调，并且把原因返回
            const x = realOnRejected(this.reason)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      }

      // 判断状态
      if (this.status === PROMISE_STATUS.FULFILLED) {
        fulfilledMicrotask()
      } else if (this.status === PROMISE_STATUS.REJECTED) {
        rejectedMicrotask()
      } else if (this.status === PROMISE_STATUS.PENDING) {
        // 等待，因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
        // 等到执行成功失败函数的时候再传递
        this.onFulfilledCallbacks.push(fulfilledMicrotask)
        this.onRejectedCallbacks.push(rejectedMicrotask)
      }
    })

    return thenPromise
  }

  // resolve 静态方法
  static resolve(parameter) {
    // 如果传入 MyPromise 就直接返回
    if (parameter instanceof MyPromise) {
      return parameter
    }

    // 转成常规方式
    return new MyPromise((resolve) => {
      resolve(parameter)
    })
  }

  // reject 静态方法
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }

  static all() {}
  static race() {}
  static allSettled() {}
  static any() {}
}

Function.prototype.myCall = function(ctx) {
  if (typeof this !== 'function') {
      throw New Error('类型异常')
  }
  // 获取参数
	let args = [...arguments].slice(1)
	let result = null
	// 判断是否传入 ctx， 没有传的话取 window
	ctx = ctx || window
	// 将调用函数设为对象的方法
	ctx.fn = this
  // 执行函数
	result = ctx.fn(...args)
	// 执行结束移除属性
	delete ctx.fn
	return result
}

Function.prototype.myApply = Function(ctx) {
  if (typeof this !== 'function') {
    throw New Error('类型异常')
  }
  let result = null
  ctx = ctx || window
  ctx.fn = this

  if (arguments[1]) {
    result = ctx.fn(...arguments[1])
  } else {
    result = ctx.fn()
  }

  delete ctx.fn
  return result
}

Function.prototype.myBind = Function(ctx) {
  if (typeof this !== 'function') {
    throw New Error('类型异常')
  }
  let args = [...arguments].slice(1)
  let fn = this

  return function fn() {
    return fn.apply(
      this instanceof Fn ? this : ctx
      args.concat(...arguments)
    )
  }
}

class EventBus {
  // 事件调度中心
  map = {}

  // 订阅事件
  on = (name, fn) => {
    // 创建、获取数组容器
    this.map[name] = this.map[name] || []
    // 保存事件
    this.map[name].push(fn)
  }

  // 取消订阅
  off = (name, fn) => {
    const fnList = this.map[name] || []
    const index = fnList.indexof(fn)
    if (index < 0) return
    fnList.splice(index, 1)
  }

  // 发布订阅
  emit = (name, data) => {
    const fnList = this.map[name] || []
    fnList.forEach((fn) => fn.call(undefined, data))
  }
}

// 使用
const e = new MyBus()
e.on('click', (name) => {
  console.log('hi ' + name)
})
e.on('click', (name) => {
  console.log('hello ' + name)
})
setTimeout(() => {
  e.emit('click', 'frank')
}, 3000)

// 接收：字符串，正则，数组
const patternTypes: Array<Function> = [String, RegExp, Array]

// keep-alive 组件
export default {
  name: 'keep-alive',
  // 抽象组件，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
  abstract: true,
  props: {
    // 匹配的组件，缓存
    include: patternTypes,
    // 不去匹配的组件，不缓存
    exclude: patternTypes,
    // 缓存组件的最大实例数量, 由于缓存的是组件实例（vnode），
    // 数量过多的时候，会占用过多的内存，可以用max指定上限
    max: [String, Number],
  },
  created() {
    // 用于初始化缓存虚拟DOM数组和vnode的key
    this.cache = Object.create(null)
    this.keys = []
  },
  mounted() {
    // prune 削减精简[v.]
    // 去监控include和exclude的改变，根据最新的include和exclude的内容，
    // 来实时削减缓存的组件的内容
    this.$watch('include', (val) => {
      pruneCache(this, (name) => matches(val, name))
    })
    this.$watch('exclude', (val) => {
      pruneCache(this, (name) => !matches(val, name))
    })
  },
  destroyed() {
    // 销毁缓存cache的组件实例
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },
}

function MyNew(fn, ...args) {
  if (typeof fn !== 'function') {
    throw new Error('类型异常')
  }

  const obj = Object.create(fn.prototype)
  const val = fn.apply(obj, args)

  return typeof val === 'object' ? val : obj
}

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

function curry(fn, ...args) {
  return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args)
}

function add(...args) {
  let allArgs = [...args]

  function fn(...newArgs) {
    allArgs = [...allArgs, ...newArgs]
    return fn
  }

  fn.toString = function () {
    if (!allArgs.length) {
      return
    }
    return allArgs.reduce((sum, cur) => sum + cur)
  }
  return fn
}

const getUrlParams = (url) => {
  let reg = /([^?&=]+)=([^?&=]+)/g
  let obj = {}
  url.replace(reg, () => {
    obj[arguments[1]] = arguments[2]
  })
  return obj
}

// 正常写法
const Fibonacci = (n) => {
  if (n <= 1) return 1
  return Fibonacci(n - 1) + Fibonacci(n - 2)
}

// 优化 - 尾递归
const Fibonacci = (n, sum1 = 1, sum2 = 1) => {
  if (n <= 1) return sum2
  return Fibonacci(n - 1, sum2, sum1 + sum2)
}