javascript - 关于react的类中定义方法绑定到实例中的不解

Question

先看一段代码：一个简单的点赞自增组件；

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class Profile extends Component {
    constructor( props ) {
        super( props )
        this.state = {
            liked: 0
        };
        this.likedCallback = this.likedCallback.bind(this);
    }
    likedCallback(){
        console.log("ooooo")
        let liked = this.state.liked;
        liked++;
        this.setState({
            liked
        });
    }
    render(){
        return (
            <p>
                <h1>我的名字叫 {this.props.name}</h1>
                <h2>我今年{this.props.age}岁</h2>
                <button onClick={this.likedCallback}>给我点赞</button>
                <h2>点赞总数:{this.state.liked}</h2>
            </p>
        )
    }
}


const props = {
    name:"hahaha",
    age:"12"
}

let root = document.getElementById('app');
ReactDOM.render(
    <Profile {...props}/>, root
);

有点不太明白为什么要交这一句：
this.likedCallback = this.likedCallback.bind(this);
当然还有一种写法是不加这一句，但是在这一句：
<button onClick={this.likedCallback}>给我点赞</button>
要改成：
<button onClick={this.likedCallback.bind(this)}>给我点赞</button>

这两种方法一对比好像有点明白，就是<button onClick={this.likedCallback}>给我点赞</button>此处的this.likedCallback只是实例方法的引用，此时的likedCallback里面的this已经变成全局this，反正不是实例自己了，所以要用bind在绑定一下，不知道自己这样自圆其说对不对，但是到这里就自己解释不下去了，还是对js了解的不够深刻，有谁能给讲解一下，尤其是在constuctor函数里面的这一句this.likedCallback = this.likedCallback.bind(this);，通俗点哈，谢谢各位了

Answer 1

自己先顶一下啊

Answer 2

你的理解可以说是对的。

this.likedCallback = this.likedCallback.bind(this);实际上只是个偷懒写法，这样写之后的所有
this.likedCallback都不用手动再bind(this)而已。

Answer 3

自己一开始的答案漏洞太多。

主要内容：

1. onclick={}可以等价于function(){}

2. 原型链继承 this相关

3. render() {} <==> render：function(){} 即function invocation

4. ES6的class原型依然是prototype继承

模拟了一个类似的模板来替代react中的{}解析引擎.

<button onclick="'use strict';(function() {console.log(this)})()">getName</button>

由上述几个点，可以认为原因就出在onclick的{}解析上(不过不清楚为什么测试过程中console.log(this)返回的NULL）。

function他的this是依赖于函数内部的context(上下文), 所以会返回undefined或者window

所以arrow function和bind(this)可以起到作用,arrow function依赖于外部函数的context(上下文)，所以this可以指向该class。

reference: https://segmentfault.com/a/1190000006032223