JavaScriptの通常関数とアロー関数の違いと使い方を詳しく解説

この記事では、JavaScript における通常の関数とアロー関数の違いと使い方の詳細を主に紹介します。非常に優れており、必要な方は参考にしてください。

最近質問されました:

JavaScript のアロー関数 ( => ) と通常の関数 ( function ) の違いは何ですか?

その時考えたのは、この質問はとても簡単ですね～（フラグ）、そして間違った答えをしてしまった…

アロー関数のこれは何も関係ありません呼び出されたときのコンテキストに依存し、それが定義されているコンテキストに依存します

これは完全に正しい答えではありません...ただし、完全に間違っているわけでもありません

アロー関数の this

まず第一に、私の答えには間違った部分はありません。アロー関数の this は、呼び出されたときのコンテキストとは何の関係もありません。

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

この例からわかるように、アロー関数は定義された後は変更されません。どのように呼び出されても、これは変更されません。

しかし、厳密に言えば、これは「定義のコンテキストに依存する」わけではありません。アロー関数でこれを呼び出す場合、アロー関数は単にスコープ チェーンに沿って上向きに検索するだけであるためです。これに最も近いものを見つけて使用してください。
効果に関しては、これまでの理解と大きく変わりませんが、本質はまったく異なります。アロー関数は、通常の関数の機能を追加しません。これは呼び出しコンテキストの影響を受けませんが、多くの機能が削減されます。

アロー関数は実際にはより単純な関数です

実際には、アロー関数の通常の関数と異なる点はこれだけではありません。アロー関数には、this、arguments、super(ES6)、new.target(ES6)...

< などのバインドされたローカル変数が含まれます。 🎜>他の人から例を借用します:

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

通常の関数では、さまざまなローカル変数が自動的にバインドされ、アロー関数はスコープチェーンに沿って上向きに検索するのが非常に簡単です...

アロー関数は非常にシンプルで純粋なものです。

したがって、アロー関数は関数型プログラミングに適していると個人的には思います。また、アロー関数を使用すると、変数の影響を受けにくくなります。明示的に宣言されていないため、予期しない計算結果が生成される可能性があります。

では、通常の関数はアロー関数と同じ効果を達成できるでしょうか。

当時の私のように、この不安定な男を単純に修正することを考えたとしたら...非常に簡単です。次のような一般的に使用される方法がいくつかあります。

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

または

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

ただし、2 番目の方法ではこの変数のみを修正できます。前述したように、To を実行するためにアロー関数の引数などの変数もスコープ チェーンから検索されます。同様の効果を達成するには、ローカル変数を再定義する方法が 1 つだけあり、babel もこの方法を使用してアロー関数を処理します。

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

では...アロー関数で引数を使用したい場合はどうすればよいでしょうか?

...このようなニーズがある場合は、通常の関数を使用する方が適切かもしれません...

しかし、それはあなたがそうするという意味ではありませんアロー関数で配列のような関数を使用してフォーム内のすべてのパラメータを取得することはできません。次のような展開演算子を使用してパラメータを受け取ることができます:

const testFunc = (...args)=>{
  console.log(args) //数组形式输出参数
}

メソッドを記述する必要がありますが、やはりアロー関数の方が適していると思います。 固定パラメータを受け取り、計算結果を返す単純なケースです。

以上がこの章の内容全体です。その他の関連チュートリアルについては、

JavaScript ビデオ チュートリアル をご覧ください。