JavaScript のアロー関数の簡単な紹介-jsチュートリアル-php.cn

JavaScript のアロー関数の簡単な紹介

WBOY

リリース： 2024-08-30 19:00:11

オリジナル

458 人が閲覧しました

A Brief Intro to Arrow Functions in JavaScript

JavaScript のアロー関数

アロー関数は、JavaScript で関数を記述するための簡潔で現代的な方法です。これらは構文を簡素化し、従来の関数式に比べていくつかの注目すべき利点を提供します。ここでは、JavaScript のアロー関数を理解して使用するためのクイックガイドを示します。

アロー関数とは何ですか?

アロー関数は、関数を記述するための短縮構文です。これらは、関数を定義するためのより合理的な方法を提供し、特に this キーワードの処理方法において、従来の関数式と比較していくつかの重要な違いがあります。

基本的な構文

アロー関数の構文はコンパクトで簡単です。基本的な形式は次のとおりです:

const functionName = (parameters) => {
  // function body
};

ログイン後にコピー

単一パラメータ

アロー関数にパラメータが 1 つある場合は、括弧を省略できます。

const greet = name => {
  return `Hello, ${name}!`;
};

console.log(greet('Melissa')); 
// Outputs: Hello, Melissa!

ログイン後にコピー

パラメータなし

パラメータのない関数の場合は、空のかっこを使用します:

const sayHello = () => {
  return 'Hello, World!';
};

console.log(sayHello()); 
// Outputs: Hello, World!

ログイン後にコピー

複数のパラメータ

関数に複数のパラメータがある場合は、パラメータを括弧で囲みます。

const add = (a, b) => {
  return a + b;
};

console.log(add(5, 3)); 
// Outputs: 8

ログイン後にコピー

簡潔な本文

関数本体が 1 つの式で構成されている場合、アロー関数の構文はより簡潔になります。この場合、中括弧と return キーワードは省略されます:

const square = x => x * x;

console.log(square(4)); 
// Outputs: 16

ログイン後にコピー

従来の機能との主な違い

1. このバインディング

アロー関数には独自の this コンテキストがありません。代わりに、周囲の語彙コンテキストからこれを継承します。これにより、コールバックなど、 this 値を保持する必要がある状況で役立ちます。

従来の関数の例:

function counter() {
  this.value = 0;

  setInterval(function() {
    this.value++; // `this` refers to the global object or undefined in strict mode
    console.log(this.value);
  }, 1000);
}

new counter(); 
// `this.value` will not behave as expected

ログイン後にコピー

アロー関数の例:

function counter() {
  this.value = 0;

  setInterval(() => {
    this.value++; 
    // `this` refers to the instance of counter
    console.log(this.value);
  }, 1000);
}

new counter();

ログイン後にコピー