绑定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中文网其他相关文章！