this指向

Question

    clickHandler1() {
        // console.log('this....', this) // this 默认是 undefined
        this.setState({
            name: 'lisi'
        })
    }

老师，在react，class组件中的方法里的this为啥取不到值啊，普通的class方法里可以取到啊？

    // 静态方法，this 指向当前实例
    clickHandler2 = () => {
        this.setState({
            name: 'lisi'
        })
    }

还有这个，定义静态方法不是要在前面加一个static的关键字吗

Answer 1

双越 2020-03-08 22:05:22

首先，React class 内的方法，都是实例方法，不是静态方法。课程中介绍的书写方式，只是为了方便 this 绑定。

第二，React 中直接调用方法没有 this ，是因为这是在 jsx 中调用的，而不是像普通的实例一样去调用，如 instance.someFn() 这样。

• 提问者 慕粉1470117225 #1

  你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
  
  这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
  
  老师，这是react官网上的一段话。我的理解是this的指向和调用他的环境有关，比如instance.someFn()这样，指向的是调用他的实例。但是比如例子里的p标签上，我们只写上this.clickHandler1却没有立即调用它，等我们点击p标签的时候，this的指向就是默认undefined了？，除非是像官网里说的，<button onClick={(e) => this.handleClick(e)}>
          Click me
        </button>，写个匿名函数，再在函数体里立即调用执行this.clickHandler1()方法。这时候this就会指向调用它的实例了

• 双越 回复 提问者 慕粉1470117225 #2

  是的，必须有显示的 this 才可以。直接写一个 <button onClick={fn}></button> 是对应不到 this 的。

• 慕函数3762822 #3

  静态方法的说法，误导性太大了，类里面的静态方法是挂在类本身的，这里难道不是箭头函数的this上下文是由其被定义的时候决定的吗？箭头函数自己没有this，需要沿着它的作用域链里去找的，而作用域链是在定义的时候决定的

Answer 2

h4ck3r 2020-05-29 04:26:03

class Person {
    constructor() {
      this.onClassPrototypeBindOnInstance = this.onClassPrototypeBindOnInstance.bind(this)
    }
    static onClassSelf = () => {
      console.log(this)
    }
    onClassPrototype() {
      console.log(this)
    }
    onClassPrototypeBindOnInstance() {
      console.log(this)
    }
    onClassInstance = () => {
      console.log(this)
    }
}

const people = new Person('instance')

console.log('Person:', Person)
// node(v12.16.1)里打印的↓
// Person: [Function: Person] { onClassSelf: [Function: onClassSelf] } 
console.log('Person Prototype:', Person.prototype)
// chrome(v81)里打印的 ↓
// Person Prototype: {constructor: ƒ, onClassPrototype: ƒ, onClassPrototypeBindOnInstance: ƒ}
console.log('Instance people:', people)
// node(v12.16.1)里打印的↓
/* Instance people: Person {
  onClassInstance: [Function: onClassInstance],
  onClassPrototypeBindOnInstance: [Function: bound onClassPrototypeBindOnInstance]
} */

函数在 bind 和 公共类字段 的位置指向是不同的

• h4ck3r #1

  纠正一下。bind返回一个新函数，和公共类字段定义函数都是实例内的函数。