this指向

来源：7-6 React事件为何bind this

慕粉1470117225

2020-03-08

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

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

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

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

写回答

2回答

双越

2020-03-08

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

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

慕函数3762822

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

2021-09-18

共3条回复

h4ck3r

2020-05-29

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

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

2020-06-07

共1条回复

2024版前端框架及项目面试聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

查看课程

相似问题

现在碰到一个很有意思的this指向问题，卡了我半天终于找到了源头，提给老师

回答 2