ES6 のアロー関数に関するこれについて質問がありますか?

アロー関数の構文は、ES6 で新しく追加されました。アロー関数は、これを取得するための簡単さと便利さの特徴を持っています。次に、この記事を通じて 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 になります。これがないため、コンストラクターとして使用できません。

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 を定義します。

上記は私があなたのためにまとめたものです。

関連記事:

Reactコンポーネントのパフォーマンス最適化について詳しく説明

vueのelement-uiがテーブルにローリングロードメソッドを実装する方法について

選択ドロップダウンリストを実装する方法Vue.js、具体的な操作は以下の通りです

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