es6のアロー機能を使う際の注意点は何ですか？

注: 1. アロー関数は、上位スコープ内の this のポイントと一致するように、関数内の this のポイントを変更します; 2. これをコンストラクターとして使用することはできません。コマンドは使用できません; 3. いいえ 引数オブジェクトは使用できます; 4. yield コマンドは使用できず、ジェネレーター関数として使用できません。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 の新しい構文では、アロー関数が登場します。

ES6 では、「矢印」(=>) を使用して関数を定義できます。

		function fun(a){ return a; }
// ↓ 去掉 function 在 ( ) 和 { } 之间添加 => 
		var fun = (a) => { return a; }  
// ↓ 如果只有一个形参可省略 ( ) 如果一个形参都没有，必须加( )         
		var fun = a => { return a; }  
// ↓ 如果函数体只有一句话，可省略{ }，如果仅有的这句话还是 return， 则必须省略 return         
		var fun = a => a

ES6 のアロー関数に関する注意事項

(1) アロー関数は、関数内の this のポイントを、関数内の this のポイントと一致するように変更します。上位スコープ

関数本体内の this オブジェクトは、それが使用されるオブジェクトではなく、定義されるオブジェクトです。

(2) はコンストラクターとして使用できません。つまり、新しいコマンドは使用できません。そうでない場合は、エラーがスローされます。

(3) 引数オブジェクトは関数本体に存在しないため使用できません。これを使用したい場合は、代わりにrestパラメータを使用できます。

(4) yield コマンドが使用できないため、アロー関数をジェネレーター関数として使用できません。

上記 4 点のうち、特に注目すべき点は 1 つ目です。このオブジェクトのポインタは可変ですが、アロー関数では固定です。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上記のコードでは、setTimeout のパラメータはアロー関数です。このアロー関数の定義は、foo 関数が生成されたときに有効になり、実際の実行は 100 ミリ秒後まで待機しません。 。通常の関数であれば、実行時にグローバルオブジェクトウィンドウを指すはずで、このとき21が出力されるはずです。ただし、アロー関数により、this は関数定義が有効になるオブジェクト (この場合は {id: 42}) を常に指すため、出力は 42 になります。
アロー関数は、setTimeout の this が、バインディングが実行されるスコープを指すのではなく、バインディングが定義されているスコープを指すようにすることができます。別の例を示します。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上記のコードでは、Timer 関数内に 2 つのタイマーがそれぞれアロー関数と通常の関数を使用して設定されています。前者の this バインディングはスコープ (つまり、Timer 関数) で定義され、後者の this バインディングは、それが実行されるスコープ (つまり、グローバル オブジェクト) を指します。したがって、3100 ミリ秒後、timer.s1 は 3 回更新されましたが、timer.s2 は 1 回も更新されていません。

アロー関数を使用すると、この点を修正できます。この機能は、コールバック関数をカプセル化する場合に非常に役立ちます。以下は、DOM イベントのコールバック関数がオブジェクトにカプセル化される例です。

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

上記のコードの init メソッドでは、アロー関数が使用されています。これにより、アロー関数内の this が常にハンドラー オブジェクトを指すようになります。そうしないと、コールバック関数の実行時に this.doSomething 行でエラーが報告されます。これは、現時点ではこれがドキュメント オブジェクトを指しているためです。

このポインティングの固定は、アロー関数内に this をバインドするメカニズムがあるためではありません。実際の理由は、アロー関数には独自の this がまったくなく、内部の this がこれは外側のコードブロックです。これがないため、コンストラクターとして使用できません。

つまり、アロー関数を ES5 に変換するコードは次のとおりです。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

上記のコードでは、変換された ES5 バージョンは、アロー関数が独自の this をまったく持たず、外側の this を参照していることを明確に示しています。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がes6のアロー機能を使う際の注意点は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。