js函数详解（【js】超详细js函数基础）

个人名片： 😊作者简介：一名大一在校生              ，web前端开发专业 🤡

个人主页：python学不会123

🐼

座右铭：懒惰受到的惩罚不仅仅是自己的失败 
 
  
 
  
 
  
 
  
 
  
 
  
 
，还有别人的成功              。

🎅**学习目标: 坚持每一次的学习打卡












，学好js

函数的返回值 —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函数有更好的了解
 
 
 
 
 
 
 。😄😊