spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)

1. 自动绑定 (事件绑定)

绑定this: React为什么要这么做?

• 是js中this绑定方式决定的，和react工作方式无关。
• 函数处理, 是作为回调传递的，这样就会丢失了上下文, 所以this为 undefined
• this不是默认指向在全局的吗? 在严格模式下Strict mode, 就是个undefined, 不严格模式为全局

// 三种方式
// 1. 构造器绑定
constructor (props) {
    super(props)
    this.handleClick3 = this.handleClick3.bind(this)
  }

// 2. 箭头函数
<button onClick={() => this.handleClick2()}>

// 3. bind方式
<button onClick={this.handleClick4.bind(this)}>

2. 为什么要绑定this?

LIN.JY666：[JS基础] 7 - this, call/apply/bind/箭头函数​zhuanlan.zhihu.com

• 如果是个函数调用，那么this指向函数内部，如果是非严格模式，那么this指向window
• 如果是个对象里的函数调用，那么this指向该对象
• this要等到执行的时候，才确定是什么。

为了绑定当前执行的环境, 当前执行的作用域

const object = {
    name: '123',
    fn: function () {
        // 隐式绑定
        console.log('this.name', this.name)
    }
}
const name = 'test'

// 1. ?
object.fn() // 返回'123' 对象里的函数调用, this指向该对象

// 2. ?
objFn = object.fn 
objFn() // 返回 test 函数调用，那么this指向函数内部，如果是非严格模式，那么this指向window

// 3. 绑定, object.fn的this 使用object内部
objFnn = object.fn.bind(object)
objFnn() // '123'