JavaScriptの高階関数

個人のブログ

高階関数とは何ですか

定義関数で「JavaScriptのデザインパターンと開発の実践」はパラメータとして渡すことができ、それは、戻り値として出力することができます

以下の条件が満たされています：

1. 入力一つ以上の関数として受け付け
2. 関数の出力

高階関数は、これらの機能は、通常タイプの機能以上のものを含んでいます。関数型プログラミングでは、高階関数は、他の機能がカレーと呼ばれる返します。

送信パラメータの関数として

引数として、我々は簡単にビジネスコード変更と変わらない部分を分離することができ、ビジネス・ロジックに変更の一部を機能を描くことができます

コールバック関数：

メソッドへの伝達関数は、関数が実行結果を待った後、すぐに実行されません。

let func = function (callback){
    if(n === 'owen'){
        callback() //回调函数
    }
}
 function say (){
     console.log('Hello Word')
 }
 func(say)

配列オブジェクト一般的に用いられる方法

[1,2,3,4].forEach(iteration)
 function iteration(v){
     console.log(v)
 }

戻り値として出力します

関数は、プロセスの継続が実行中であることを意味し、実行可能機能を、返すように続けましょう。

データ型の分析

let type = type =>{
    return obj => Object.prototype.toString.call(obj) === `[object ${type}]`
}
let isArray = type('Array'),isString = type('String'),isNumber = type('Number'),isObject = type('Object');

// or
let Type = (function(){
    let type = {},types = ['Object','Array','Number','String']
    for (let val of  types) {
        (function(str){
            type[`is${str}`] = (obj) => Object.prototype.toString.call( obj ) === `[object ${str}]`
        }(val))
    }
    console.log(type)
    return type
}())
Type.isNumber(2) // true

AOP（スライス指向プログラミング）を達成

AOP前のコンパイラとランタイムをダイナミックエージェント技術として統一プログラム機能のメンテナンスを実施します。
JAVA言語AOPは、いくつかのビジネス・ロジックは、コア機能とは何の関係は、通常、ログ統計、セキュリティ制御、例外処理ランプを含め、引き出されていません。ビジネスロジックに組み込まれた「ダイナミック織り」の手段で。
利点：それはきれいに保つことができ、非常に粘着性のビジネス・ロジック・モジュールは、再利用ログ統計やその他の機能モジュールを容易にします。

AOPはJavaScriptで実装されている他の機能に「織り」の機能を指す
具体。

Function.prototype.before = function(beforeFn){
    let that = this; // 谁调用指向谁 下面是由 func 函数调用所以是指向 func

    return function( ...args){
        beforeFn.apply(this,args) // 执行回调函数 beforeFn
        return that.apply(this,args) // 执行原函数
    }
}

Function.prototype.after = function(afterFn){
    let that = this; // 谁调用指向谁 下面是由befor函数调用所以是指向 befor
    return function( ...args){
        let ret = that.apply(this,args) // 执行并接收原对象
        afterFn.apply(this,args) //  执行回调函数 beforeFn
        return ret
    }
}
var func = function (){
    console.log(2)
}
func = func.before(function (){
    console.log(1)
}).after(function (){
    console.log(3)
})
func()
// 1 2 3

カリー化機能（関数カリー化）

数学およびコンピュータサイエンスでは、関数をカリー化する関数のパラメータを使用して、複数のパラメータの系列に変換することで、残りのパラメータを取る新しい関数を返します

部分的な評価として知らcurring; curring関数は、最初のパラメータの数を受信し、機能がすぐに評価が、新しく入ってくるパラメータがなるように形成クロージャに格納されている間に、別の関数を返すために継続されていません機能は、とき、要求の真の価値、それが評価されるパラメータ用の使い捨て可能になる前まで

簡単な例：

function add(a,b) {
    return a + b
}
add(1,2) // 3

// 如果柯里化
add(1)(2) // 3

その後、数日以内に消費の和の機能を実現するためにカリー化を使用

// 普通方法
var cost = (function() {
    var args = [];
    return function(){
        if(!arguments.length){
            let money = 0
            for (let val of args ){
                money += val;
            }
            return money
        }else{
            [].push.apply(args,arguments)
        }
    }
})()
cost(100);
cost(100);
cost(100);
cost(); // 300

cost(100)(100)(100)

// currying
/**
 * 保存原函数参数返回到新函数中使用
 */

//  func(100,100,100) //300
function count (...args){
    let num = 0;
     if(args.length>1){
         for (let v of args){
             num +=v
         }
         return num
     }else{
         return args[0]
     }
}

var  curry = function(func){
        let args = []
    return function fn(...Args){
        if (Args.length){
            [].push.apply(args,Args)
            return fn
        }else{
            return func.apply(this,args)
        }
    }
}
cost = curry(count);

cost(100);
cost(100);
cost(100);
cost(); // 300

スロットル機能

JavaScriptはほとんどの場合、ユーザーが積極的に不合理な、または一般的にパフォーマンス関連の問題を経験していない、いくつかのケースでは、制御機能は、ユーザが直接トリガされない、頻繁に呼び出すことができますが、深刻な原因がない限り達成するために、関数自体の機能を開始しますパフォーマンスの問題。
例えば：

window.addEventListener('resize', function(e) {
   // do something...
});
window.addEventListener('scroll', function(e) {
   // do something...
});
Dom.addEventListener('mousemove', function(e) {
   // do something...
});

// progress
xhr.upload.addEventListener("progress", function(result) {
    // do something...
}, false);

// ...

1これらのイベントを何度もトリガー、そして多くの場合、DOMノードを操作するための第二、そのパフォーマンスの低下、ブラウザがあまりにも多く、したがって、ケイトンます。私たちは、実際のトリガ、このような高い周波数を必要としないので、私たちの一部は、一定の期間にわたって実行数を無視することができます

スロットリングの原則：

焼成を維持するためのイベントはしょっちゅう一度だけ実行することができます。

タイマー調整を使用

で実行される機能setTimeout、タイマーが実行される機能の実行を完了していない場合、時間遅延機能が実行され、ダウン取っ無視されます。

 function throttle(func,wait) {
      let timer, firstFlag = true; //第一次立即执行
      return function(...args) {
          if(timer)  return false; // 如果存在定时器这不执行

          let that = this;
          if(firstFlag){
              firstFlag = false;
             return func.apply(that,args);
          }
          timer = setTimeout(function(){
               clearTimeout(timer);
               timer = null;
               func.apply(that,args);
            },wait)
      }
 }
 window.addEventListener('scroll', throttle(function(e) {
  console.log(e) 
},1000));

手ぶれ補正機能

そして、イベントハンドラが異なるだけの機能と呼ばれた後、再び、それをイベントをトリガし、画像安定化は、もはや時間トリガイベントの一定期間ではありません設定された時間の前に来る場合、イベントハンドラは、一度実行される一定の期間を絞ります再起動遅延。（ユーザーは、もはやイベントの実施前に、対応するイベントをトリガしません）

function debounce(func,wait) {
    let timer;
    return function(...args) {
        let that = this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            func.apply(that,args)
        },wait)
    }
}
 window.addEventListener('scroll', debounce(function(e) {
  console.log(e) 
},1000));