ホームページ > 記事 > ウェブフロントエンド > ES6 アロー関数でこれを使用する方法

ES6 アロー関数でこれを使用する方法

php中世界最好的语言オリジナル: 2018-02-27 09:34:281545ブラウズ

今回は、これを ES6 の arrow 関数で使用する方法と、これを ES6 の arrow 関数で使用するための注意事項についてお届けします。実際のケースを見てみましょう。

簡単な紹介: アロー関数の this は、一般的な関数とは異なるように定義された関数を指します。アロー関数の this は、関数の実行時ではなく、関数を定義するときにバインドされます。確かに。

(1) 一般に、this が指す関数は、obj.say() の実行中にバインドされ、obj オブジェクト

を指します。

var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say();
//console.log输出的是22

(2) 定義時のいわゆるバインディングとは、これが親の実行コンテキストから継承されることを意味します。！この例では、This.x は実際には window.x を表すため、出力は 11 になります。

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//输出的值为11

同様のものは次のとおりです:

(3)

var a=11function test1(){  this.a=22;  let b=function(){
    console.log(this.a);
  };
  b();
}var x=new test1();
输出11

アロー関数の状況:

var a=11;function test2(){  this.a=22;  let b=()=>{console.log(this.a)}  b();}var x=new test2();//输出22

これは、ES6 で定義された場合の this のバインディングの具体的な意味を継承する必要があると私が理解している方法です。親実行コンテキストは親実行コンテキストであってはなりません。！！このようにして、アロー関数における多くの不明瞭な方向が解決されます。

注: 単純なオブジェクト (非関数) には実行コンテキストがありません。

アロー関数のこれについての深い理解

アロー関数でこの点が固定されるのは、アロー関数内にこれをバインドするメカニズムがあるためではありません。実際の理由は、アロー関数が独自のものを持っていないためです。これはまったく、内部の this が外側のコードブロックの This になります。これがないため、

コンストラクター

として使用できません。 ES5 ではアロー関数の変換をシミュレートできます:

// ES6function foo() {
  setTimeout(() => {    console.log(&#39;id:&#39;, this.id);
  }, 100);
}
// ES5function foo() {  var _this = this;  setTimeout(function () {    console.log(&#39;id:&#39;, _this.id);
  }, 100);
}

したがって、オブジェクトを定義するときは、オブジェクト

プロパティ

を定義します。この内部は通常、グローバル世界、またはオブジェクトが配置されている環境内の this を指します。これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。