事情起因

做了一个项目, 因为只有一个页面, 不想引入redux, 同时因为所有逻辑挤在了同页面的js下面, 对于后续的调试bug很不友好, 因此想到了把JS函数拆分出去.

问题重现

//index.js
import send from '../../utils/send.js'...
send,
...//send.js
export default () =>{console.log(this)  ....
}
///
复制代码

当我执行代码的时候发现this为undefined, 当时很不理解, 为什么会出现这种问题, 在index中调用的send函数, 他的this指向理应是page中的this啊, 以为记忆出错了, 随后使用了bind,call,aplly等方法来绑定this, 然而全部无效. 此时只好祭出搜索大法, 在查找资料的时候, 看到了这句话:
当我们使用箭头函数的时候,函数体内的this指向就是定义时所在的对象,而不是使用时候所在的对象,并不是因为箭头函数内部有绑定this的机制,而是箭头函数没有自己的this,他的this是继承外面的,因此他的内部this就是外部代码层的this
原博客地址

恍然大悟,改写了send.js方法, 解决了这个问题.

//send.js
export defualt function send(){console.log(this)
}
复制代码