由于class 的方法默认不会绑定this，如果你忘记绑定 this，当你调用这个方法的时候 this的值为 undefined。如下：
未绑定this
通常情况下如果不是直接调用，应该为方法绑定this。绑定方式有如下几种：
1、在构造函数中使用bind绑定this（官方推荐的绑定方式，也是性能最好的方式，只会生成一个方法实例，并且绑定一次之后如果多次用到这个方法也不需要再绑定，不过即使不用到state，也需要添加类构造函数来绑定this，代码量多一点）
在构造函数中使用bind绑定this
2、在调用的时候绑定this（写法比较简单，当组件中没有state的时候就不需要添加类构造函数来绑定this，但是这样每次渲染App时都会创建不同的回调函数，当该方法作为属性传递给子组件时，子组件可能会进行额外的重新渲染，有一定的性能影响）
2.1 使用bind
在调用的时候使用bind绑定this
2.2 使用箭头函数
在调用的时候使用箭头函数绑定this
3、 使用实验性的 public class fields 语法（利用属性初始化语法，将方法初始化为箭头函数，在创建函数的时候就绑定了this，不需要在类构造函数中绑定，调用的时候不需要再作绑定，但目前仍然是实验性语法，需要用babel转译）
使用实验性的 public class fields 语法
4、使用lodash的bind和es7的@装饰器来完成this绑定（目前在项目上使用的一种绑定方式，简单方便）
①需要让项目支持装饰器写法
首先安装依赖
安装依赖
然后在.babelrc.js文件中进行相关配置
.babelrc.js
②需要在项目中安装lodash相关依赖 ，这里我们用到的是lodash中的lodash-decorators
安装依赖
安装之后就可以在代码中进行引用，然后结合@装饰器进行bind操作，但是发现会有警告信息，鼠标放到上面可以看到详细的提示信息
警告信息提示
针对上面问题的解决方法是在项目根目录下新建jsconfig.json文件，这个文件主要是用来指定根文件和JavaScript语言服务提供的功能选项，根据上面的警告提示信息在文件中进行相关配置即可
jsconfig.json
③然后就可以成功完成this绑定啦
成功绑定
网友评论