react组件方法中的this问题

Question

1

2

如上两图：在react组件中，已知其他环境都相同，仅仅是图1多了一层箭头函数，问：为何在本组件的scroll方法中，图1形式取到this是本组件，图2形式this却是undefined？

Answer 1

这个问题得从class说起。
当定义React组件时，extends React.Component时，不会将this继承下来。所以你的第二个图是this是undefined.
而ES6中的arrow function呢，默认在定义的时候会绑定this。
使用this一般有两种做法。

• 直接使用箭头函数
• 在constructor中绑定。

class {
    constructor() {
        super(...arguments);
        this.myFunction = this.myFunction.bind(this);
    }
    
    render() {
        return(
            <div onClick={this.myFunction}></div>
        )
    }
    
    myFunction() {
        //
    }
}

Answer 2

1.首先箭头函数的this是静态绑定的
2.要理解onScroll这种注册的是事件回调，也就是后面应该是个函数，当croll事件触发的时候执行等号后面的函数，第二种写法就相当于你的scroll()在render的时候就被执行了，而不是在事件触发的时候，里面的this也不是undefined

Answer 3

阮一峰的教程，看看吧