调用 ES6 方法时的绑定上下文.如何从称为回调的方法中访问对象

React.createClass （ES5） 创建类的方式有一个内置功能，可以将所有方法绑定到自动this。但是在 ES6 中引入 classes 并迁移 React.createClass 时，他们发现对于不习惯其他类中此功能的 JavaScript 开发人员来说，这可能会有点令人困惑，或者当他们从 React 迁移到其他类时可能会感到困惑。

因此，他们决定不将其内置到 React 的类模型中。如果你愿意，你仍然可以在构造函数中显式预绑定方法，如果你愿意

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
    this._handleTextChange = this._handleTextChange.bind(this); //Binding to `this`
  }
  _handleTextChange(event) {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }

但是我们总是有一个简单的方法来避免这种预绑定。是的！没问题。箭头函数。

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
  }
  _handleTextChange = event => {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }
  render() {
    return (
      <TextInput
        style={styles.input}
        onSubmitEditing={this._handleTextChange}/>
    );
  }
}

顺便说一句，这都是关于反应的。ES6 类始终具有从方法内部访问对象上下文的方法，而无需将对象显式绑定回其自己的方法。

class bindTesting {
  constructor() {
    this.demo = 'Check 1';
  }
  someMethod() {
    console.log(this.demo);
  }
  callMe() {
    this.someMethod();
  }
}
let x = new bindTesting();
x.callMe(); //Prints 'Check 1';

但是，如果我们在 JSX 表达式中调用它，这不会打印"Check 1"。

编辑 ：： 正如@Oka提到的，类体中的箭头函数是 ES7+ 功能，在 babel 等编译器/填充物中可用。如果你没有使用支持此功能的转译器，我们可以如上所述绑定到this或像这样编写一个新的 BaseComponent（这是一个坏主意）

class BaseComponent extends React.Component {
 _bind(...methods) {
  methods.forEach( (method) => this[method] = this[method].bind(this) );
 }
}
class ExampleComponent extends BaseComponent {
 constructor() {
  super();
  this._bind('_handleTextChange', '_handleClick');
 }
 // ...
}

也许我误解了JavaScript的一个基本方面（我是JS的初学者），但这对我来说似乎完全是疯狂的。真的没有办法在不显式绑定对象的情况下从方法中访问对象的上下文......这是自己的方法，在它被称为的地方？

好吧，"方法"不是由javascript中的对象拥有的。所有函数都是一等值（对象），而不是对象或类的"部分"。

this值的绑定在调用函数时发生，具体取决于函数的调用方式。具有方法表示法的函数调用将其this设置为接收对象，事件侦听器调用将其this设置为当前事件目标，普通函数调用仅具有undefined。

如果要访问实例上的方法，则实际上只是标准原型继承属性访问，它生成一个函数，然后调用该函数并将其动态绑定到接收器。

如果要在实例上调用函数作为事件侦听器的方法，则需要显式创建一个执行此操作的函数 - "bound"方法。在 ES6 中，通常首选箭头符号。

ES6 和 React 暂时，在常规的旧 JavaScript 中，当你传递一个对象的方法时，它只是对函数本身的引用，而不是对象和函数。

任何调用函数都可以选择使用隐式this，通过正常调用函数，甚至可以选择使用.call和.apply或.bind来更改上下文。

var O = {
  foo: function () {
    console.log(this);
  },
  bar: 51
};
O.foo(); // `this` is O, the implicit context, inferred from the object host
var foo = O.foo;
foo(); // `this` is is the global object, or undefined in Strict Mode

正在发生的事情是，您正在将_handleTextChange函数传递给事件发射器，该事件发射器将在一段时间后执行。事件发射器不知道它接收了作为方法的函数。它只是执行它。

var O = {
  foo: function (event) {
    console.log(this);
    console.log(event);
  },
  bar: 51
};
function invoke (func) { // the function reference held by O.foo is now held by `func`
  func('some param'); // it has no idea as to what the contextual `this` is bound to, maybe its implicitly global, maybe its explicitly bound, maybe its undefined
}
invoke(O.foo);
invoke(O.foo.bind(O)); // A copy of the function with the context explicitly bound

看看上下文共享：

function foo () {
  console.log(this.a);
}
// Both object hold references to the foo function
var O = { foo : foo, a : 5 },
    O2 = { bar : foo, a : 1 };
O.foo(); // implicit `this` from O
O2.bar(); // implicit `this` from O2
var Z = { a : 23 };
O.foo.call(Z); // explicit `this` from Z

这些例子可能会变得任意复杂。