学习 ES6:箭头函数 Arrow Functions

如果 JavaScript 中申明函数不用function关键字会是什么样?参考博文:ES6 In Depth:Arrow Functions

首先来看一段代码:

如果你第一次接触,你肯定会生出一个念头:“这是 JavaScript 代码吗?这玩意能运行起来?”,但他的确是 JavaScript 代码,也的确能正常运行,等价于:

这就是 ES6 中的的箭头函数,用str=>str就代表了一个函数,把“function”写成其它单词(functino)之类的概率也大大减少了 :)。

JS中有四种箭头:

  • <!--表示“单行注释”
  • -->表示“趋向于”运算符
  • <=表示“小于等于”
  • =>表示“箭头函数”
“趋向于”运算符

运行countdown(10)n会从9一直输出到0

箭头函数

当你只需要一个只有一个参数的简单函数时,可以使用 ES6 中的箭头函数,它的语法非常简单:标识符=>表达式。你无需输入functionreturn,一些小括号、大括号以及分号也可以省略。

如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数list。

除表达式外,箭头函数还可以包含一个块语句:

小提示!使用了块语句的箭头函数不会自动返回值,你需要使用return语句将所需值返回。

注意!!!当使用箭头函数创建普通对象时,你总是需要将对象包裹在小括号里:

ES6中的规则是,紧随箭头的“{”被解析为块的开始,而不是对象的开始。因此,obj => {}这段代码就被解析为没有任何行为并返回undefined的箭头函数。
更令人困惑的是,你的 JavaScript 引擎会将类似{key: value}的对象字面量解析为一个包含标记语句的块::

幸运的是,“{”是唯一一个有歧义的字符,所以用小括号包裹对象字面量是唯一一个你需要牢记的小窍门。

箭头函数的this值

普通 function 函数和箭头函数的行为有一个微妙的区别,箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。

JavaScript 中的this是如何工作的?它的值从哪里获取?这些问题的答案可都不简单,如果你对此倍感清晰,一定因为你长时间以来一直在处理类似的问题。

这个问题经常出现的其中一个原因是,无论是否需要,function 函数总会自动接收一个this值。我经常写这样的hack代码:

在这里,我希望在内层函数里写的是this.addClass("success");,不幸的是,function函数总会自动接收一个this值,所以在done()方法中,this指代当前发起请求的Ajax对象。

在 ES6 中,不需要再hack  this了,但你需要遵循以下规则:

  • 通过object.method()(上文中的$.ajax())语法调用的方法使用非箭头函数定义,这些函数需要从调用者的作用域中获取一个有意义的this值。
  • 其它情况全都使用箭头函数

在 ES6 的版本中,注意done()从它的调用者处获取了this值,内部函数是一个箭头函数,所以它继承了外围作用域的this值。

对象字面量中的方法

在 ES6 中你可以用更简洁的两种方式编写对象字面量中的方法:

箭头函数与非箭头函数间还有一个细微的区别,箭头函数不会获取它们自己的arguments对象。诚然,在 ES6 中,你可能更多地会使用不定参数和默认参数值这些新特性。

文后小结

又一个神奇的特性,代码里不用到处都是“function”了,代码既简洁又明了。微软最新的 Edge浏览器中也实现了箭头函数的功能,如果你想立即在你的 Web 项目中使用箭头函数,可以使用 TypeScriptBabel 或 Traceur,这三个工具均已实现相关功能。

发表评论