事情起因
做了一个项目, 因为只有一个页面, 不想引入redux, 同时因为所有逻辑挤在了同页面的js下面, 对于后续的调试bug很不友好, 因此想到了把JS函数拆分出去.
问题重现
//index.jsimport send from '../../utils/send.js'...send,...//send.jsexport default () =>{ console.log(this) ....}///复制代码 当我执行代码的时候发现this为undefined, 当时很不理解, 为什么会出现这种问题, 在index中调用的send函数, 他的this指向理应是page中的this啊, 以为记忆出错了, 随后使用了bind,call,aplly等方法来绑定this, 然而全部无效. 此时只好祭出搜索大法, 在查找资料的时候, 看到了这句话:
当我们使用箭头函数的时候,函数体内的this指向就是定义时所在的对象,而不是使用时候所在的对象,并不是因为箭头函数内部有绑定this的机制,而是箭头函数没有自己的this,他的this是继承外面的,因此他的内部this就是外部代码层的this恍然大悟,改写了send.js方法, 解决了这个问题.
//send.jsexport defualt function send(){ console.log(this)}复制代码