これは ES6 のアロー関数のどこを指しているのでしょうか?

今回は、これが 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=11
function 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 ではアロー関数の変換をシミュレートできます:

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

したがって、オブジェクトを定義するとき、この内部は通常、グローバル世界を指すか、オブジェクトが配置されている環境内の this を定義します。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS を使用してラジオのステータスを変更する方法

ブートストラップ テーブルを高さのパーセンテージに設定する方法

var foo = function () {} と function foo の違い()

以上がこれは ES6 のアロー関数のどこを指しているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。