JavaScript——函数的相关概念

红太狼 2023-07-03 10:53 24阅读 0赞

## 1.定义函数的三种方式 ##

*  命名函数  
    function 函数名(参数列表)\{…\}
 *  匿名函数  
    function(参数列表)\{…\}; 注意：不要忘记紧跟分号  
    实际上是定义了一个函数对象即一个Function实例，一般接下来将这个对象赋给另一个变量  
    可读性好、更加方便
 *  Function类匿名函数（用的少）

## 2.递归函数（自己调用自己） ##

递归的方向很重要，一定要向已知的方向递归。即有终止条件，否则是死循环。

## 3.局部变量和局部函数 ##

*  全局变量：不在函数内定义的变量；不使用var定义的变量（即使被函数包着）。可以被所有的脚本访问（全局变量的作用范围对于执行HTML事件处理一样有效）
 *  局部变量：在函数里用var定义的变量。只在函数里有效
 *  局部函数也在函数里定义，且仅在函数里有效

注意：在外部函数里调用局部函数时，局部函数并不会执行。只有当外部函数被调用时，外部函数里调用的内部函数才会被执行。

## 4.当使用JavaScript定义一个函数后，实际会得到下列内容 ##

函数：就像java的方法一样，可以被调用  
对象：定义一个函数时，系统也会创建一个对象。该对象是Function类的实例  
方法：定义一个函数时，该函数通常都会附加给某一个对象，作为该对象的方法  
变量：在定义一个函数的同时，也会得到一个变量，与函数名同名  
类：在定义一个函数的同时，也会得到一个和函数同名的类，该函数是该类的唯一构造器

#### 4.1 ####

如果直接输出函数本身，比如alert(hello);，将会输出函数的源代码  
如果想要直接输出函数的返回值，可以为alert(hello()); 其中hello为函数名

#### 4.2函数调用 ####

*  直接调用函数  
    总是返回函数体内最后一条return语句的返回值，如果没有return语句，则没有返回值
 *  使用new关键字调用函数  
    总是有一个返回值，就是一个Object，这个Object不是函数的返回值，而是函数本身产生的对象

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

#### 4.3定义了一个函数，也就是定义了一个类 ####

下面程序定义了一个Person函数，也就是定义了一个Person类。  
为Person函数定义了一个方法，通过匿名函数来定义。  
使用了this关键字，被this关键字修饰的变量不再是局部变量，而是该函数的实例属性

#### 4.4尽量避免函数名和变量名重名的现象，会产生覆盖~~~ ####

## 5.函数中的变量有三种： ##

*  局部变量：以var声明的变量。只能在函数里访问
 *  实例变量：以this前缀修饰的变量。必须通过对象来访问
 *  类属性：以函数名前缀修饰的变量。必须通过类（也就是函数）来访问

//三种函数中的变量
    var bb=0;
    this.age=age;
    Person.national=national;

同一个类（也就是函数）每创建一个对象，系统就会为该对象的实例属性分配一块内存，即不共享。  
同一个类（也就是函数）只占用一块内存，因此每个类属性将共享一块内存。

js作为一种动态语言，允许随时为对象增加属性和方法，当直接为对象的某个属性赋值时，即可视为为对象增加属性。

## 6.调用函数的三种方式 ##

#### 6.1直接调用函数 ####

以函数附加的对象作为调用者，在函数后的括号内传入参数来调用函数

//调用window对象的alert方法
    window.alert("test");
    //调用p对象的walk方法
    p.walk;

简单易用，但不够灵活

#### 6.2以call()方法调用函数 ####

语法格式为：函数引用.call(调用者，参数1，参数2。。。)

直接调用和call()调用的关系：  
调用者.函数(参数1，参数2。。。) =函数.call(调用者，参数1，参数2。。。)

window.p.info(name，age)=p.info.call(window，name，age)
    //以window对象作为调用者，来调用p对象的info方法

其中fn.call(window,index,array\[index\]); 等价于fn.call(null,index,arrary\[index\]);等价于window.fn(index,array\[index\])  
但是windw.fn(index,array\[index\])会报错

### 6.3以apply()方法调用函数，与call()方法类似 ###

函数引用.apply(调用者,\[参数1，参数2。。。\]) = 函数引用.call(调用者，参数1，参数2。。。)

由于变量arguments在函数内可代表调用该函数时传入的所有参数，即\[参数1，参数2。。。\]  
可以用arguments代替

apply()和call()区别如下：  
通过call()调用函数时，必须在括号中详细列出每一个参数  
通过apply()调用函数时，需要以数组形式一次性传入所以调用参数

## 7.函数的独立性 ##

函数永远独立，永远不会属于其他类、对象。

## 8.函数提升 ##

在同一个<script…/>元素中，JavaScript运行先调用函数，然后再定义函数。这实际上是”函数提升“。

注意：只能再当前所在的<script…/>中。  
在不同的<script…/>中，必须先定义函数，再调用。即后面的<script…/>元素中可以调用前面<script…/>里定义的函数，但是前面的<script…/>不能调用后面的。

函数提升有以下情况：  
命名函数：会全部提升到顶端  
匿名函数：只提升被赋值的变量，函数定义本身不会提升  
局部函数：会被提升到所在函数的顶部

如果匿名函数被赋值的变量没有属于使用var声明，那么该变量是一个全局变量，因此该函数将会变成一个全局函数。

## 9.箭头函数、 ##

语法格式如下：

(参数列表) => { statements}
    相当于
    function(参数列表){ 
        statements
    }

简化1.如果箭头函数的执行体只有一条 return语句，则花括号和return关键字可省  
简化2.如果箭头函数的参数列表只有一个参数，则允许省略参数列表的圆括号

注意：如果函数不需要参数，那么圆括号不可省略。

map()方法是有返回值的，遍历数组中的每一个元素，然会返回成一个新的数组。对原数组不起作用  
forEach()方法无返回值，只是一段逻辑，所以写法略有不同。对原数组是有影响的。

与普通函数不同的是，箭头函数不拥用自己的this关键字；  
并不绑定arguments，不能通过arguments来访问调用箭头函数的参数。箭头函数中的arguments  
总是引用当前上下文的arguments

由于箭头语法的特殊性，容易犯以下错误：  
(1)函数返回对象的错误：var f=()=>\{name:‘yeeku’\}; 正确写法为：var f=()=>(\{name:‘yeeku’\});  
(2)参数列表和箭头之间不可以换行  
(3)当箭头函数和其他运算符在一起时，会导致解析顺序的错误。加上括号就可以了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xzdDk5MTEyMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205233821971.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xzdDk5MTEyMA==,size_16,color_FFFFFF,t_70