Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Arrow function description

35 views

Published on

This is arrow function description.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Arrow function description

  1. 1. Whatisarrowfunction...?
  2. 2. メリット コードが短くなる アロー関数式は、その名のとおり矢印を使って記述し、function 式より短い構文で同様な内容を記述することができます。 thisに束縛される アロー関数式は、function式と比べてより短い構文を持ち、this の値を語彙的に束縛します(ただし、自身のthisやarguments, super,new.targetは束縛しません)。
  3. 3. 普通のJavaScriptの関数定義 let obj = { add: function (num1, num2) { console.log(num1 + num2); }, sub: function (num1, num2) { console.log(num1 - num2); } } obj.add(1, 2); obj.sub(8, 4); 3 4
  4. 4. アロー関数だと...? let obj2 = { add: (num1, num2) => console.log(num1 + num2), sub: (num1, num2) => console.log(num1 - num2) } obj2.add(1, 2); obj2.sub(8, 4); 3 4
  5. 5. 通常の関数定義と呼び出し function Math () { var self = this; this.num = 1; this.num2 = 2; this.message = 'hogehoge!!'; setInterval(function increaseNum() { self.num++; console.log(self.message); console.log(self.num); }, 1000); } var number = new Math();
  6. 6. アロー関数のthis function Math2 () { this.num = 1; this.num2 = 2; this.message = 'hogehoge!!'; setInterval( () => { this.num ++; console.log(this.message); console.log(this.num) }, 1000); } var number2 = new Math2();
  7. 7. 参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Functions/Arrow_functions https://qiita.com/mejileben/items/69e5facdb60781927929

×