Javascript 为什么这个回调函数不添加bind（这个）？

我知道，每次将自定义函数传递给onChange或onSubmit之类的事件处理程序时，我们都需要使用.bind

在下面的示例中，我们将事件处理程序（talk函数）作为道具传递。 当用户单击按钮时，将调用talk功能

var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('./Button');

var Talker = React.createClass({
  talk: function () {
    for (var speech = '', i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  },

  render: function () {
    return <Button talk={this.talk}/>;
  }
});

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var按钮=要求（“./按钮”）；
var Talker=React.createClass({
谈话：功能（）{
对于（var speech=''，i=0；i<10000；i++）{
语音+=‘废话’；
}
警觉（言语）；
},
渲染：函数（）{
返回；
}
});
ReactDOM.render(
,
document.getElementById（'app'）
);

Button.js

var React = require('react');

var Button = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
});

module.exports = Button;

var React=require（'React'）；
var按钮=React.createClass({
渲染：函数（）{
返回(
点击我！
);
}
});
module.exports=按钮；

此示例使用按钮talk={This.talk}代替按钮{This.talk.bind.（This）}

---

，但为什么呢？

因为基本上，.bind会将特定对象“绑定”到“this”。但是，由于函数没有使用“this”，所以您是否绑定它并不重要

---

如果在函数talk中引用了“Talker”类的实例。此时您将开始遇到一些问题。

因为基本上，.bind会将特定对象“绑定”到“this”。但是，由于函数没有使用“this”，所以您是否绑定它并不重要

---

如果在函数talk中引用了“Talker”类的实例。此时您将开始遇到一些问题。

.bind

用于确保使用类的上下文而不是调用方的上下文调用函数

当您访问函数中的类属性时，尤其需要它。 例如，如果您的

speech

变量是类变量而不是本地变量

talk: function () {
    for (this.speech = '', i = 0; i < 10000; i++) {
      this.speech += 'blah ';
    }
    alert(this.speech);
  },

talk:function（）{
对于（this.speech=''，i=0；i<10000；i++）{
这个。语音+=‘废话’；
}
警觉（这篇演讲）；
},

在这种情况下，您需要

bind

您的

talk

功能没有执行此操作。 它有自己的局部变量，因此可以使用任何

上下文调用它

talk={this.talk}
将在这里工作

问题中bind函数的语法也不正确。它必须是
this.talk.bind（this）
而不是
this.talk.bind.（this）
。bind
用于确保函数是在类的上下文而不是调用方的上下文中调用的

当您访问函数中的类属性时，尤其需要它。
例如，如果您的
speech
变量是类变量而不是本地变量

talk: function () {
    for (this.speech = '', i = 0; i < 10000; i++) {
      this.speech += 'blah ';
    }
    alert(this.speech);
  },

talk:function（）{
对于（this.speech=''，i=0；i<10000；i++）{
这个。语音+=‘废话’；
}
警觉（这篇演讲）；
},

在这种情况下，您需要
bind

您的
talk
功能没有执行此操作。
它有自己的局部变量，因此可以使用任何
上下文调用它

talk={this.talk}
将在这里工作

问题中bind函数的语法也不正确。它必须是
this.talk.bind（this）
而不是
this.talk.bind.（this）
在这种情况下，如果组件
Talker
在另一个组件中使用，则需要使用
bind
。如果是这种情况，
Talker
组件中的
此
将引用其他组件。在您当前的情况下，它被传递到按钮。因此，需要使用
bind
来确保它是从
Talker
调用的，而不是从
按钮
组件调用的。
在这种情况下，如果组件
Talker
在另一个组件中使用，则需要使用
bind
。如果是这种情况，
Talker
组件中的
此
将引用其他组件。在您当前的情况下，它被传递到按钮。因此，需要使用
bind
来确保它是从
Talker
调用的，而不是从
按钮
组件调用的。
当使用
createClass
时，这种行为是预期的，其中React将每个方法（自定义方法和React组件API的方法）绑定到它们的组件，从而使“This”可用。当使用ES6
时，情况就不同了。。。。扩展React.Component
，其中React仅将“this”绑定到React组件API方法

另外，您不需要每次在渲染方法中使用ES6时都这样做

你可以

constructor () {
    super()
    this.talk = this.talk.bind(this)
}

并在其中的任何地方使用这个.talk（）

对于深入的解释，
当使用
createClass
时，React会将每个方法（自定义方法和React组件API的方法）绑定到它们的组件，从而使“This”可用时，这种行为是预期的。当使用ES6
时，情况就不同了。。。。扩展React.Component
，其中React仅将“this”绑定到React组件API方法

另外，您不需要每次在渲染方法中使用ES6时都这样做

你可以

constructor () {
    super()
    this.talk = this.talk.bind(this)
}

并在其中的任何地方使用这个.talk（）

对于深入的解释，
您只需要
.bind
，如果您需要
此
在函数中引用特定值。由于
talk
无法访问
此
，因此不需要使用
.bind
。还有一个事实是，
React.createClass
自动绑定每个方法，但这在您的示例中并没有什么区别。如果需要在函数中引用某个特定值，则只需要
.bind
。由于
talk
无法访问
此
，因此不需要使用
.bind
。还有一个事实是，
React.createClass
auto