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

我正试图了解ES6中类的语法。同时通过Bonnie Eisenman的学习反应母语学习织物母语

我遇到了一个问题，当回调是类“方法”时，在回调中访问

this

。我知道在StackOverflow上多次出现了回调中有关词法

这个
的问题。例如在

根据我在网上的研究，我找到了一个解决方案。但我不确定在ES6中这样做是否正确

当我尝试以下操作时，出现了我的问题：

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}/>
    );
  }
}

class WeatherProject扩展组件{
建造师（道具）{
超级（道具）；
此.state={
zip:'
};
}
_handleTextChange（事件）{
log（event.nativeEvent.text）；
this.setState（{zip:event.nativeEvent.text}）
}
render（）{
返回(
);
}
}

（我只是从书中的示例中稍微修改了它，以匹配ES6类语法和导入/导出语法，而不是Require。）

如果执行此操作，则
\u handleTextChange
中的
this
未定义（无法读取未定义的属性“setState”）。我对此感到惊讶。来自其他OO语言，我解释这个方法的行为更像是一个静态方法

我已经能够通过跳过类方法并使用箭头符号来解决这个问题
onSubmitEditing={event=>this.setState（{name:event.nativeEvent.text}）}
。这很好用。我对此没有任何问题或困惑

不过，我真的很想知道如何调用类方法。经过一段时间的研究，我已经通过以下方式使其工作：
onSubmitEditing={this.\u handleTextChange.bind（this）}
。也许我误解了JavaScript的一个基本方面（我是JS的初学者），但这在我看来完全是疯了。如果不将对象显式绑定回方法，是否真的无法从方法中访问对象的上下文。。。它是自己的方法，在调用它的地方

我还尝试添加
var self=this，并在
\u handleTextChange
中调用
self.setState
。但我发现这不起作用并不感到惊讶

当对象被称为回调时，从其方法中访问对象的正确方法是什么？
React.createClass（ES5）创建类的方法有一个内置功能，可以自动将所有方法绑定到此
。但是在ES6中引入
类
并迁移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}/>
    );
  }
}

但如果我们在JSX表达式中调用它，它不会打印“check1”

EDIT：：正如@Oka所提到的，类主体中的箭头函数是ES7+特性，在编译器/polyfills（如babel）中可用。如果您不使用支持此功能的transpiler，我们可以如上所述绑定到此
，或者像这样编写一个新的BaseComponent（这是个坏主意）

脱离ES6，在常规的旧JavaScript中，当您传递对象的方法时，它只是对函数本身的引用，而不是对对象和函数的引用

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


var O={
foo:function（）{
console.log（this）；
},
酒吧：51
};
O.foo（）；//`这是O，隐式上下文，从对象宿主推断
var foo=O.foo；
foo（）；//`这是全局对象，或在严格模式下未定义
也许我误解了JavaScript的一个基本方面（我是JS的初学者），但这在我看来完全是疯了。如果不将对象显式绑定回方法，是否真的无法从方法中访问对象的上下文。。。它是自己的方法，在调用它的地方

在javascript中，“方法”不属于对象。所有函数都是一级值（对象），而不是对象或类的“一部分”

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

如果您正在访问实例上的方法，那么实际上只是标准的原型继承属性访问，它生成一个函数，然后调用该函数并动态绑定到接收方

如果您想在实例是事件侦听器时将函数作为方法调用，则需要显式创建一个执行此操作的函数——“绑定”方法。在ES6中，箭头符号通常是首选。
类
主体中的箭头函数是ES7的建议，在Babel等Transpiler中被认为是实验性的。@gunshot更改变量以访问构造函数中的方法，因此，正确绑定对象上下文的版本正是我一直在寻找的解决方案类型，但我自己无法解决。非常感谢。我将使用
this.\u handleTextChange=this.\u handleTextChange.bind（this）。巧妙的！所有可能的方法都在
class bindTesting {
  constructor() {
    this.demo = 'Check 1';
  }

  someMethod() {
    console.log(this.demo);
  }

  callMe() {
    this.someMethod();
  }
}

let x = new bindTesting();
x.callMe(); //Prints 'Check 1';

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');
 }
 // ...
}