JavaScriptの通常関数とアロー関数の違いと使い方を詳しく解説したサンプルコード

この記事では、JavaScriptにおける通常の関数とアロー関数の違いと使い方を主に紹介しています。とても優れているので、困っている友達は参考にしてください。

最近質問されました。 JavaScriptのアロー関数（=>）と通常の関数（function）の違いは何ですか？

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

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

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

アロー関数のこれですまず第一に、私の場合は何も間違っていません答え: アロー関数の this は呼び出しと同じコンテキストを持ちます。 Irrelevant

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

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

しかし、厳密に言えば、これは「定義のコンテキストに依存する」わけではありません。アロー関数でこれを呼び出すと、単にスコープ チェーンを検索するだけなので、アロー関数はそれ自体の this をまったくバインドしません。最も近い this を見つけて使用します ;

エフェクトの観点からは、これは私の以前の理解とそれほど変わりませんが、アロー関数はこれの機能を追加する通常の関数ではありません。呼び出し時のコンテキストには影響されませんが、多くの機能が削減されます

アロー関数は実際にはより単純な関数です実際、アロー関数にはこれだけではありません。アロー関数には、このような自動的にバインドされたローカル変数はありません: 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 番目の方法は次のとおりです。メソッドのみ 修正できるのはこの変数だけです。前述したように、アロー関数の引数などの変数もスコープ チェーンから検索され、同様の効果を得るにはローカル変数を再定義するだけで済みます。このメソッドを使用してアロー関数を処理します。

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);
  };
}

では...アロー関数で引数を使用したい場合はどうすればよいでしょうか? ...このようなニーズがある場合は、通常の関数を使用する方が適切かもしれません...

しかし、これは、同様の形式のアロー関数ですべてのパラメータを取得できないという意味ではありません

array

に対して、Expand the operator を使用して、次のようなパラメータを受け取ることができます:

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

おそらく、この記述方法が必要なシナリオがあるかもしれませんが、私は、アロー関数が受け入れられる単純な状況に適していると考えています。パラメータを固定して計算結果を返します

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