【js】超详细js函数基础
个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：python学不会123
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好js
文章目录
- 函数的返回值 —return
- 函数返回值练习
- 什么是箭头函数？
- 箭头函数案例
- 函数调用有哪些
- 1.方法调用
- 2. 动态调用
- 实例
- 函数的参数
- 如何使用arguments？
- 什么是剩余参数？
- 函数的作用域
- 定义作用域
- 函数的私有量
- 什么是闭包函数?
- 总结
函数的返回值 —return
函数：函数是被设计为执行特定任务的代码块
函数的返回值：
- 当调用某个函数，函数就会返回一个结果
- 当函数需要返回数据时，用return关键字
- 语法：
` function fn( ){
return 20;
}`
注意：
1.return 后面的代码不会被执行
2. return能立即结束当前函数，return 不能换行写
3.return 函数没有return，函数默认返回undefined
函数返回值练习
1.求和函数的写法
//求和函数的写法
function getTotalPrice(x, y) {
return x + y;
//return 后面的代码不会被执行
//return 不能换行写
//return 函数没有return，函数默认返回undefined
}
let sum = getTotalPrice(1, 2);
console.log(sum);
2.求任意数组中的最大值并且返回这个最大值
//求任意数组中的最大值并且返回这个最大值
function getArrMax(arr = []) {
//先准备一个max变量存储数组的第一个值
let max = arr[0];
//2.遍历比较
for (let i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
//返回值
return max
}
let max = getArrMax([1, 3, 5, 7, 9]);
console.log(max);
什么是箭头函数？
箭头函数：是一种更简洁的匿名函数写法。
param1表示参数列表
statements表示函数内的语句块
expression表示函数内包含一个表达式
没有参数时，需要用空的小括号表示
0=>{statements}
语法：
function (param1,param2,paramN){//param1表示参数列表
return expressions;
}
- 更简短的函数并且不绑定
this。 - 箭头函数不绑定
Arguments对象
箭头函数案例
//使用箭头函数定义一个求平方的函数
var fn=function(x){
return x*x;
}
函数调用有哪些
1.方法调用
点语法调用对象obj方法:increment()
var obj={
value :0,
increment:function(inc){
this.value+=typeof inc === 'number' ? inc:1;
}
}
obj.increment();
console.log(obj.value);//1
obj.increment(2);
console.log(obj.value)//3
2. 动态调用
- call()方法
语法：function.call(thisobj,args...)
function:表示调用该函数
thisobj:表示绑定对象
args:表示将传递给被函数的参数
call：只能接收多个参数列表 - apply()
语法：function.apply(thisobj,[args])
apply:只能接收一个数组或者伪类数组，数组元素将作为参数列表传递给被调用的函数
实例
//动态调用Math的max()方法计算数组的最大值元素
var a = [23,54,98,55,33] //声明并初始化数组
var m = Math.max.apply(Object,a)//调用系统函数max
console.log(m);//98
函数的参数
- 形参：声明函数时写在函数名右边小括号里
- 实参：调用函数写在函数名右边小括号里的
实例：
function f(a,b){//设置形参a和b
return a+b;
}
var x=1,y=2;//声明并初始化变量
console.log(f(x,y));//返回3，调用函数并传递实参
如何使用arguments？
定义：
⏺️ 在函数内部天生自带变量
⏺️ 表示所有实参的集合
arguments的属性
⏺️length：表示长度，arguments 里面有多少个数据
其实就是你的函数调用多少个实参
它是一个读写的属性
读取的时候就是读取arguments的长度
设置的时候是设置arguments的长度
🍐
`//使用for循环遍历arguments
function fn(){//m定义没有形参的函数
for(var i=0;i<arguments.length;i++){//遍历arguments对象
console.log(arguments[i])//显示制定下标的实参的值
}
}
fn(4,5,7,9)//显示每个传递的实参
注意：
arguments对象 是一个伪类数组，不能够继承Array的原型方法，可以使用数组下标的形参访问，如arguments[0] 表示第一个实参，下标值从0开始，直到arguments.length-1,length是arguments对象的属性，表示函数包含的实参个数，arguments对象可以允许更新其包含的实参值
什么是剩余参数？
剩余参数：如果一个函数最后一个形参以…为前缀，则他表示剩余参数，将传递的所有剩余的实参组成一个数组，传递给形参args
语法：
` function (a,b,...,args){
//函数体
}`
剩余参数与arguments对象之间的区别：
✨ 剩余参数只包含没有对应形参的实参，而arguments对象包含所有实参
✨arguments对象是一个伪类数组，而剩余参数是真正的数组类型
✨ arguments对象有自己的属性，如callee
🍐：使用剩余参数设计一个求和函数
var fn = (x, y, ...rest) => {
var i, sum = x + y;
for (var i = 0; i < rest.length; i++) {
sum += rest[i]
}
return sum;
}
函数的作用域
⏺️全局作用域
⏺️局部作用域
🍐:
var var1=1;//全局变量
function add(){
var var2=2; //局部变量
document.write("add函数内，全局变量var1="+var1+"<br>");//add函数内，全局变量var1=1
document.write("add函数内，全局变量var2="+var2+"<br>");//add函数内，全局变量var2=2
}
add();
document.write("add函数外，局部变量var1="+var1);//add函数外，局部变量var1=1
document.write("add函数外，局部变量var2="+var2);//add函数外，局部变量var2=2
定义作用域
作用域表示变量的作用范围，可见区域
⏺️词法作用域：根据代码结构关系确定作用域，可确定每个变量的可见范围和有效区域
⏺️执行作用域：当代码被执行时，才能够确定变量的作用范围和可见性，它是动态作用域
函数的私有量
- 函数参数
- arguments
- 局部变量
- 内部函数
- this
注意：this> 局部变量>形参>arguments> 函数名
函数作用域是静态的，函数的调用是动态的
什么是闭包函数?
闭包函数：他是一个持续存在的函数上下文运行环境，典型的闭包体是一个嵌套结构函数。内部函数应用外部函数的私有变量，同时内部函数又被外界引用，当外部函数被调用后，就形成闭包，这个函数就被称为闭包函数
🍐典型的闭包结构如下8
function f(x){//外部函数
return function(y){//内部函数，通过返回内部函数，实现外部引用
return x+y;//访问外部函数的参数
}
}
var c=f(5)//调用外部函数，获取应用内部函数
console.log(c(6))//11 调用内部函数，跟外层函数的参数继续存在
总结
✨函数是JS编程中相当重要的一部分，它可以让我们封装代码并重复使用。当定义一个函数时，我们需要指定它的名字、参数和函数体；当调用一个函数时，我们需要传递参数并获取其返回值。希望通过这篇博客让你对JS函数有更好的了解。😄😊