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、

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

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

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

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

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