[JavaScript] ES6 - Arrow Function

13847 ワード
JavaScript Arrow_Function JavaScript 矢印関数 テキストリンク

Arrow Function(矢印関数)


ES 6に導入された関数記号は、functionキーワードの代わりに矢印形状の文字=>で表すことができる.既存の関数の動作とは少し異なります

構文

// 일반 함수
// 함수 선언식
function sayHello (name) {
  return `hello ${name}`
}

// 함수 표현식
const sayHello = function (name) { return `hello ${name}` }

// 화살표 함수
const arrowFunc = (x, y) => { ... }
パラメータ
// 매개변수가 한 개인 경우 소괄호 생략 가능
const sayHello = name => `hello ${name}`;

// 매개변수가 없는 경우 소괄호 생략 불가능
const arrowFunc = () => { ... }
関数体は複数の文からなり、括弧は省略できません.
const sum = (a, b) => {
  const result = a + b;
  return result;
}

// 하나의 문이라면 return 생략 가능
const sum = (a, b) => a + b;
=
const sum = (a, b) => {
  return a + b;
};
オブジェクトが戻るときはカッコを使用します.
const getUser = (name, age) => ({
  name, // name: name
  age // age: age
});
=
const getUser = (name, age) => {
  return {
    name,
    age 
  }
};
default parameter
const sayHello = (name='성이름') => console.log(`hello ${name}`);
sayHello(); // hello 성이름

矢印関数と一般関数の違い


1. this


このバインディングは、関数の呼び出し方法(呼び出し方法)に基づいて動的に決定されます.bind、callなどの方法で明示的にバインドできます.
var a = 1;
var obj = { a: 2 };
function foo() {
  console.log(this);
  return this.a;
}
foo(); // global/window - 1
foo.call(obj); // {a: 2} - 2
このバインドがなければ、矢印関数は内部のthisを変更できません.いつも上尉スコフのこの点を参照しています.
const person = {
  name: '성이름',
  sayHi: function() {console.log(`hi ${this.name}`)},
  sayHello: () => console.log(`hello ${this.name}`)
}

person.sayHi(); // hi 성이름
// 상위 스코프 전역 객체를 가리키므로 빈 문자열 window.name과 같음
person.sayHello(); // hello

2.矢印関数ではインスタンスを作成できません。

function Person1() {}
new Person1(); // Person {}
const Person2 = () => {}
new Person2(); // Uncaught TypeError: arrow is not a constructor
LAN内通信アプリを作ろう その４ JavaFXのコントロールに情報を設定する/スレッドからJavaFXの画面を呼び出す
オブジェクト指向プログラミングのための立体原理を学ぶ