带你走进从零认识JavaScript到精髓（八）JavaScript函数的调用

本文链接：https://blog.csdn.net/weixin_48193717/article/details/121220411

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

一、函数的调用

函数的调用：通过函数名称，调用执行函数中的代码

函数名称();

1.1形式、真实、参数

函数：就是一个可以操作的行为
小明，去从外面把门关上！：关门
1. 这样的函数，在执行的过程中，不需要给函数提供资源、函数执行完成也不需要汇报结果

  function closeDoor() {
            document.write("门关上了，小明走了！<br />");
        }

吃饭的行为，饭[函数执行需要的资源]
这样的函数，在执行的过程中，需要提供资源，才能正常执行。
函数名称后面的圆括号中，可以传递函数执行时需要的数据，这样的数据称为：参数
定义函数的时候，括号中传递的是参数[变量]，这个变量没有具体的数值，只是在名义上需要这样的一个资源
定义在函数括号里面的参数[函数要执行需要这么一个东西，但是没有确定的东西]：形式参数

  function eat(food) {
            document.write("吃饭了，吃的是" + food + "<br />");
        }
        oseDoor();// 没有参数的函数调用
        // 函数调用时，括号中参数的位置，传递的是具体的数据：实际参数
        eat("米饭");//有参数的函数调用：实际操作的过程中【调用函数的时候】，就需要传递一个具体的数据让函数使用
        eat("四喜丸子");
        eat(1234);

   /*
    计算两个数字的加减乘除
    要求：封装函数实现
        函数要执行，需要什么资源：【第一个数字 、 操作符号 、 第二个数字】
     1.是否需要参数？
     2.需要什么样的参数？

     计算函数：
        需要参数：因为要对数据进行运算 【如果没有参数，要运算什么数据不清楚】
        需要神马样的参数：要进行两个数据的加减乘除运算
            第一个参数：数字
            第二个参数：运算符号
            第三个参数：数字
        参数的位置
            函数参数的位置，和调用函数时传递的数据的位置，一一对应
            function calculate(num1, opra, num2)
                     calculate(1,    "+",   2);
            function calculate(num1, num2, opra)
                     calculate(1,    2,    "+");
     */
    /**
     定义一个用于计算连个数字运算结果的函数
     参数 num1 第一个数字
     参数 opra 操作符号
     参数 num2 第二个数字
     */

  function calculate(num1, opra, num2) {
            switch(opra) {
                case "+" :
                    document.write(parseInt(num1) + parseInt(num2));
                    break;
                case "-":
                    document.write(num1 - num2);
                    break;
                case "*":
                    document.write(num1 * num2);
                    break;
                case "/":
                    document.write(num1 / num2);
                    break;
                default:
                    document.write("系统正在升级，暂时不支持你的运算~~~");
            }
        }

        // 调用函数
        calculate(1, "+", 99);
        document.write("<br />");
        calculate(2, "*", 100);
        document.write("<br />");
        calculate(3, "=", 300);

1.2 arguments（只在函数里面有效）

arguments对象包含了函数运行时的所有参数

arguments，计算机中表示参数的意思，在js中就是表示一堆参数组成的数组。

1.3 再说变量——作用域

1.3.1 再说js中的变量声明

使用var关键字声明的变量
不使用var关键字声明的变量

1.3.2 作用域

概念：所谓作用域，其实就是指某个变量有效可用的范围

全局变量
局部变量

全局作用域

var a = 0;

if (true) {
  var b = 1;
}

console.log(b); // 输出1

像这样在全局中定义a变量，为全局变量，在任何地方都能访问到这个a变量。
因为js中没有块级作用域，所以在 if 或是 for 这样逻辑语句中定义的变量都是可以被外界访问到的。

局部作用域

局部作用域也可以称之为函数作用域。

function fn () {
  var c = 2;
}

console.log(c); // 报错，c变量未定义

局部作用域中定义的变量，只供局部作用域调用，外界无法访问。

1.3.4 变量提升(预解析)

函数中声明变量并且赋值，声明部分会提升到函数中的第一行，赋值部分在原来的位置不变

二、函数返回值（作为重点）

return 作用：1.中断代码的运行2.返回函数中的值

     /*
    return关键字
        位置：经常出现在函数中
        作用：返回一个结果
        注意：一旦函数中，执行了return[函数执行完成],return后面的代码，就不会执行了。
    函数：表示一个行为操作
        有些行为，执行完即可。关门的行为
        有些行为，必须汇报执行的结果：帮我拿一下快递。
            函数执行完成之后，必须拿回一个执行的结果
    函数：添加return，return后面可以返回数据
            return后面返回的数据，称为 函数的【返回值】
    完整函数
        function 函数名称(参数列表){
            // 函数中的代码
            return 返回值;
        }
    就会有几种不同的函数区别：
    >>> 不需要参数，不需要返回值的函数
        function 函数名称() {
            // 函数中的代码
        }
    >>> 需要参数，不需要返回值的函数
        function 函数名称(参数){
           // 函数中的代码
        }
    >>> 不需要参数，需要返回值的函数
        function 函数名称() {
            // 函数中的代码
            return 返回值;
        }
    >>> 需要参数，需要返回值的函数
        function 函数名称(参数) {
            // 函数中的代码
            return 返回值;
        }

    >>>> 什么时候定义函数！
        出现重复代码的时候【重复代码封装成函数】
        出现相同功能的代码的时候【功能封装成函数】
    >>>> 什么时候时候函数需要参数！
        函数执行需要资源数据的时候
    >>>> 什么时候，函数需要返回值！
        函数执行的结果，在后面的代码中需要使用！摇骰子返回的结果，需要前进
     */
    function t() {
        document.write("函数执行中....");
        document.write("函数执行中....");
        document.write("函数执行中....");
        document.write("函数执行中....");
        return "hello";// 函数执行完之后，return表示返回的意思，返回了一个字符串
    }

    var x = t();// 执行函数

    document.write(x);

2.1 预解析

预解析过程：
1.把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2.把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3.先提升var，在提升function

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);
var a = 1;

下面给大家举个栗子，理解一下预解析机制

var num = 123;
function fn(){
    console.log(num);
    var num = 123;
}
fn();//调用fn函数
/*
此时控制台打印的是undefined,解释一下
Js解析代码时，把函数的声明还有变量的声明提升到当前作用域的最前面，所以代码就变成：
*/
//var num;
//num = 123;
//function fn(){
//  var num;  //从这里可以看出num只是声明而没有定义赋值
//  console.log(num);  //输出的时候必然是undefined
//  num = 123;
//}

总结

以上就是今天带你走进从零认识带你走进从零认识JavaScript到精髓（八）JavaScript函数的调用
会持续更新中…
原创不易，期待您的点赞关注与转发评论😜😜😜