11 综合应用

/**
 * 手写 instanceof
 */

function myInstanceof(instance: any, origin: any): boolean {
  if (instance == null) return false // 排除 null undefined

  const type = typeof instance
  if (type !== 'object' && type !== 'function') {
    // 值类型
    return false
  }

  let tempInstance = instance // 防止修改 instance
  while (tempInstance) {
    // 向上查找, 最终到 null
    if (tempInstance.__proto__ === origin.prototype) {
      return true
    } else {
      tempInstance = tempInstance.__proto__
    }
  }
  return false
}

// 功能测试
console.log(myInstanceof({}, Object))
console.log(myInstanceof([], Object))
console.log(myInstanceof('', Object))

/**
 * 手写 bind 函数
 * @param context bind 传入的 this
 * @param bindArgs bind 传入的各个参数
 */

// @ts-ignore
Function.prototype.customBind = function (context: any, ...bindArgs: any[]) {
  const self = this // 当前函数本身
  return function (...args: any[]) {
    const newArgs = bindArgs.concat(args) // 拼接参数
    self.apply(context, newArgs)
  }
}

// 功能测试

function fn(this: any, a: any, b: any, c: any) {
  console.info(this, a, b, c)
}

// @ts-ignore
const fn1 = fn.customBind(10)
fn1(20, 30, 40)

// @ts-ignore
const fn2 = fn.customBind(10, 20)
fn2(30, 40)

/**
 * 手写 call
 */
// @ts-ignore
Function.prototype.customCall = function (context: any, ...args: any[]) {
  if (context == null) context = globalThis
  if (typeof context !== 'object') context = new Object(context)

  const fnKey = Symbol()
  context[fnKey] = this // this 为当前函数, 相当于给绑定对象添加了当前 fn 函数属性

  const res = context[fnKey](...args) // 绑定了 this，相当于执行绑定对象函数属性，此时 this 为绑定的对象

  delete context[fnKey] // 清理掉函数属性, 防止污染

  return res
}

// 功能测试

function fn(this: any, a: any, b: any, c: any) {
  console.info(this, a, b, c)
}

// @ts-ignore
fn.customCall({ x: 100 }, 10, 20, 30)

/**
 * 手写 apply
 */
// @ts-ignore
Function.prototype.customCall = function (context: any, args: any[] = []) {
  if (context == null) context = globalThis
  if (typeof context !== 'object') context = new Object(context)

  const fnKey = Symbol()
  context[fnKey] = this // this 为当前函数, 相当于给绑定对象添加了当前 fn 函数属性

  const res = context[fnKey](...args) // 绑定了 this，相当于执行绑定对象函数属性，此时 this 为绑定的对象

  delete context[fnKey] // 清理掉函数属性, 防止污染

  return res
}

// 功能测试

function fn(this: any, a: any, b: any, c: any) {
  console.info(this, a, b, c)
}

// @ts-ignore
fn.customCall({ x: 100 }, [10, 20, 30])

/**
 * 数组转树结构
 */

interface IArrayItem {
  id: number
  name: string
  parentId: number
}

interface ITreeNode {
  id: number
  name: string
  children?: ITreeNode[]
}

function convert(arr: IArrayItem[]): ITreeNode | null {
  // 用于 id 和 treeNode 的映射
  const idToTreeNode: Map<number, ITreeNode> = new Map()

  let root = null
  arr.forEach((item) => {
    const { id, name, parentId } = item

    // 定义 tree node 并加入 map
    const treeNode: ITreeNode = { id, name }
    idToTreeNode.set(id, treeNode)

    // 找到 parentNode 并加入它们的 children
    const parentNode = idToTreeNode.get(parentId)
    if (parentNode) {
      if (parentNode.children == null) parentNode.children = []
      parentNode.children.push(treeNode)
    }

    // 找到根节点
    if (parentId === 0) root = treeNode
  })

  return root
}

const arr = [
  { id: 1, name: 'A', parentId: 0 },
  { id: 2, name: 'A', parentId: 1 },
  { id: 3, name: 'A', parentId: 2 },
  { id: 4, name: 'A', parentId: 3 },
  { id: 5, name: 'A', parentId: 4 },
  { id: 6, name: 'A', parentId: 5 },
]

const tree = convert(arr)
console.info(tree)