JavaScript-函数的声明（定义）的三种方式、如何定义匿名函数及匿名函数的调用、函数参数的问题，全局变量与局部变量

朱雀 2022-03-25 07:37 448阅读 0赞

## JS函数概述 ##

函数，是一种封装；就是将一些语句，封装到函数里面；通过调用的形式，执行这些语句；函数可以一次定义，多次调用，这样就可以实现大量代码的重复使用。

#### 函数的声明 ####

JavaScript 有三种声明函数的方法：

##### 通过 function 命令 #####

`function` 是一个关键字，和 var、typeof 一样，都是关键字，后面要加空格，函数名就在空格后定义，函数名字的命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号的组合，不能以数字开头。

后面有一对儿空的小括号，里面是放参数用的，需要参数时在里面添加即可，多个参数要用英文逗号 `,` 隔开。大括号里面，是这个函数的语句。

function functionName([参数1][,参数2][,参数N]){ 
    	函数的功能代码;
    	[return 参数r]
    }

说明：

*  `function` 关键字是必须的，全小写。
 *  `functionName` 函数的名称。函数名的命名规则与变量命名一样。
 *  `()` 是定义函数时接收数据用的参数。是否定义参数根据实际情况而定，多个参数之间用逗号隔开。
 *  `{}` 存放函数实现某种功能的代码块。
 *  `[参数1][,参数2][,参数N]` 可选的参数，根据实际情况来决定是否添加，这里的参数就是**形参**用于接收调用函数时传过来的数据，使用方式与变量相同（添加了形参就相当于定义了变量）
 *  `[return 参数r]` 可选的语句，一般放在函数代码块的最后，可用于立即结束函数的运行(就像break语句，可以立即结束循环)，也可设置向函数调用者返回的值；如果返回值不写，函数返回的结果就是 undefined；使用时将需要返回的内容通过空格追加在 return 后面即可，需要注意的是 return 只能返回单一内容，就是只能返回一个变量或值

###### 形参(形式参数)： ######

*  定义函数时的参数就是"形参"；主要用来接收调用函数者传过来的数据。
 *  形参的名称，与变量的命名规则一样；但形参不能用 “var” 关键字定义。
 *  参数只能存在于函数中。
 *  参数不需要声明，直接使用。

示例：

//定义函数，设置形参（用于接收传入的数据）
    function getSum(x,y) { 
    	var sum = x+y; // 功能代码
    	return sum; // 结束函数，返回结果
    }
    
    var num = getSum(2,3); //调用函数，传入实参，得到返回结果，赋值给 num
    coonsole.log(num); // 5

###### 实参(实际参数)： ######

调用函数时的参数称为"实参"。实参就是真正的数据。

函数的调用：

*  函数定义是不会执行的，那么，函数必须调用，才会有效果。
 *  调用方法就是 直接写函数名后跟小括号()，如果有参数则写参数。
 *  小括号不能省略；如果省略小括号返回的是函数本身。

###### 参数存在的作用 : ######

在一些函数的内部某些值不能固定，就需要在调用函数时通过参数传入不同的值。

一般函数中的形参与调用时的实参个数保持一致，参数会逐个顺次对应匹配；JS 属于弱类型语言，在 JS 中函数的形参与调用时传的形参的数量可以不一致

<table> 
 <thead> 
  <tr> 
   <th>参数个数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>实参个数等于形参个数</td> 
   <td>一 一对应匹配</td> 
  </tr> 
  <tr> 
   <td>实参个数小于形参个数</td> 
   <td>未匹配的形参值为 undefined</td> 
  </tr> 
  <tr> 
   <td>实参个数大于形参个数</td> 
   <td>形参对应匹配后，剩余的实参不再进行匹配</td> 
  </tr> 
 </tbody> 
</table>

形参的个数可以和实参个数不匹配，但是结果不可预计，所以在使用参数时：

*  形参的个数，要与实参的个数一致；
 *  形参的顺序，要与实参的顺序一致；因为传入的数据的数据类型可能不一样。

##### 通过函数表达式（变量赋值） #####

可以通过变量赋值的方式，将一个匿名函数（匿名函数就是没有函数名的函数）赋值给变量。这个匿名函数又称函数表达式。

var fun = function([参数1][,参数2][,参数N]){ 
    	函数的功能代码;
    	[return 参数r]
    };

调用该函数：

fun(); // 与普通函数的调用一样，只需要将函数名改成变量名即可。

示例：

var fun = function(){ 
    	console.log('我是函数'); // 我是函数
    };
    
    fun();

###### 匿名函数： ######

所谓的匿名函数就是没有设置函数名的函数

function(){ 
    	console.log('我是匿名函数');
    }

匿名函数的执行：

用**小括号**将匿名函数括起来，然后在匿名函数后面**加上一个括号**即可立即执行。

如：

(function(){ 
    	console.log('我是匿名函数');
    })()

##### 通过 Function() 构造函数 #####

函数也可以通过Function()构造函数来定义( Function() 构造函数并不常用)。

var www = Function("x","y","var num = x*y;return num;");
    	console.log(www(2,3)); // 6

等价于：

function www(x,y){ 
    	var num = x*y;
    	return num;
    }
    console.log(www(2,3)); // 6

说明：

`Function()` 构造函数可以传入任意数量的字符串参数，最后一个参数所表示的文本是函数体；它可以包含任意的Javascript 语句，每条语句之间用分号分割。传入构造函数的其他所有的参数字符串是指定函数的名字的字符串。如果定义的函数不包含任何参数，只需给构造函数简单地传入 一个字符串函数体即可。

注意：

Function() 构造函数允许JavaScript在运行时动态的创建并编译函数。

每次调用 Function() 构造函数都会解析函数体，并创建新的函数对象。如果是在一个循环或者多次调用的函数中执行这个构造函数，执行效率会降低。相比之下，循环中的嵌套函数和函数定义表达式则不会每次执行时都重新编译。

Function() 构造函数非常重要的一点，它所创建的函数并不使用词法作用域，函数体代码的编译总是会在顶层函数执行。

**扩展**： 函数的定义可以整个代码中的任意位置，在整个代码执行时会优先将定义的函数加载到内存中（就像变量的提升）

// 调用函数
    func();
    
    // 定义函数
    function func() { 
    	console.log('调用了该函数！')
    }

#### 全局变量和局部变量 ####

全局变量：

*  可以在网页的任何地方(函数内部和函数外部)使用的变量，就是"全局变量"。
 *  在函数外部定义的变量，就是"全局变量"。
 *  在函数内部，省略关键字var定义的变量是"全局变量"。
 *  "全局变量"既可以在函数外使用，也可以在函数内部使用。
 *  "全局变量"在网页关闭时，自动消失(释放空间)。

局部变量：

*  只能在函数内部使用的变量，称为"局部变量"。
 *  "局部变量"在函数内部定义，在函数内部使用。
 *  "局部变量"在函数外部无法访问。
 *  "局部变量"在函数执行完毕就消失了，所以局部变量更节省内存空间，函数中的形参就是局部变量。

**注意：** var 关键字尽量别省略，省略后"全局变量"和"局部变量"会搞不清楚；全局变量与局部变量不可同名。