綁定JavaScript的6種方法，在React，ES6和ES7中使用此關鍵字

密鑰點

• > JavaScript的this關鍵字可能會令人困惑，尤其是在回調函數中。 在react，this引用組件的上下文中，當功能上下文移動時可能會導致問題（例如，承諾回調）。
存在幾種方法要管理
• 綁定：創建一個上級this參考（別名this），在運行時注入正確的上下文（綁定此），使用ES2015箭頭功能，利用React組件方法，採用ES2016綁定語法（如果受支持），或使用接受顯式this參數的方法。 this>
最佳方法取決於諸如績效，輕鬆易於調試和個人喜好之類的因素。 混疊
• 優先級；組件方法或命名函數改善調試；箭頭函數對於簡短的內聯函數是簡潔的。 this>

> JavaScript的

關鍵字經常訪問開發人員。與具有嚴格類模型的語言不同，其行為並不總是可以預測的，尤其是在呼叫站點無法控制的回調功能中。 外部代碼可以使用this>上的方法輕鬆地重新列出函數的上下文。這導致了不可預測的行為，通常會導致整個回調較重的代碼中過度new。 問題Function.prototype .bind(this)react的使用

引用組件上下文的使用繼承了這種歧義。 考慮這種常見的反應模式：

this

這會產生a

<code class="language-javascript">this.setState({ loading: true });

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

，因為

不是函數。承諾回調改變了函數的內部上下文，導致TypeError引用錯誤的對象。讓我們探索解決方案。 解決方案this.setState this這些解決方案範圍從已建立的JavaScript技術到反應特異性方法和更新的（潛在不支持的）特徵。

1。別名這個

>一種長期的方法涉及在組件的頂級創建第二個參考：

>簡單且容易理解，這為正確的上下文提供了明確的視覺保證。雖然看似違反直覺，但它是有效而直接的。 this>

<code class="language-javascript">const component = this;
component.setState({ loading: true });

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

2。綁定此

此方法在運行時將正確的上下文注入回調：> >每個JavaScript函數都有一個指定

的方法。 一旦綁定，上下文就無法覆蓋，確保

指的是正確的對象。 但是，這種方法在深度嵌套的異步代碼中變得笨拙，並且需要為每個功能進行手動綁定。

3。 React組件方法

React組件允許定義使用

>時自動綁定的方法。 這允許回升回調邏輯到組件：> this React.createClass優雅的簡單組件，這會促進清潔器代碼並消除上下文問題。 請注意，此自動連接不適用於ES2015類；那裡需要替代方法。 如果您不必要地

對組件方法，React會警告您。

<code class="language-javascript">this.setState({ loading: true });

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

>

4。 ES2015箭頭功能.bind(this)

> es2015箭頭函數（

）是簡潔的，並從其封閉範圍中繼承 無論嵌套水平如何 缺點是函數命名的丟失，阻礙調試（堆棧跟踪顯示“（匿名函數）”）。 Babel彙編通常使用這種方法來維持背景。

5。 ES2016綁定語法（提案）=>this>

提出的ES2016（ES7）綁定語法使用將函數綁定到給定的

<code class="language-javascript">const component = this;
component.setState({ loading: true });

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

>值。 例如：

this

雖然很有趣，但該語法並未得到廣泛支持，並且遭受了與

>的類似缺點，通常會彙編為相同的結果。 > 6。特定於方法的方法

某些功能允許傳遞顯式::參數（例如，this的最終參數）：>

<code class="language-javascript">this.setState({ loading: true });

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

這是不一致的；大多數功能都缺乏此功能。

.bind(this)

結論

有多種方法來管理

上下文。 優先使用Alias的性能，使用組件方法或命名功能調試易於易於調試，並在短內線代碼中使用箭頭函數簡潔。 最佳選擇取決於您的優先級和編碼樣式。 避免過度複雜的解決方案，以阻礙可讀性和可維護性。

thismap常見問題（FAQS）

<code class="language-javascript">React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });
    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});</code>

>

>（為簡潔而省略了常見問題，因為它們在很大程度上涵蓋了原始文本，並且會大大增加這種已經全面的響應的長度。原始常見問題解答很好地覆蓋了此主題。 >

以上是綁定JavaScript的6種方法，在React，ES6和ES7中使用此關鍵字的詳細內容。更多資訊請關注PHP中文網其他相關文章！