在 stub Component 的一个方法时，发现这个方法没在 prototype 上。研究了下编译后代码发现出一些猫腻，同时也引起思考：对于 React.Component 方法，如何优雅的去绑定 this。
- 问题现象
class Demo extends React.Component {
constructor(props) {
super(props);
this.method1 = this.method1.bind(this);
}
method1() {}
method2 = () => {};
}
method1 和 method2，分别使用 bind函数 和 箭头函数 两种方式绑定 this。
虽然在程序运行时大多数场景没有问题，而且经常会使用箭头函数绑定。但是这两种声明方式还是有差异的。
- 查找根因
使用官网的 create-react-app 转换代码发现，在 Demo.prototype 上只有 method1 没有 method2。
var Demo = function (_React$Component) {
_inherits(Demo, _React$Component);
function Demo(props) {
_classCallCheck(this, Demo);
var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));
_this.method2 = function () {};
_this.method1 = _this.method1.bind(_this);
return _this;
}
_createClass(Demo, [{
key: 'method1',
value: function method1() {}
}]);
return Demo;
}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
method2是在Demo的构造方法内动态添加的；而method1通过_createClass方法被声明被声明在prototype上。
_createClass内部一段代码如下
if (protoProps) defineProperties(Constructor.prototype, protoProps);
- 疑问：那种好？
ES2015的 class 只是一个语法糖而已，最终还是通过原型等方式实现。所以方法使用prototype方式声明会更好些。
同时也意味着需要使用 bind方法绑定this。
