[js]矢印関数

2835 ワード
javscript テキストリンク

arrow function?


ECMA 6から追加された関数の機能の一つです.
矢印関数は、関数文字内の匿名関数の簡略化された表現方法です.
しかし、これは匿名関数とは違います.

矢印関数の表現


1)既存匿名関数

var square = function(x) { return x*x; };

2）矢印関数

var square = (x) => { return x*x; };

  • 複数の引数がある場合は、カンマで区切ります.(x, y, z)

  • パラメータが1つしかない場合は、x=>{return x*x;}を省略できます.

  • ダン!パラメータなしではカッコを省略できません.

  • 文にreturnしかない場合は、カッコとreturnキーワードvar square=x=>x*xを省略できます.

  • ダン!関数が返す値がオブジェクトの場合は、グループ演算子()を使用してバインドされます.(a, b) => ( { x: a, y: b } );

  • 直ちに関数を実行することができる(x=>x*x);

    • 関数文字との違い


    関数文字のみを減らす匿名関数とは異なる矢印関数.何が違うの?

    1)この値は、関数の定義時に決定されます。


    まずthisの指すことから違います.
    関数のこの値は、関数が呼び出されたときに決定されます.
    var jerry = {
	name : "Jerry",
    hi : function(){
    		console.log("HI " + this.name);
        }        
}

jerry.hi();

// HI Jerry 출력됨
    ここにいるよnameのthisはjerryを指します.
    しかし
    var obj = {
    say: function(){
        console.log(this);
        var fff = function() { console.log(this);};
        fff();
        var g = () => console.log(this);
        g();

    }
};

obj.say();

    結果はこうして出てきました
    ネスト関数fffはグローバルオブジェクトを指し,g関数は独自のobjオブジェクトを定義する.

    2)パラメータ変数が定義されていないため使用できません


    3)コンストラクタを使用しない

    기존 함수 리터럴
var Person = function(name, age){this.name = name; this.age = age;};
var tom = new Person("Tt", 11);

console.log(tom.name);
// Tt 나옴

화살표 함수
var Person = (name, age) => {this.name = name; this.age = age;};
var tom = new Person("Tt", 11);

console.log(tom.name);

    エラーが発生します

    4）完成品キーワードを使用できない


    整理する


    矢印関数は常に匿名関数として使用されるため、関数ライブラリに匿名関数を記述するときに置き換えることもできます.しかし、以上の4つの違いを熟知しなければならない.
    特に,コードを簡潔に表現する際には,しばしば現れるようである.
    var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map((element) => {
  return element.length;
}); 

// [8, 6, 7, 9]
    参照:矢印関数、現代JavaScript入門
    [BOJ 1922]ネットワーク接続(Java)
    [Swift] App Lifecycle & ViewController LifeCycle