【你也能从零基础学会网站开发】Web建站之javascript入门篇 Function函数详解
🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
函数概述
函数是完成特定任务的可重复调用的代码段,是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();
函数中的this关键字
this关键字引用运行上下文中的当前对象,JavaScript的函数调用通常发生于某一个对象的上下文中。
如果尚未指定当前对象,则调用函数的默认当前对象是this,使用call方法可以改变当前对象为指定的对象 , 关于修改this
指向,我们后面在慢慢细说!
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇