function函数

最新推荐文章于 2022-04-08 09:17:39 发布

原创最新推荐文章于 2022-04-08 09:17:39 发布 · 6.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了JavaScript中的function函数，包括函数的作用、定义方式（声明、赋值及new方式）及其特点。强调了声明方式可能会导致声明提前的问题，而赋值方式则能保持程序原有执行顺序。同时，讨论了函数作为对象的特性，即函数可以赋值和传递，相同的函数定义实际上是不相等的对象。

1.function函数

(1)什么是函数:程序中专门保存一段可重复使用的的代码程序结构/对象,再起一个名字.

(2)何时:但一段代码可能被反复使用这段代码是,都要先定义再去函数,用时反复调用它

(3)如何:

        a.定义函数:

        function 函数名(形参变量1,形参变量2,....){

             函数体;

             return 返回值

}

1)形参:

i.什么是:专门保存函数调用时所必须的数据

ii.何时:当我们定义函数是发现,函数你有不确定的是,都要定义形参变量.要求调用者在调用时传入的必须数据

2).返回值:

i.什么是返回值:函数执行结果

ii.何时:如果将来用函数的人要获取函数的直接结果,继续做其他操作是,就要给函数定义返回值.

b. 调用函数:var 返回值=函数名(实参数1,实参2...)

1)在内存中找到指定名称的函数,同时将实参值一一对应的赋值给函数的形参变量

2)按照函数的描述,执行规定好的任务

3)将函数的执行结果,返回导函数外部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function add(a,b){
      //计算任意两个数的和
      // console.log(a+b);
      return a+b;
    }
    // 3+5+8+10
    //=8+8+10
    //=16+10
    //=26
                var sum=add(3,5)
                //   ↓
            sum=add(sum,8);
    //       ↓
    sum=add(sum,10);
    console.log(sum);
  </script>
</body>
</html>
运行结果: 
26

2.创建函数3种方式:

(1).声明方式:

a. function 函数名(形参列表){

函数体;

return 返回值;

}

b.问题:会被声明提前

什么是:

i.在函数开始执行前

ii.负责执行程序的js引擎会先扫描2种:

①var声明的变量:var变量名;

②function 声明的函数:function 函数名(形参列表){...}

iii.js引擎会将找到的声明依次提前到当前作用域的顶部,集中创建

iv.特例:赋值会留在原地

2.缺点:会打乱程序正常执行顺序

(2)赋值方式:

a.如何:

         var 函数名=function(形参列表){

                  函数体;

                  return 返回值

}

b.好处:不会被声明提前,保持了程序原有的执行顺序

(3)用 new方式:(几乎不用)

a.如何:

var 函数名=new function(“形参名1”,”形参名2”,”函数体....”)

b.揭示了js中函数的本质

1).js中函数也是一个对象

其实:每一个function,底层都相当于 new Function()

每一个函数都有自己唯一的内存地址值

2).而函数名只是一个普通的变量而已

c.结果:

1).函数也可以像其它数据类型一样赋值和传参

2).即使看着一模一样的两个函数定义,但是做比较时,却是不相等的

(4)声明示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    console.log(a);//undefined
    var a=10;
    console.log(a);//10

    // function fun(){console.log(1)}
    // fun();//2
    // function fun(){console.log(2)}
    // fun();//2

    var fun=function(){
      console.log(1)
    }
    fun();
    var fun=function(){
      console.log(2)
    }
    fun();
  </script>
</body>
</html>
运行结果: 
undefined
10
1
2

示例: 演示函数对象三个特点: