js函数相关高级用法

一、惰性载入函数(lazy function)

使用场景：当一个函数中的判断分支只用执行一次（第一次调用时执行），后续不会再变化，则可以使用惰性函数来提高性能。

var addEvent = function(elem, type, handler) {
    if (window.addEventListener) {
         elem.addEventListener(type, handler, false);
    }
    else if (window.attachEvent) {
        elem.attachEvent('on' + type, handler);
    }
};

上面的函数是一个事件监听函数，每次调用时都会判断使用标准的事件监听函数还是IE事件监听函数，其实只用判断一次就可以知道该使用哪种监听函数，改为惰性函数的代码如下：

var addEvent=function(elem, type, handler){
    if (window.addEventListener) {
        addEvent=function(elem, type, handler){
            elem.addEventListener(type, handler, false);
        }
    }
    else if (window.attachEvent) {
        addEvent=function(elem, type, handler){
            elem.attachEvent(type, handler, false);
        }
    }
    //当addEvent函数第一次被外部调用时，会被覆盖为另外的函数，但覆盖后的函数体的代码不会执行，因此需要执行一次
    addEvent(elem,type,handler);
}

另一种方法是声明后立即给出合适的函数

var addEvent2=(function(elem, type, handler){
    if (window.addEventListener) {
        return function(elem, type, handler){
            elem.addEventListener(type, handler, false);
        }
    }
    else if (window.attachEvent) {
        return function(elem, type, handler){
            elem.attachEvent(type, handler, false);
        }
    }
})(document.body,'click',function(){
    console.log('单击了');
})
console.log(addEvent2)

二、一次性函数(once function)

 即只会执行一次的函数，核心思想是执行某个函数一次后将函数覆盖为null。

       //一次执行函数的工厂
       function once(fn,context){
           var result;
           return ()=>{
               if(typeof(fn)==='function'){
                   result=fn.apply(context||this,arguments);
                   fn=null;
               }
               return result;
           }
       }
       var canOnlyFireOnce=once(()=>{
           console.log('测量屏幕宽度');
           return {deviceWidth:'375px',deviceHeight:'480px'}
       })
       var deviceInfo=canOnlyFireOnce(); //输出“测量屏幕宽度”
       var deviceInfo2=canOnlyFireOnce(); //不会输出任何东西
       console.log(deviceInfo2);

三、记忆函数

核心思想：让一个函数记住处理过的参数，并可以根据相应的参数把结果缓存起来，避免重复计算。

实现方式：

1.使用闭包

      function memoryFunction(fn){
            var cacheArgs,cacheReturn;
            return function(a){
                if(a===cacheArgs){
                    return cacheReturn;
                }
                cacheArgs=a;
                cacheReturn=fn.call(null,a);
                return cacheReturn;
            }
      }
      var demo=memoryFunction((a)=>a*1000);
      var b=demo(1), c=demo(1);
      console.log(b,c)

上面代码中，第二次调用demo函数时，直接返回值，不会再次计算

2.函数也是一个对象，因此可以动态的给函数增加静态的属来记录缓存键和结果

       function isPrime(value) {　
            if (!isPrime.answers) {　
                isPrime.answers = {};　
            }
            //创建缓存　
            if (isPrime.answers[value] !== undefined) {　　
                return isPrime.answers[value];　
            }
            //检查缓存键
            var prime = value !== 0 && value !== 1; // 1 is not a prime 　 
            for (var i = 2; i < value; i++) {　　
                if (value % i === 0) {　　　　
                    prime = false;　　　　
                    break;　　
                }
            }　
            //缓存计算的结果
            return isPrime.answers[value] = prime;
        }

　　

四、纯函数(pure function)

 所谓纯函数就是一个函数返回的结果只依赖于其参数，并且在执行过程中没有副作用，这样的函数就叫纯函数。

条件1：返回结果直依赖参数

const a = 1
const foo = (b) => a + b
foo(2) // => 3

 上面的代码中，foo函数的返回值依赖了外部的a变理，因此不是纯函数

const a = 1
const foo = (x, b) => x + b
foo(1, 2) // => 3

　上面的代码中，foo函数的返回值只跟其参数有关且没有副作用，因此是纯函数

条件2：执行过程没有副作用

什么是副作用？所谓副作用就是指函数执行过程中对外产生了可观察的变化。看例子

const a = 1
const counter = { x: 1 }
const foo = (obj, b) => {
  obj.x = 2
  return obj.x + b
}
foo(counter, 2) // => 4
counter.x // => 2

上面代码中foo 的结果只跟传入参数有关，但在内部加了一句 obj.x = 2，计算前 counter.x 是 1，但是计算以后 counter.x 是 2。foo 函数的执行对外部的 counter 产生了影响，修改了外部传进来的对象，也就是产生了副作用，因此不是纯函数。

const a = 1
const counter = { x: 1 }
const foo = (obj, b) => {
  return obj.x + b
}
foo(counter, 2) // => 3
counter.x // => 1

  上面代码中foo的结果只跟传入的参数有关，且计算的过程里面并不会对传入的对象进行修改，计算前后的 counter 不会发生任何变化，计算前是 1，计算后也是 1，它现在是纯的。

  下面的代码也是纯函数，因为对象是在函数内定义的，对外部不可见。

const foo = (b) => {
  const obj = { x: 1 }
  obj.x = 2
  return obj.x + b
}

五、高阶函数(high order functions)

 所谓高阶函数是这样一种函数：即可以把函数作为参数传递，或者返回的值是一个函数。

比如Array.Map,Array.Sort，还有我们上面写的一次性执行函数演示代码都是高阶函数。

六、组合函数(compose function)

 作用：将需要嵌套执行的函数平铺。嵌套执行指的是，一个函数的返回值将作为另一个函数的参数。

function C(){
    console.log('C')
    return function(){
        console.log('C函数回调执行')
    }
}
function B(CM){
    console.log('B')
    return function(){
        console.log('B函数回调执行')
        CM()
    }
}
function A(BM){
    console.log('A')
    return function(){
        console.log('A函数回调执行')
        BM()
    }
}
A(B(C()))()

改为compose方式后调用如下;

compose(A,B,C)()

compose函数的实现：

function compose(...funcs) {
  //没有传入函数参数，就返回一个默认函数（直接返回参数）
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
  // 单元素数组时调用reduce，会直接返回该元素，不会执行callback;所以这里手动执行
    return funcs[0]
  }
  // 依次拼凑执行函数
  return funcs.reduce((prev, current) => (...args) => prev(current(...args)))
}

举例分析:compose(f4,f3,f2,f1)()

• reduce回调函数第一次执行时，返回值为 函数 (...args) => f4(f3(...args))，作为下一次执行的prev参数
• 回调函数第二次执行时，返回值为 函数(...args) => f4(f3(f2(...args))),作为下一次执行的prev参数
• 回调函数第三次执行时，返回值为 函数(...args) => f4(f3(f2(f1(...args))))

七、函数柯里化（function currying）

把一个接收多个参数的函数分解成逐层调用的函数，每一层接收一部分参数，余下的参数由下一层再进行分解。

假如有如下函数：

       function add(a,b,c,d,e){
           return a+b+c+d+e;
       }
       console.log(add(1,2,3,4,5)); //15

 现在要求每一步调用最多只能传2个参数，改写为柯里化版本如下：

       function curryAdd(a,b){
           return (c,d)=>{
               return (e)=>{
                   return a+b+c+d+e;
               }
           }
       }
       console.log(curryAdd(1,2)(3,4)(5)); //15

   看似把简单问题进行了复杂化，那么柯里化函数有什么作用呢？最大的用处就是可以固定不可变参数和可变参数，消除重复参数

function ajax(url,type,data){
 // ...
}
ajax('www.my.com','GET')
ajax('www.my.com','POST')
//采化柯里化固定重复参数
let newAjax=curryAjax('www.my.com')
//只需要传入可变参数即可
newAjax('GET') 
newAjax('POST')

　　

八、防抖函数(debouncing)

 核心思想：对同一个函数进行连续调用时，只有最后次调用生效，

实现方式：使用setTimeout方法，每次调用时，清除上一次的timer,并将本次的timer记录下来就可以保证只有最后一次调用会生效

 

function debounce(method,time){
    var timer = null ;
    return function(){
        var context = this;
        //在函数执行的时候先清除timer定时器;
        if(timer)clearTimeout(timer);
        timer = setTimeout(function(){
            method.call(context);
        },time);
    }
}

　　

九、节流函数(throttling)

核心思想：对同一个函数进行连续调用时，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用

实现方式：使用setTimeout方法，给定两个时间，后面的时间减去前面的时间，到达我们给定的时间就去触发一次这个事件

 

 function throttle(method,time){
            var timer = null;
            var startTime = new Date();
            return function(){
                var context = this;
                var endTime = new Date();
                var resTime = endTime - startTime;
                //判断大于等于我们给的时间采取执行函数;
                if(resTime >= time){
                    method.call(context);
                    //执行完函数之后重置初始时间，等于最后一次触发的时间
                    startTime = endTime;
                }
            }
}