【你也能从零基础学会网站开发】Web建站之javascript入门篇 Function函数详解

本文链接：https://blog.csdn.net/windowsxp2018/article/details/136604325

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

函数概述

函数是完成特定任务的可重复调用的代码段，是JavaScript组织代码的单位。

函数的功能

函数的主要功能是将代码组织为可复用的单位，可以完成特定的任务并返回数据

举个栗子
可以这样形象的理解，函数相当于一台磨面机，麦子（数据）从进料口进入机器内（函数体）进行加工，出料口出来的是面粉（返回值）。

机器可以重复用来加工其它粮食，好比代码复用, 函数就是用来干这个的!

函数的定义

JavaScript的函数属于Function对象!
因此可以使用Function对象的构造函数来创建一个函数 !

我们可以使用function关键字以普通的形式来定义一个函数!

定义语法

function  函数名 ([参数]){函数体;
	return 返回值;   //一执行到return 语句，函数立即返回，不再执行后面的语句；
}

解释

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return关键字

函数的普通定义方式

普通定义方式使用关键字function，也是最常用的方式，形式上跟其它编程语言一样。

语法格式

function 函数名( [ 参数1, [ 参数2, [ 参数N ] ] ] ){
	[ 语句组 ];
	[ return [表达式] ];
}

结构解释
function关键字：必选项，定义函数用的关键字。
函数名：必选项，合法的JavaScript标识符。
参数：可选项，合法的JavaScript标识符，外部的数据可以通过参数传送到函数内部。
语句组：可选项，JavaScript程序语句，当为空时函数没有任何动作
return：可选项，遇到此指令函数执行结束并返回，当省略该项时函数将在右花括号处结束。
表达式：可选项，其值作为函数返回值。

函数的变量定义方式

函数变量定义方式是指以定义变量的方式定义函数。
JavaScript中所有函数都属于Function对象，于是可以使用Function对象的构造函数来创建一个函数。

变量定义方式实质上就是创建一个函数对象。

语法结构

var 变量名 = new Function( [ 参数1, [ 参数2, [ 参数N ] ] ], [ 函数体 ] );

函数变量名：必选项，代表函数名。是合法的JavaScript标识符。
参数：可选项，作为函数参数的字符串，必须是合法的JavaScript标识符，当函数没有参数时可以忽略此项。
函数体：可选项，一个字符串。相当于函数体内的程序语句序列，各语句使用分号格开，当忽略此项时函数不执行任何操作。

函数的参数

函数的参数是函数与外界交换数据的接口。外部的数据通过参数传入函数内部进行处理，同时函数内部的数据也可以通过参数传到外界。

函数定义时圆括号里的参数称为形参，调用函时传递的参数称为实参

函数的指针调用方式

回调 ：其机制是通过指针来调用函数。
前面的代码中，函数的调用方式是常见而且普通的，但JavaScript中函数调用的形式比较多，非常灵活。

有一种重要的、在其它语言中也经常使用的调用形式叫做回调

回调函数按调用者的照约定实现函数的功能，由调用者调用

例如

编写一个排序函数，实现数字排序。

排序方法由客户函数实现，函数参数个数为两个，两个参数的关系作为排序后的元素间的关系。

代码如下

// 定义通用排序函数
function SortNumber(obj, func) {
     // 参数验证，如果第一个参数不是数组或第二个参数不是函数则抛出异常
     if (!(obj instanceof Array) || !(func instanceof Function)) {
         var e = new Error();                    // 生成错误信息
         e.number = 100000;                     	// 定义错误号
         e.message = "你传递的参数是一个无效参数!";   // 错误描述
         throw e;                                // 抛出异常
     }
     // 开始排序算法
     for (n in obj) {

         for (m in obj) {
             //使用回调函数排序，规则由开发者设定
             if (func(obj[n], obj[m])) {
                 // 创建临时变量
                 var tmp = obj[n];
                 // 交换数据
                 obj[n] = obj[m];
                 obj[m] = tmp;
             }
         }
     }
     // 返回排序后的数组
     return obj;
 }
 // 回调函数，用户定义的排序规则
 function greatThan(arg1, arg2) {
     // 规则：从大到小
     return arg1 > arg2;
 }

 try {
     // 生成一数组
     var numAry = new Array(5, 8, 6, 32, 1, 45, 7, 25);
     // 输出排序前的数据
     document.write("<li>排序前：" + numAry);
     // 调用排序函数
     SortNumber(numAry, greatThan)
     // 输出排序后的数组
     document.write("<li>排序后：" + numAry);
 } catch (e) {
     // 捕捉异常
     // 异常处理
     document.write(e.number + "：" + e.message);
 }

如图

函数中的arguments对象

arguments对象代表正在执行的函数和调用它的参数 ,

函数对象的length属性说明函数定义时指定的参数个数

语法:函数名称.length

arguments对象的length属性说明调用函数时实际传递的参数个数

arguments对象不能显式创建，函数在运行时并被调用时由JavaScript运行时环境创建并设定各个属性值，其中包括各个参数的值。

通常我们可以使用arguments对象来验证所传递的参数是否符合函数要求!

举个栗子

使用arguments对象验证函数的参数是否合法!

代码如下

// 加法函数
function sum(arg1, arg2) {
    // 调用函数时传递的实参个数
    var realArgCount = arguments.length;
    // 函数定义时的形参个数
    var frmArgCount = sum.length;
    
    // 实际参数个数少于形参个数
    if (realArgCount < frmArgCount) {
        // 定义错误信息，然后抛出
        var e = new Error();
        // 错误编号
        e.number = 100001;
        // 错误消息
        e.message = "实际参数个数不符合要求！";
        // 抛出异常
        throw e;
    }

    return  arg1 + arg2;
}


try {
    // 输出标题
    document.write("<p><h1>arguments对象测试</h1></p>");
    // 输出正确调用的结果
    document.write("正确调用的结果：" + sum(1, 20));

    // 人为引发一个不符合规则的调用方式
    document.write("<br>不符合规则的调用结果：");
    document.write(sum(10));
} catch (e) {
    // 捕捉错误
    // 输出错误信息
    document.write(e.number + "错误号：" + e.message);
}

如图

函数返回类型

返回基本数据

值类型使用的是值传递方式，即传递数据的副本。
一般情况下，函数返回的非对象数据都使用值返回方式，

举个栗子

// 加法函数
function sum(a, b) {
    // 返回两个数之和
    return a + b;
}
var c = sum(1, 2);

返回引用类型

引用类型返回的是数据的地址，而不是数据本身。
引用传递的优点是速度快，但系统会为维护数据而付出额外的开销。

通常返回复合类型数据时, 使用引用传递方式!

举个栗子

function getNameList() {
    //定义函数，以获取名单
    var List = new Array('Lily', 'Petter', 'Jetson');
    // 返回名单引用
    return List;
}

//调用
var nameList = getNameList();
document.write(nameList);

nameList = null; // 删除引用

返回一个函数

返回函数 :函数可以返回一个函数指针。
外部代码可以通过指针调用其引用的函数对象，调用方式和一般函数完全一样。
一般情况下私有函数不能被外界直接调用

因此可以将一个私有函数的地址作为结果返回给外界使用

举个栗子


// 定义加法函数
function getSum() {
   // 定义私有函数
   function sum(a, b) {
       // 返回两个数之和
       return a + b;
   }
   // 返回私有函数的地址
   return sum;
}

// 取得私有函数地址
var sumOfTwo = getSum();
// 求和
var total = sumOfTwo(20, 80);

//打印结果
document.write(total);

代码解释

上述代码中函数getSum将其内部的函数sum的地址当作返回值返回
通过调用getSum获得sum函数的指针, 然后通过指针调用sum函数，求两个值的和。

函数的作用域

公有函数 是指定义在全局作用域中，每一个代码都可以调用的函数。
比如: 大家公有的物品，理论上谁都可以看得到，每个人都可以去使用。

举个栗子


// 函数处于项级作用域，用于求操作数类型
function GetType(obj) {
    // 返回对象的类型
    return typeof (obj);
}

//水果类构造函数
function fruit(name, price) {
    // 调用顶级作用域中的函数GetType
    if (GetType(price) != "number") {
        // 定义错误信息对象
        var e = new Error();
        // 填写错误描述
        e.message = "Price if not a number";
        // 抛出错误对象
        throw e;
    }

    console.log("这是一个:"+name);
}

//调用
var apple = new fruit("apple", 100);

私有函数 ：是指处于局部作用域中的函数。
当函数嵌套定义时，子级函数就是父级函数的私有函数。

外界不能调用私有函数，私有函数只能被拥有该函数的函数代码调用。

举个栗子

// a为最外层函数
function a() {
    // b为第1层函数
    function b() {
        // c为第2层函数
        function c() {
            //输出字符‘C’以示区别
            document.write("<li>C");
        }
        //输出字符‘B’以示区别
        document.write("<li>B");
    }
    document.write("<li>A");

    // a的代码调用a的私有函数b
    b();
    // a的代码偿试调用b的私有函数，将发生一个错误
    c();
}

// 调用a
a();