JavaScript
中定义一个方法主要可以分成两种形式:
- 函数声明
- 函数表达式
函数声明
声明体是最普通的,与其他语言也相近的一种方式。
function func(a, b) {
return a + b
}
func(1, 2) // 3
不过,毕竟JavaScript!它有一个特性:函数提升。
函数提升:把所有函数提升到当前作用域上,从而可以做到“未声明先调用”。
(划重点!等下要考!)
函数表达式
这可能是目前用的最多的声明方式,因为可以搭配箭头函数“假装自己在用函数式编程”。
const func = function(a, b) {
return a + b
}
// 箭头函数版本
const funcA = (a, b) => a + b
func(1,2) // 3
但受变量作用域的关系,所以const
和let
没有变量提升的能力。
funcA(1) // ReferenceError: funcA is not defined
const funcA = a => a
燃鹅,这才刚刚开始…
函数表达式:匿名 & 具名
匿名就是上面那种,而具名就是给函数本体再起一个名字。
const func = function funcName() {}
这样有什么用?后面那个名字又不能用!答案还是有区别的。
首先有一个函数名推断,例如上面这个函数,那么func.name
会返回funcName
,如果匿名函数的话[fn].name
会返回''
(在ES5的情况下,ES6会被推断为外面的函数名)。其次这个名字可以在函数内部使用,当然了指代的就是自己了。
const func = function funcName(a, b) {
return a < 0 ? b : funcName(a+1-b, a)
}
func(431, 151) // 281
funcName(431, 151) // ReferenceError: funcName is not defined
console.log(func.name) // funcName
typeof funcName === 'function' // false
所以这种方式最适合递归函数了。
函数表达式依然是个常/变量
关键词已经决定了这个“量”会以什么形式存在,比如var
和let
是变量,const
是常量,并且let
还有作用域范围。
const funcA = () => console.log('A')
funcA() // A
funcA = () => console.log('AA') // TypeError: Assignment to constant variable.
var funcB = () => console.log('B')
funcB() // B
funcB = () => console.log('BB')
funcB() // BB
题外话:那么就有个老生常谈的问题了,函数表达式按道理来讲是“灵活的”,那么
function funcB() {
console.log('B')
}
funcB()
function funcB() {
console.log('BB')
}
funcB()
两个funcB
的结果分别会是什么?
箭头函数
又到了大家最最喜欢的箭头函数环节,现在还有谁是不愿意写箭头函数的?
const func = a => b => a + b
func(1)(2) // 3
不过,箭头函数两个特点:
- 不会创造上下文(自身无
this
) - 必然是个匿名函数
- 没有
arguments
不是两点吗?怎么变成三点了?此时你可能会回去检查刚刚那句话,但是我现在悄悄告诉你,其实是三点。
关于箭头函数自身无this
,有很多文章讲了this
的指向相关,可以翻看那些文章得到答案。
计算属性函数名
这个应该是在“对象”的环境中存在,毕竟对象可以指代很多种只要是对象的情况。
const object = {
['a' + 'b'](a, b) {
return a + b
}
}
object.ab(1, 2) // 3
这就实现了“函数名可以暂时不知道是什么”的情况,通过计算来得到这个函数。
Other
new Function
这是一个不知道哪里可以用得上但是可以用的方式:通过对象创建
const func = new Function('a', 'b', 'return a + b')
func(1, 2) // 3
函数参数初始值
可能会有参数要初始值的需求,但可能没有
function func(a = 1, b = 2) {
return a + b
}
func() // 3
可能我们更常用的还有这些
const funcA = (obj = {}) => obj
const funcB = (arr = []) => arr
但JavaScript
毕竟是「函数是第一公民」的语言,有机会会写到很多高阶函数。所以
const func = (fn = () => 'YDJFE') => fn.call(null)
凭什么函数作为参数就不能有初始值呢?当然是可以的呀!
总结
我只是想用JavaScript写一个方法…为什么这么复杂…
(关于JavaScript
定义方法,如果还有其他姿势欢迎补充~)