原生JS -- 函数(function)最全分类及其使用场景

声明：每个人对函数分类的定义不一样，所以这个分类并不是固定的。此篇文章中，笔者只按照自己的理解进行分类哈！

1、有名函数

• 即普通函数、正常函数，“名”指的是函数名。
• 声明式和赋值式创建的函数都属于有名函数
• 执行方式：函数名 | 变量名()

// 声明式创建函数
function f1(){
	console.log("welcome to my blog");
}
// 声明式创建函数的执行
f1(); // welcome to my blog

// 赋值式创建函数
var f2 = function(){
	console.log("thumbs up");
}
// 赋值式创建函数的执行
f2(); // thumbs up

2、无名函数

• 非正常函数，没有名字
• 语法：function(){}
• 不允许直接存在于代码空间(否则会报错)

2.1、作为变量的“值”存在(赋值式创建函数时的“值”)

var fn = function(){
	console.log("collection");
}
fn(); // collection

• 是不是对上述代码有疑问？这不是有名函数吗，怎么又变成无名函数了？请注意节标题：作为“值”存在，fn确实是函数名，但是它的值function(){}确实也是一个无名函数的形式。

2.2、作为事件处理函数执行

document.onclick = function(){
	alert("comments"); // 点击页面的时候弹出comments
}

• 这里的无名函数也称为事件处理函数，当有绑定的事件类型被触发时，执行这里的代码

2.3、作为函数的参数使用

function fn(cb){
	cb(); // 用cb来接收，并且执行，打印 subscribe
}
fn(function(){ // 执行fn的时候传入一个为函数的参数
	console.log("subscribe");
});

• 当一个函数的参数又是一个函数时，这个作为参数的函数叫回调函数

2.4、作为函数的返回值使用

var fn(){
	return function(){
		console.log("thanks for watching");
	}
}
var f = fn(); // 执行fn的时候得到了返回值，这个返回值就是无名函数
f(); // 执行无名函数，打印 thanks for watching

• 在一个函数内部，嵌套了另一个函数，此时就形成了闭包

2.5、作为匿名函数的函数体

;(function (){
	console.log("thumbs up");
})(); // 匿名函数是自动执行的，打印 thumbs up

3、匿名函数

• ;()()，这是个啥？只要你有疑问，你就知道它为什么叫匿名函数了。
• 当然了，必须要和无名函数配合才能成为完整的匿名函数。
• 目的是为了生成一个独立的作用域，方便分组。
• 需要注意的一点是，匿名函数的前面需要加上分号;,防止出错。大家知道在js中就算你不写分号，程序也不会报错。但是匿名函数在执行时，如果上一行代码没写分号，就会报错。原因我先不说，请看代码，并结合报错信息，试试看自己能不能get到。

var str = "string"
(function(){})(); // 报错，"string" is not a function

• 原因：js不识别换行，上述代码实际上是这样的形式var str = "string"(function(){})()，js认为"string"()是在执行一个函数，但实际上"string"并不是一个函数。