アロー関数と通常の関数の違い

まえがき

---

アロー関数は、フロントエンドの面接セッションにおける高頻度のテストポイントであり、ES6 の API であると考えている人も多いと思います。構文が通常のものより優れているため、それを知っています。関数がより簡潔であるため、誰からも愛されています。日々の開発で使用している API ですが、よく理解していない学生も多いので、アロー関数の基本的な構文やアロー関数と通常の関数の違いについて学びましょう。

1. 基本構文

[1.1]関数の定義

アロー関数の定義は、通常の関数よりも優れています。数値構文 非常に単純な ES6 では、矢印

=>

を使用してアロー関数を定義できます。アロー関数では関数キーワードが省略され、関数のパラメータは括弧内に配置されます。 => の前に、中括弧で囲んだ => の後に関数本体が続きます。

// 箭头函数
let fun = (name) => {
    return `Hello ${name} !`;
};

// 普通函数
let fun = function (name) {
    return `Hello ${name} !`;
};

【1.2】アロー関数のパラメータ

① アロー関数にパラメータがない場合は、空の括弧を記述します。

② アロー関数にパラメータが 1 つだけある場合は、パラメータを囲む括弧を省略することもできます。

③ アロー関数に複数のパラメータがある場合は、パラメータをカンマ (,) で区切って括弧で囲みます。

// 没有参数
let fun1 = () => {
    console.log('dingFY');
};

// 只有一个参数，可以省去参数括号
let fun2 = name => {
    console.log(`Hello ${name} !`)
};

// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

【1.3】アロー関数の関数本体

① アロー関数の関数本体が変数または単純な JS 式を返すコードが 1 行だけの場合、関数本体は中括弧 { } で囲みます。

let fun = val => val;
// 等同于
let fun = function (val) { return val };

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

② アロー関数の関数本体にステートメントが 1 つしかない場合は、オブジェクトを返します。次のように記述できます。ステートメントは 1 つだけで、値を返す必要がない場合 (最も一般的なのは関数を呼び出すこと)、このステートメントの前に void キーワードを追加できます。

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

2. アロー関数とアロー関数の違い通常の関数

#[2.1] 構文はより簡潔で明確です

---

#arrow の基本的な構文例からわかるように、上記の関数のように、アロー関数の定義は通常の関数の定義よりもはるかに簡潔で明確です。

#【2.2】アロー関数にはプロトタイプ(プロトタイプ)がないので、アロー関数自体にはこれがありません。 ##【2.3】アロー関数 独自の this は作成しません

アロー関数は独自の this を持たず、アロー関数の this 点は外側の最初の通常オブジェクトから継承されます。定義されたときのレイヤー (注: 呼び出されたときではなく、定義されたとき) 関数のこれ。したがって、アロー関数内での this のポイントは定義時に決定され、後で変更されることはありません。

let fun = () => void doesNotReturn();

[2.4] call | apply | binding はアロー関数内の this のポインタを変更できません

call | apply | binding メソッドを使用して動的に変更できます関数実行時の this を指しますが、アロー関数の this は定義時に決定され、決して変更されません。したがって、これらのメソッドを使用しても、アロー関数の方向を変更することはできません。

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined

// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

[2.4] call | apply | binding はアロー関数内の this のポインタを変更できません

call | apply | binding メソッドを使用して動的に変更できます関数実行時の this を指しますが、アロー関数の this は定義時に決定され、決して変更されません。したがって、これらのメソッドを使用しても、アロー関数の方向を変更することはできません。

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

[2.5] アロー関数はコンストラクターとして使用できません

まず、コンストラクターで new が何をするのかを理解しましょう。簡単に言うと、①まずJS内部でオブジェクトを生成する、②次に関数内のthisをオブジェクトに指す、③次にコンストラクタ内でステートメントを実行する、④最後にオブジェクトのインスタンスを返すという4つのステップに分かれています。 ＃＃＃＃＃＃しかし！ ！アロー関数は独自の this を持たないため、実際には this は外部の実行環境で this を継承し、this のポイントはどこで誰が呼び出したかによって決して変化しないため、アロー関数を関数として使用することはできません。コンストラクター、またはコンストラクターをアロー関数として定義できないことを示しています。そうでない場合は、new! で呼び出したときにエラーが報告されます。

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

[2.6] アロー関数は引数をバインドしません。代わりに、引数オブジェクトの代わりに残りのパラメータを使用して、アロー関数のパラメータ リストにアクセスします。

アロー関数には独自の引数オブ​​ジェクトがありません。アロー関数の引数にアクセスすると、実際には外部のローカル (関数) 実行環境の値が取得されます。

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

[2.7] アロー関数はジェネレーター関数として使用できず、yield キーワードも使用できません

推奨チュートリアル: 「

JS チュートリアル 」 「

以上がアロー関数と通常の関数の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。