JavaScript - the Ways to Bind JavaScript’s this Keyword in React, ES6 & ES7

# The Problem

React 将 this 关键字绑定到组件的上下文

1
2
3
4
5


this.setState({ loading: true });

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

这种情况下会出现 TypeError: this.setStatate is not a function 因为 Promise 内部回调函数的 this 对象不是 react 的组件, 而是 Promise 对象;

# The Options

Alias This

1
2
3
4
5
6


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

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

轻量简单的解决办法

Bind This
1 2 3 4 5

this.setState({ loading: true }); fetch('/').then(function loaded() { this.setState({ loading: false }); }.bind(this));
这种解决方式会在运行时向回调函数注入正确的 context; 所有的JavaScript function 都有一个 bind 方法, 允许用户指定 this 对象的值, 但是这种方式在使用多层嵌套和异步的代码时, 会很混乱, 不易读.

React Component Methods

1
2
3
4
5
6
7
8


  componentWillMount: function() {
    this.setState({ loading: true });

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

一种优雅的解决方式

The best Option ES2015 Arrows

1
2
3
4
5


this.setState({ loading: true });

fetch('/').then(() => {
  this.setState({ loading: false });
});

我觉得是最简单的解决方法, ES5 的箭头函数, 不管嵌套多少层 this 都是正确的 context.

关于 this: 普通函数中的this:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)
3.在严格模式下,没有直接调用者的函数中的this是 undefined
4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this