-1から始まるES 6探索の旅01:顔文字が精巧な矢印関数前編-お兄さん、どこを指しますか?

ヒント:作者のピットの記録は、あなたを待つ神にはまったく価値がありません.私の命を浪費しないでください.ヒント-続き:あなたたちは見なければなりません.私も止められませんが、少なくともES 6をサポートするChromeブラウザを用意しなければなりません.
以前、ある大神のコードに謎の記号が現れたnum => console.log(num)見た私は震えて、私と遊んでいると思っていたのか?このコードが実行できれば,まるで顔文字が精巧になっているようだ.
しかし、顔文字は本当に精巧になっています/前提はES 6をサポートするブラウザで、あるいはコードがコンパイル/翻訳されたことがあります
これがES 6の重要な特性であることが分かった後、矢印関数です.

矢印関数の使い方

まず定義と基礎的な使い方を見てみましょう
矢印関数式の構文は関数式よりも大きい
短い、そして自分のthis、arguments、superあるいはnewをバインドしません.target.これらの関数式は、非メソッド関数に最適であり、構造関数として使用できません.

//    

(  1,   2, …,   N) => {    }
(  1,   2, …,   N) =>    （  ）
//   ：(  1,   2, …,   N) =>{ return   }

//         ，       ：
(    ) => {    }
     => {    }

//                 。
() => {    }

MDN Web docsから-Web技術文書/javascript/矢印関数
定義を見て、矢印の関数は1つの短い字を際立たせて、短いのは簡単で、便利で、効率が高くて、これはまさに私の世代のプログラマーが一生最も求めたのではありませんか?1山のコードを、短い1行に変えます/人に読むとは限らなくて、大神たちが最も流行している詰め方ではありませんか
振り返って、使い方を見てみましょう.私たちはこのようないくつかの関数を持っています.

function fn1(num){
    return console.log(num)
}

function fn2(a,b){
    return console.log(a,b)
}

function fn3(){
    return console.log(1)
}

矢印関数で次のように書き換えることができます.

var fn1 = num => console.log(num);//      
var fn2 = (a,b) => console.log(a+b);//     
var fn3 = () => console.log(1);//    

クールかどうかは、3行が1行になって言うのがはっきりしている点で、まず、定義の方式を通じて、矢印関数は必ず1つの匿名の関数であることを見抜くことができて、例の中の用法は矢印関数を変数に値を与えることで、一般的な方法として使用して、更に矢印の左側のはこの関数のパラメータで、矢印の右側は関数体で、総じて1つのパラメータだけあるならば、あるいは関数体の中で1行の表現式しかありませんでは、パラメータの括弧でも、関数体の括弧でも直接省略できますが、パラメータがない場合は一対の括弧を書く必要があります.
一般的な理解では、右側の式の変数として、/=>に値が割り当てられているが、この値が左のパラメータであり、式を返すことで、理解がイメージされる.例えばnum => console.log(num)矢印の左側のnum右側の式に割り当てられている
使用上の注意点
1つの簡体字では、式を1つだけ必要とし、暗黙的な戻り値を追加します.ブロックでは、明確なreturn文を使用する必要があります.
MDN Web docsから-Web技術文書/javascript/矢印関数
例を挙げる

var getNum = num => num+1;
var getNumBlock = num =>{
    num+1
}
console.log(getNum(1));//2
console.log(getNumBlock(1));//undefined

num => num+1では略記法が使用されているため、暗黙的にnum+1を戻り値として、num =>{num+1;}では、括弧で囲まれたブロックとなっているため、return文を定義して修正する必要がある

var getNumBlock = num => {
    return num+1
}
console.log(getNumBlock(1))//2

では、矢印関数は具体的に何の役に立つのでしょうか.

もちろん使いやすいです

上記では、矢印関数を使用することで多くのコード量が削減されていることが明らかになりました.また、その使用に慣れると、コードを読むのもより容易になります.上記の例を明確にするには、矢印関数を変数に割り当てるのが一般的な方法として使用されていますが、私個人の開発過程では、このような使用はほとんどありません.定義で述べたように...
これらの関数式は、非メソッド関数に最適です.
この点、矢印関数は匿名関数として使用できます
私の理解では、矢印関数という概念は関数という概念を弱めるべきで、それを普通の表現として理解して、実は日常の使用に便利です日常の開発の中で、関数を定義する必要がないのに、書かなければならないところがありますかfunctionあれば、それはコールバック関数の使用の中で
次の例のように

function getNum(num,callBack){
    let result = num + 1;
    callBack(result)
}

getNum(1,function(result){
    console.log(result)
})//2

そのうちgetNum()への呼び出しは

getNum(1, result => console.log(result))//2

書くのは本当に自由な感じで、多くのコードが少なくなっただけではなくて、更に理解しやすいように見えて、まるで離陸します

this？どれですか。どうしてまた君なの?

離陸する前に矢印関数の特徴を理解する必要があります.定義の後半文に書いてあるように.
自分のthis,arguments,superまたはnewをバインドしない.target
とりあえずarguments、super、new.targetthis私はあなたを知っています!関数の中でthisの使用には気をつけなければなりません.少し注意しないと混乱します.前の文章でthisの関連ピットjavascriptオブジェクトの不完全な探索記録01:thisについて整理しました.which?- lskrat大まかな一言を復習すると、関数の中のthisこの関数を呼び出す対象を指す
逆に矢印関数を見ると、自分を縛らないというthisの意味は定義中の
矢印関数は自分のthisを作成しません.閉じた実行コンテキストのthis値を使用します.
MDN Web docsから-Web技術文書/javascript/矢印関数
言い換えれば、矢印関数の中のthisその外側の層のthis例を挙げると

var name = "outer"
var obj = {
    name : "inner",
    getName : function(){
        return function(){
            console.log(this.name)
        }
    },
    getNameByArrow : function(){
        return () => console.log(this.name)        
    }
}
obj.getName()();//outer
obj.getNameByArrow()();//inner

これはまさに私たちが望んでいる結果ではないでしょうか?!矢印関数の中のthisこの対象を適切に指し示しているので、誰がそれを呼び出すかは全く関係なく、爽快であるが、これにも若干の問題があり、これによって異なるタイプの関数を作成する際にthisの使用が混同されてしまうのは仕方がないと思い、基礎原理を深く理解し開発した経験で回避するしかない
個人はこの問題に直面する時、やはり私がさっき言った矢印関数を関数と見なさないで普通の表現式に理解することができて、このようにしてthisに対する解釈方法を便利に理解することができます
これが見えるのは長い間指さされていた0 0
つまらない话:新年の第1文、レベルは依然として幼稚で、新しい年を望んで、紧密に1つの中心の2つの基本点の周囲で仕事を展开します!進歩できる!つまらない話-続:17年で百万を破って、東の卵に登って、大賞を受賞しておめでとうございます