我只是想用JavaScript写一个方法...

5,008 阅读3分钟

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

但受变量作用域的关系,所以constlet没有变量提升的能力。

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

所以这种方式最适合递归函数了。

函数表达式依然是个常/变量

关键词已经决定了这个“量”会以什么形式存在,比如varlet是变量,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定义方法,如果还有其他姿势欢迎补充~)