『译』创建 JavaScript 函数的 7 种方式

Avatarcoderfee/Jan 13, 2019/#JavaScript##译文#

函数

一个可以写一本书的 JavaScript 函数,我想其他人也有这种想法。

但是今天我们长话短说。与其他比较流行的语言(如 Java)相比,函数被认为是 JavaScript 语言中的第一等公民。这意味着你可以将它们作为参数传递,让函数返回一个新函数,甚至将函数作为 JavaScript 语言中的任何其它类型的值。例如,函数可以是 JavaScript 对象中的一个属性(命名方法)。

事实上,函数确实是 JavaScript 中的一等公民,因此使得这门语言非常灵活。例如,你在 JavaScript 中可以使用函数创建闭包

function counter() {
let count = 0
function increment() {
return ++count
}
return increment
}
const coolClosureCounter = counter()
coolClosureCounter() // 1
coolClosureCounter() // 2

创建函数的 7 中方式

让 JavaScript 新手比较困惑的是函数的声明。在 MDN 里我们可以找到对函数定义的定义:

一个 JavaScript 函数用 function 关键字声明,后面跟着函数名和圆括号 ()

在熟悉 JavaScript 之后,该语句仍然有效。但是我要向你展示,在 2018 年以 7 中不同的方式创建 JavaScript 函数。

函数声明/定义/语句

function foo() {
console.log('Fun with Functions')
}

我想这是我们学的第一种方式,没什么稀奇的。看起来和其它语言很类似。

函数表达式

const myFunction = function () {
console.log('Fun with Functions')
}

注意,如果你在声明函数表达式之前调用它,那么就会出错:

foo() // Uncaught ReferenceError: foo is undefined
const foo = function () {
console.log('Hei!')
}

箭头函数

;() => console.log('Fun with Functions')

在 ES2015(即 ES6) 之后,我们可以使用非常小巧方便的箭头函数表达式。这个语法在链接内置的 map/filter/reduce 等方法时特别有用。有点像下面的例子:

const names = [
'Eirik',
'Nicolai',
'Henrik',
'Jan',
'Paal Kristian',
'Kristine',
'Espen',
]
names.filter((name) => name.length > 5).map((name) => name.toLowerCase())
// ["nicolai", "henrik", "paal kristian", "kristine"]

但是在使用箭头函数之前,请考虑以下几个事项:

函数的构造函数

好吧,这很尴尬。这种方式不简单也不直观。而且 MDN 不推荐这种方式。但是如果你知道一种用法,我们很乐意了解。

const myStrangeFunc = new Function('a', "console.log(a + 'with Functions')")
myStrangeFunc('Fun') // Fun with Functions

函数体是由一个字符串创建的?!有趣的函数呀!还没有结束呢 🤓。

其它方式……

  • 生成器函数表达式
  • 生成器函数声明
  • 生成器函数构造函数

生成器函数不是这篇文章的主题。在这里查看更多信息

IIFE 和匿名函数

函数非常酷,它们也可以是匿名的。在 JavaScript 中,我们允许未命名的函数。你知道可以立即调用它们吗?立即调用函数表达式(IIFE):

;(function () {
// ......
})()
Copyright ©; 2016-2022 coderfee, All rights reserved.