react18和vue3源码中存在大量function函数和箭头函数的混用,除了this指向等众所周知的原因,箭头和function的深层区别到底是什么?

它俩的简单区别大家都很清楚,this指向、能否使用arguments参数,是否有原型、是否支持yield等。但看了vue3和react18源码,还是存在很多地方使用function,另一些地方却使用箭头函数定义函数的情况,而且这些箭头函数的实现里显然不是为了this指向,function的实现里也显示不是为了当作构造函数或做函数提升,很多function都可以直接用箭头函数定义,但源码里没有那么做,那么到底在架构中,如何决定使用哪种方式定义函数呢?除了那些简单的区别,到底存在什么深层的考量,才使得这些框架源码中除了使用箭头函数,还大量使用了function定义函数

阅读 2.6k
2 个回答

没有完整看过React和Vue的源码,猜测是因为多人协作的原因,尽管会有各种Lint和规则限制,但是还是在贡献的代码中不可避免的携带自己编码习惯。就比如说你提到的箭头函数和普通匿名函数。

然后就是 React19 正在重构,删除了大量代码。可能重构之后的版本有很多功能的风格应该会比较统一。但是后面继续迭代肯定依旧会出现这种情况的。

PR #25774删除了3w行代码

为什么React一年不发新版了?

可以看看这篇文章:ES6 - 箭头函数、箭头函数与普通函数的区别
this指向:箭头函数的this指向是固定的,不会随着函数的上下文环境的变化而变化。而函数的this指向会随着函数的上下文环境的变化而变化。
arguments参数:箭头函数没有arguments参数。而函数有arguments参数。
原型:箭头函数没有原型。而函数有原型。
yield:箭头函数不支持yield语句。而函数支持yield语句。

除了这些本质的区别更多的是 function性能的考量,function可读性,好维护,还有就是团队协作,每个人的代码习惯有关

推荐问题
宣传栏