01 从 var 到 const/let
var 定义的变量的作用域是函数范围的,而且是它所在的最内层的(离它最近的)函数。如果没被函数「包裹」,则变量就是全局作用域的。
猜猜下面的代码中的 foo 函数调用会得到什么结果?
它是实际上会得到 undefined。
上面的代码等价于下面的代码:
也就是说函数 foo 执行的时候,return 语句返回的 x,来自于函数体内定义的 x,而该 x 并没有被初始化,所以是得到的是 undefined。
let 和 const 的作用域一样,都是基于 block 的,即作用于 {} 定义的范围。
const 和 let 唯一的区别是,被 const 修饰的变量,不能再进行任何修改(用于赋值语句)。
猜猜看下面代码中的 foo 函数调用的结果。
该函数调用会得到 3。
02 从 IIFEs 到 blocks
IIFE 的全称是 Immediate Invoked Function Expression,是 ES5 中用于把变量限制于 block 的一种实现方式。
示例代码如下:
上面的代码中,由于 tmp 被限制在了 block 中,确切说是「包裹」它的函数中,所以在外部引用该变量时,会得到 ReferenceError 的运行错误。
在 ES6 中,我们不需要使用 IIFE 来达到上面示例代码的目的了,直接使用 {} 把变量声明「包裹」起来即可。
示例代码如下:
03 从拼接字符串到字面值模版
String interpolation (字符串拼接)
在 ES5 中我们使用加号 + 来进行字符串和变量拼接,比如下面的代码:
上面的代码拼接出的字符串就是 (x,y),其中 x 和 y 会被替换变量的值。
在 ES6 中使用反引号 ` 来实现上述的目的,参考下面的代码:
上面的代码中,使用 ${} 来实现对变量的引用。
-Template literals (模版字面值)
下面的示例代码给出了多行字符串的连接方式。
依然使用 plus (加号):
使用 backslash (反斜杠):
使用 backtick (反引号):
其中,使用 backtick 是 ES6 中引入的方式。
04 从函数表达式到箭头函数
在 ES5 中,如果要在一个 callback 函数中,通过 this 关键字访问声明这个 callback 函数所在的对象,可以使用一个 shadow this 来保存对象中的 this。如下代码示例:
上面的代码中,变量 _this 就是一个 shadow this,在 button 的监听事件的 callback 函数中引用 _this,形成了一个 closure (闭包)。
除了 shadow this,我们还可以使用 bind 函数。
在 ES6 中,arrow function(箭头函数)可以让代码变得更简洁,它是编译器将函数中的 this 和父级对象中的 this 绑定。代码示例如下:
上面代码中的 this 实际上绑定到了 UiComponent 对象。
箭头函数给一些简短的,只返回一个表达式结果的 callback(回调函数)带来了便利。
在 ES5 中的 callback 的写法显得啰嗦,示例如下:
而 ES6 中,通过箭头函数会很简洁,示例如下:
-处理多个返回值
一些函数或方法会通过数组或对象来返回多个值。
在 ES5 中需要一个中间变量来访问那些值,在 ES6 中你可以通过 destructuring (解构)来避免使用中间变量。
(1)数组中的多个返回值
exec() 返回捕捉到的组到类似数组的对象中。在 ES5 中需要一个中间变量,即使你只对那个组感兴趣,示例代码如下:
在 ES6 中,destructuring 是代码更简单,示例如下:
数组中开头的那个空的 slot(插槽)表示略过返回结果的数组中,索引为 0 的元素。
(2)对象中的多个返回值
方法 Object.getOwnPropertyDescriptor() 返回一个属性描述符,即一个对象带有多个属性和值。
在 ES5 中,需要中间变量来保存你感兴趣的值,示例代码如下:
在 ES6 中,依然借助 destructuring,示例代码如下:
其中 {writable, configurable} 相当于下面的对象:
未完待续
查看更多文章请关注【实训在线】微信公众号
原文首发:www.shixun.online