Javascriptの6つの方法、react、es6＆es7のこのキーワード

キーポイント

• JavaScriptのthisキーワードは、特にコールバック関数内で混乱を招く可能性があります。 reactでは、thisコンポーネントのコンテキストを参照します。これは、関数コンテキストがシフトすると問題を引き起こす可能性があります（例：Promise Callbacks）。
バインディングを管理するためのいくつかの方法が存在します：トップレベルの参照（Alias this）の作成、実行時に正しいコンテキストを注入（これを結合）、ES2015矢印関数を使用してReactコンポーネントメソッドを活用し、ES2016を使用します構文を結合する（サポートされている場合）、または明示的な
• 引数を受け入れるメソッドを使用します。 this最適な方法は、パフォーマンス、デバッグの容易さ、個人的な好みなどの要因に依存します。 エイリアシングthisはパフォーマンスを優先します。コンポーネントメソッドまたは名前付き関数は、デバッグを改善します。矢印関数は、短いインライン関数の場合は簡潔です。this
• javascriptのthisキーワードは、頻繁に開発者をつまずかせます。厳格なクラスモデルを持つ言語とは異なり、その動作は常に予測可能ではありません。特に、コールバック機能がコントロールを超えているコールバック関数です。 外部コードは、
または

のメソッドを使用して、関数のコンテキストを簡単に再現できます。これは予測不可能な動作につながり、多くの場合、コールバックが多いコード全体で過度の

呼び出しをもたらします。 問題this newコンポーネントコンテキストを参照するためのFunction.prototypeの使用の使用は、このあいまいさを継承します。 この一般的な反応パターンを考慮してください：.bind(this)

これはa thisを生成します。

は関数ではないためです。約束のコールバックは関数の内部コンテキストを変化させ、

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

が間違ったオブジェクトを参照します。解決策を探りましょう。 ソリューション

TypeErrorこれらのソリューションは、確立されたJavaScript技術から、反応固有の方法や新しい（潜在的にサポートされていない）機能にまで及びます。 this.setStatethis1。エイリアスこれは

長年のアプローチには、コンポーネントのトップレベルで2番目の

参照を作成することが含まれます。 シンプルで理解しやすい、これは正しいコンテキストの明確な視覚的保証を提供します。直感に反するように見えますが、それは効果的で簡単です。

this2。これをバインドします

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

このメソッドは、実行時に正しいコンテキストをコールバックに注入します：

すべてのJavaScript関数には、を指​​定するメソッドがあります。 バインドされると、コンテキストをオーバーライドすることはできず、正しいオブジェクトを参照することを確認します。 ただし、このアプローチは読みやすくなく、深くネストされた非同期コードで面倒になり、各機能の手動バインディングが必要です。

3。コンポーネントの反応

Reactコンポーネントにより、thisを使用すると、正しいReact.createClassコンテキストに自動的にバインドされるメソッドを定義できます。 これにより、コールバックロジックをコンポーネントに移動することができます：

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

シンプルなコンポーネントの場合、これによりクリーンなコードが促進され、コンテキストの懸念が排除されます。 このオート凝視はならあなたに警告します。.bind(this)

4。 ES2015矢印関数

es2015矢印関数（

）は簡潔であり、それらの囲いの範囲から=> this

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

ネスティングレベルに関係なく、正しいままです。 欠点は、機能の命名の喪失であり、デバッグ（Stack Traces Show "（匿名関数）"）を妨げます。 Babel Compilationはしばしばこのアプローチを使用してコンテキストを維持します。

this5。 ES2016 Bind Syntax（Proposal）

提案されたES2016（ES7）BIND構文はを使用して、関数を特定の

値にバインドします。 たとえば、

:: this興味深いものの、この構文は広くサポートされておらず、

と同様の欠点に苦しんでおり、多くの場合同じ結果にコンパイルします。

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

6。メソッド固有のアプローチ.bind(this)

いくつかの関数は、明示的な

引数を渡すことを許可します（例えば、の最終的な引数）：

これは一貫性がありません。ほとんどの関数にはこの機能がありません。this map

結論

React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });
    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});

コンテキストを管理するための複数のアプローチが存在します。 エイリアスでパフォーマンスに優先順位を付け、コンポーネントメソッドまたは名前付き関数で簡単にデバッグし、短いインラインコードの矢印関数と簡潔にします。 最良の選択は、優先順位とコーディングスタイルに依存します。 読みやすさと保守性を妨げる過度に複雑なソリューションを避けてください

よくある質問（FAQ）

this（FAQは、元のテキストで大部分がカバーされており、この包括的な応答の長さを大幅に増やすため、簡潔に省略されています。元のFAQは、このトピックの優れたカバレッジを提供します。 >

以上がJavascriptの6つの方法、react、es6＆es7のこのキーワードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。