了解JavaScript中的函数

前言

? ? ? ? 函数对JavaScript来说是它的核心，JavaScript中的函数相当于其他语言中的方法。函数可以封装任意多条语句，可以在任何地方调用执行。JavaScript中的函数用function关键字来声明。掌握函数，是学好JavaScript语言的重中之重。

一、语法

? ? ? ? JavaScript中函数的语法如下

function 函数名(参数……){
  语句;
  语句;
  ……
}

? ? ? ? ?下面举例说明

function helloWorld(){        //无参函数
  console.log('hello world');
}

function print(val1,val2){    //有两个参数的函数
  console.log(val1);
  console.log(val2);
}

helloWorld();               //调用第一个函数
print('hello','world');     //调用第二个函数  

? ? ? ? 函数调用语句可以写在函数定义之后，也可以写在函数定义之前，以下写法也不会报错

helloWorld();               //调用第一个函数
print('hello','world');     //调用第二个函数 

function helloWorld(){        //无参函数
  console.log('hello world');
}

function print(val1,val2){    //有两个参数的函数
  console.log(val1+val2);
}

 

? ? ? ? 如果在函数体中加上return语句，并且return语句后面跟一个值，那么这个函数就会返回一个值，如下所示

console.log(helloWorld());               //调用第一个函数
console.log(print('hello','world'));     //调用第二个函数 

function helloWorld(){        //无参函数
  return 'hello world';
}

function print(val1,val2){    //有两个参数的函数
  return val1+val2;
}

 

? ? ? ? 以上代码会得到相同的执行结果。需要注意的是，函数体内一旦遇到return语句，那么整个函数就结束执行，因此如果return语句后面还有其他语句，便会被忽略掉。比如

console.log(helloWorld());       

function helloWorld(){       
  return 'hello world';
  console.log('good job');    //此行语句不会被执行
}

? ? ? ? return语句后面也可以什么都不跟，这样的话函数只是单纯的结束执行，并不会返回任何值，如下：

console.log(helloWorld());      //输出undefined

function helloWorld(){       
  return;
}

二、参数

????????JavaScript函数的参数和其它语言不同，它既不关心传入的参数的个数，也不关心参数的数据类型。也就是说，即使你定义的函数只接受两个参数，也并不一定非要传两个，可以传多个，也可以不传，JavaScript并不会报错。 之所以会这样是因为，JavaScript函数的参数在内部表现为一个数组，在函数体内可以使用arguments对象访问这个数组，无论数组是空的还是有数据的，都无所谓。

? ? ? ? 可以通过arguments.length来获取参数个数，也可以通过方括号来访问其中的每一个元素，比如上面的例子可以改成如下写法

function print(val1,val2){   
  console.log(arguments[0]+arguments[1]);
}

print('hello','world');

????????或者

function print(){   
  console.log(arguments[0]+arguments[1]);
}

print('hello','world');

? ? ? ? ?两种写法效果是一样的。

三、没有重载

? ? ? ? 与其他语言不同，JavaScript中的函数没有重载，因此，即使你定义两个名称相同，但函数体不同的函数，JavaScript也只会保留最后一个函数，前面定义的会被忽略，比如

console.log(helloWorld());           

function helloWorld(){        //这个函数被忽略
  return 'hello world';
}

function helloWorld(){    //这个函数被调用
  return 'good job';
}

 

四、匿名函数

? ? ? ? JavaScript中的函数有一种比较灵活的用法，就是匿名函数，顾名思义，匿名函数就是没有名字的函数，匿名函数的函数体往往定义在实际调用它的地方，比如下面两种写法，实现的效果是相同的。

function helloWorld(){    //有名函数
  console.log('hello world');
}

setTimeout(helloWorld,2000)    //调用有名函数

setTimeout(function (){        //调用匿名函数
  console.log('hello world');
},2000)

? ? ? ? 以上示例中，setTimeout()函数的功能是延迟多少秒执行，它的第一个参数需要传入函数类型的值，第二个参数传入毫秒。该示例在延迟2000毫秒，也就是2秒后，调用第一个参数传入的函数。第一种写法首先定义了一个名为helloWorld的函数，然后传给setTimeout函数，第二种写法直接在setTimeout函数的调用位置定义了一个匿名函数，两者都可以实现同样的效果。

? ? ? ? 在实际开发中，为了便于代码的编写，在很多地方都会用到匿名函数。