ホームページ > ウェブフロントエンド > jsチュートリアル > これは ES6 のアロー関数のどこを指しているのでしょうか?

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

php中世界最好的语言
リリース: 2018-03-17 13:33:19
オリジナル
2756 人が閲覧しました

今回は、これが ES6 の arrow 関数のどこを指すのか、そして ES6 の arrow 関数でこれを使用する際の 注意事項 について説明します。実際のケースを見てみましょう。

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

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

を指します。

(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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート