2016 年 9 月 23-24 日,由 CSDN 和创新工场联合主办的“MDCC 2016 移动开发者大会• 中国”(Mobile Developer Conference China)将在北京• 国家会议中心召开,来自 iOS、Android、跨平台开发、产品设计、VR 开发、移动直播、人工智能、物联网、硬件开发、信息无障碍10个领域的技术专家将分享他们在各自行业的真知灼见。
从 8 月 8 日起至 9 月 4 日,MDCC 大会门票处于 6.8 折优惠票价阶段,五人以上团购更有特惠,限量供应(票务详情链接,6.8折优惠,欲购从速!)
原文: Constant confusion: why I still use JavaScript function statements
作者: Bill Sourour,游戏开发网站 Dev Mastery 创始人,同时也是顾问、教师。
译者: 张新慧,如有不当,欢迎指正。
时光溯回到上世纪 90 年代晚期,在初次接触 JavaScript 时,老师教我们使用函数声明写下Hello World
,它看上去是这样的……
function helloWorld() {
return ‘Hello World!’;
}
那时候,再没有比写出如下Hello World
函数更酷的事儿了……
const helloWorld = () => 'Hello World!';
这个函数表达式体现了 ES 2015 的最大亮点——箭头函数(Arrow function),精简可爱,简直迷死人。第一次看到它时,我的内心戏是:“憋说话,吻我”!
即使是免费的 Babel(JavaScript编译器),也无法阻挡我对函数声明的喜爱。
一晃 20 年过去了,用 ES 2015 做了这么多项目,如今再写Hello World
函数,就是这样的了:
function helloWord() {
return ‘Hello World!’;
}
一睹了新世界的风采,想必你们眼中的旧世界已经不忍直视了吧?——那么简单的函数竟然要 3 行!那些多余的字符怎么看都扎眼!
如今你们内心戏大概是:
我对箭头函数绝对是真爱,但要声明一个顶级函数时,我仍用“土气”的函数声明。
为什么呢?“Uncle Bob” Martin 是这么说的:
花1小时写代码,就要花10小时检查代码。查找漏洞都成了写代码的一部分了,这个差距太悬殊。就算写代码多费点时间,代码也要简单易懂。
—— Robert C. Martin《Clean Code: A Handbook of Agile Software Craftsmanship》
相比函数表达式,函数声明有两大优势:
1. 目的明了
每天看上千行代码,快速了解程序员的目的非常重要。
看看这行代码:
const maxNumberOfItemsInCart = ...;
读完了还是不知道这省略符号是函数还是其他什么值。它可能是:
const maxNumberOfItemsInCart = 100;
也可能是:
const maxNumberOfItemsInCart = (statusPoints) => statusPoints * 10;
如果使用函数声明就没有这个麻烦了。
请看:
const maxNumberOfItemsInCart = 100;
对比:
function maxNumberOfItemsInCart(statusPoints) {
return statusPoints * 10;
}
从一开始目的就很明了。
不过,如果你的代码编辑器可以用颜色区分代码,或者你在用一个 Speed Reader,就当我什么都没说。
你们肯定在暗自赞叹函数声明既简洁又迷人吧。
实际上,仅这一个原因还不足以服人,还有另外一个原因。
2. Order of declaration == order of execution
执行顺序和声明顺序一致时,是最理想的。如果能做到执行时才声明使用 const(常数)关键字的值就很厉害了。
Fair warning: 接下来我要放大招了——下文“行话”连篇,但你只要明白在声明之前不能使用常数就好。
以下的代码会抛出一个错误:
sayHelloTo(‘Bill’);
const sayHelloTo = (name) => `Hello ${name}`;
这是因为,当 JavaScript 引擎阅读代码时,会绑定(bind)而非初始化sayHelloTo
。
JavaScript 中所有声明都是提升(hoist)和绑定的,但初始化的方式各自不同。换言之,JavaScript 提升了sayHelloTo
的声明——先阅读,再置其于顶层,然后创建空间来储存其值——但在执行之前不会声明sayHelloTo
。
sayHelloTo
绑定和初始化的时间差叫作“暂存死区(TDZ)”。
如果在浏览器里直接使用ES2015(而不是借助Babel等使用ES5),以下的代码也会抛出错误:
if(thing) {
console.log(thing);
}
const thing = 'awesome thing';
以上的代码是用var
而非const
写的,不会抛出错误,因为变量被绑定时会初始化为undefined
,而常数被绑定时完全不会被初始化。有点偏题了……
函数声明不会有此类 TDZ 问题。如下文,代码可以是:
sayHelloTo(‘Bill’);
function sayHelloTo(name) {
return `Hello ${name}`;
}
这是因为函数声明在被绑定时就被初始化了——这是在执行代码之前。
所以不论何时进行函数声明,代码开始执行时,语法都是符合其作用域的。
刚说的问题让代码不得不从低级开始,一步一步往上走。
但我根本适应不了这样的思维方式啊。框架在前,细节在后才对。
大多数代码都是人写的,人的思维往往是跟着代码执行的顺序走的。
实际上,在代码顶端上面加一个 API 的小总结不是很好吗?用函数声明完全可以做到。
看看如下颇为生硬的 shopping cart 模块:
export {
createCart,
addItemToCart,
removeItemFromCart,
cartSubTotal,
cartTotal,
saveCart,
clearCart,
}
function createCart(customerId) {...}
function isValidCustomer(customerId) {...}
function addItemToCart(item, cart) {...}
function isValidCart(cart) {...}
function isValidItem(item) {...}
...
用函数表达式,它就是这样的:
...
const _isValidCustomer = (customerId) => ...
const _isValidCart = (cart) => ...
const _isValidItem = (item) => ...
const createCart = (customerId) => ...
const addItemToCart = (item, cart) => ...
...
export {
createCart,
addItemToCart,
removeItemFromCart,
cartSubTotal,
cartTotal,
saveCart,
clearCart,
}
把它想象成一个包含着小函数,稍大点儿的模块呢?看个人喜好。
很多人,包括很多聪明人都会觉得在声明之前使用不合常理,而且会产生不良后果。但什么好,什么不好,只是个人意见而已,并非真理。
但我的意见是:代码就是用来交流的。好的代码就是一则精彩的故事。
我会用编译器、转译器、压缩工具等来优化机器的代码。但是优化代码对我来说就是让其更简单易懂。
关于箭头函数
是的,箭头函数是真爱啊。
我一般会用箭头函数来通过一个小函数,将其作为更高阶函数的值。使用箭头函数时,还会使用map
、filter
等,它们都是我的好朋友。
举个例子:
const goodSingers = singers.filter((singer) => singer.name !== 'Justin Bieber');
function tonyMontana() {
return getTheMoney().then((money) => power)
.then((power) => women);
}
此文还提及了一些 JavaScript 的新功能。若想了解 JavaScript 最新标准 ES 2015 及其各种新功能新亮点,我可以提供免费的入门指南。