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

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

函数概述

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

函数的功能

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

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

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

函数的定义

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

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

定义语法

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

解释

  1. 可以使用变量、常量或表达式作为函数调用的参数
  2. 函数由关键字function定
  3. 函数名的定义规则与标识符一致,大小写是敏感的
  4. 返回值必须使用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();

函数中的this关键字

this关键字引用运行上下文中的当前对象,JavaScript的函数调用通常发生于某一个对象的上下文中。

如果尚未指定当前对象,则调用函数的默认当前对象是this,使用call方法可以改变当前对象为指定的对象 , 关于修改this指向,我们后面在慢慢细说!

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇