前端学习之JavaScript（三）函数

柔情只为你懂 2023-05-21 10:15 14阅读 0赞

**函数的三种定义方式**

> 1.定义命名函数  
> 2.定义匿名函数：匿名函数的可读性更好，做常用的方法  
> 3.利用Function类匿名函数：可读性差

局部函数

> 在函数里使用var定义的变量称为**局部变量**，在函数外定义的变量和在函数内不使用var定义的变量则称为**全局变量**，如果局部变量和全局变量的变量名相同，则局部变量会覆盖全局变量。局部变量只能**在函数里访问**，全局变量可以**在所有的函数里访问**。  
> 局部函数也在函数里定义。

JavaScript定义一个函数后，实际上可以得到如下4项。  
➢函数:就像Java的方法一样，这个函数可以被调用。  
➢**对象**:定义一个函数时，系统也会创建一个对象，该对象是Function 类的实例。  
➢**方法**:定义一个函数时，该函数通常都会附加给某个对象、作为该对象的方法。  
➢**变量**:在定义函数的同时，也会得到一个变量  
➢\*\*类:\*\*在定义函数的同时，也得到了一个与函数同名的类。

**调用函数的方式**  
➢直接调用函数:直接调用函数总是返回该函数体内最后一条return语句的返回值:如果该函数体内不包含return语句，则直接调用函数没有任何返回值。  
➢使用new关键字调用函数:通过这种方式调用总有一个返回值，返回值就是一个JavaScript对象。

**函数的实例属性和类属性**  
➢局部变量:在函数中以var声明的变量。  
➢实例属性:在函数中以this 前缀修饰的变量。 ------------Java中的成员变量  
➢类属性:在函数中以函数名前缀修饰的变量。 ------------类的静态变量

**调用函数的三种方式**  
\*\*1.直接调用函数：\*\*是最常见、最普通的方式。这种方式直接以函数附加的对象作为调用者，在函数后括号内传入参数来调用函数。这种方式是前面最常见的调用方式，但不够灵活。

\*\*2.以call()方法调用函数：\*\*有时调用函数时需要动态地传入一个函数引用为了动态地调用函数，就需要使用call方法来调用函数

![在这里插入图片描述][20200420223817538.png]  
**3.以apply()方法调用函数**：apply()方法与call()方法的功能基本相似，都可以动态地调用函数。区别如下:  
➢通过call)调用函数时，必须在括号中详细地列出每个参数。**逐个传入参数**  
➢通过apply()动态地调用函数时，需要**以数组形式一次性传入**所有调用参数。

**函数具有独立性**：虽然函数可能定义在某个类中，但是并不属于该类，是一个独立的个体，任何别的类的对象同样也可以调用它

虽然info定义在person类中，但通过Window对象仍能调用它，输出了Window对象的name  
![在这里插入图片描述][20200420224418873.png]  
\*\*函数和变量同名的覆盖问题：\*\*变量有初值，变量优先级更高；反之寒暑表优先级更高  
JavaScript 应尽量避免变量名和函数名同名，否则会发生互相覆盖。可分为两种情况。  
➢定义变量时只使用var定义变量，不分配初始值，此时函数的优先级更高，函数会覆  
盖变量。  
➢定义变量时为变量指定了初始值，此时变量的优先级更高，变量会覆盖函数。

\*\*箭头函数：\*\*箭头函数相当于其他语言的Lambda表达式或闭包语法，箭头函数是普通函数的简化写法。  
如果箭头函数的执行体只有一条return语句,则允许省略函数执行体的花括号和returm关  
键字。  
如果箭头函数的形参列表只有一个参数，则允许省略形参列表的圆括号。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70]

[20200420223817538.png]: /images/20230521/fdf1bf46000d418188e03f8e79fdca01.png
[20200420224418873.png]: /images/20230521/41c1059ff9bb40319f73fcb7b5500d9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70]: /images/20230521/5d7b7e26313c4085b696d2298e95bab0.png