JavaScript闭包汇总

1. 手写一个once函数

要求

第一次调用结果为函数返回值，后续调用的结果为第一次的返回值。

源代码

let once = function (fun) {
  let status = true
  let result = undefined
  return function () {
    if (status) {
      status = false
      result = fun(...arguments)
    }
    return result
  }
}

测试

let fn1 = function () {
  return Math.random()
}
let fn2 = once(fn1)
let res1 = fn2()
console.log(res1)
let res2 = fn2()
console.log(res2)

测试结果

0.7698273333982397
0.7698273333982397
0.7698273333982397
0.7698273333982397

2. 手写一个计数器

要求

函数每调用一次，计数器值加1

源代码

let count = (function () {
  let counter = 0
  return function () {
    return (++counter)
  }
})()

测试

console.log(count())
console.log(count())
console.log(count())
console.log(count())

测试结果

1
2
3
4

3. JS函数重载

要求

根据参数的不同进行不同的逻辑

源代码

let addMethods = (object, name, fun) => {
  const old = object[name]
  object[name] = function () {
    if (fun.length === arguments.length) {
      return fun.apply(this, arguments)
    } else if (typeof old === 'function') {
      return old.apply(this, arguments)
    }
  }
}

let obj = {}

addMethods(obj, 'fun', function (params) {
  console.log(params)
})

addMethods(obj, 'fun', function (params1, params2) {
  console.log(params1, params2)
})

addMethods(obj, 'fun', function (params1, params2, params3) {
  console.log(params1, params2, params3)
})

测试

obj.fun(1)
obj.fun(1, 2)
obj.fun(1, 2, 3)
obj.fun(1)
obj.fun(1, 2)
obj.fun(1, 2, 3)

测试结果

1
1 2
1 2 3
1
1 2
1 2 3