ES6 アロー関数に関するこの質問への回答

アロー関数の 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 はまったくありません。その結果、内部の 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);
}

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

関連する推奨事項:

ReactJs でのアロー関数の使用の分析

JavaScript アロー関数の使用法の紹介

JavaScript の通常の関数とアロー関数の違いと使用法を説明するコード例

以上がES6 アロー関数に関するこの質問への回答の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。