返回 登录
0

为什么我坚持使用 JavaScript 函数声明

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}`;
}

这是因为函数声明在被绑定时就被初始化了——这是在执行代码之前。

所以不论何时进行函数声明,代码开始执行时,语法都是符合其作用域的。


Professor JavaScript, out!

刚说的问题让代码不得不从低级开始,一步一步往上走。

但我根本适应不了这样的思维方式啊。框架在前,细节在后才对。

大多数代码都是人写的,人的思维往往是跟着代码执行的顺序走的。

实际上,在代码顶端上面加一个 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,
}

把它想象成一个包含着小函数,稍大点儿的模块呢?看个人喜好。

很多人,包括很多聪明人都会觉得在声明之前使用不合常理,而且会产生不良后果。但什么好,什么不好,只是个人意见而已,并非真理。

但我的意见是:代码就是用来交流的。好的代码就是一则精彩的故事。

我会用编译器、转译器、压缩工具等来优化机器的代码。但是优化代码对我来说就是让其更简单易懂。

关于箭头函数

是的,箭头函数是真爱啊。

我一般会用箭头函数来通过一个小函数,将其作为更高阶函数的值。使用箭头函数时,还会使用mapfilter等,它们都是我的好朋友。

举个例子:

const goodSingers = singers.filter((singer) => singer.name !== 'Justin Bieber');
function tonyMontana() {
  return getTheMoney().then((money) => power)
                      .then((power) => women);
}

此文还提及了一些 JavaScript 的新功能。若想了解 JavaScript 最新标准 ES 2015 及其各种新功能新亮点,我可以提供免费的入门指南

评论