javascript函数（声明、命名、调用、实参、形参、返回值）

最新推荐文章于 2023-12-22 15:10:29 发布

AIU哎呀

最新推荐文章于 2023-12-22 15:10:29 发布

阅读量1.4k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/AI_U20/article/details/84637189

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

javascript函数

一、概念

函数：就是封装起来的可以重复被调用的代码块。
【在js中，函数是头等对象，因为它们可像任何其他对象一样具有属性、方法。区别在于函数可被调用function对象】

二、使用函数的优势

程序更加简洁；
后期维护更加方便；
逻辑更加清晰。

三、函数的声明（定义）

（一）命名规则：

函数的命名规则和变量名是一样的（同“javascript变量的声明、赋值、命名”中提到命名规则一样）
注：函数名也不能和变量名重复，否则发生覆盖现象。
e.g.

	 var a = function a() {
	 	console.log(111);     //111
	 };
	 a();
	 a = 1;
	 console.log(a);    //1

（二）声明方式

1. 使用function关键字声明

语法结构：

function 函数名 (参数[可有可无]) {
	//函数主体
}

e.g.

a(); //在同一代码块中，可提前调用函数
function a(){
	alert(1);
}
a();//调用函数
a();//可多次调用同一函数

2. 匿名函数（以下介绍3种方式）

（1）直接声明一个变量，将一个函数赋值给他
语法结构：

var 变量 = function (){}

e.g.

foo();  //不被优先解析，在此foo是一个变量
var foo = function (){
	console.log(1);  //1
}
foo();

（2）在计时器中声明
语法结构： setInterval(function (){},1000);
e.g.

	setInterval(function () {
	  console.log(1)
	},1000)
	setTimeout(function () {
        console.log(1)
    },5000)

（3）在一个事件后面声明
语法结构：div.onclick = function (){};
e.g.

<body>
	<div>点我</div>
	<script>
	    var box = document.querySelector("div");
	    box.onclick = function () {
	        console.log("点就对了");
	    }
	</script>
</body>

（三）函数的调用

1. 函数名(); 变量名();

【函数调用形式】一般在声明函数后直接调用
e.g.

	function func() {
	   console.log("hello");
	};
	func(); //声明一个函数并调用
	var foo = function () {
	    console.log("hi");
	};
	foo();  //声明一个匿名函数赋值给一个变量，然后调用

2. 在事件后调用

e.g.同上

<body>
	<div>点我</div>
	<script>
	    var box = document.querySelector("div");
	    box.onclick = function () {
	        console.log("点就对了");
	    }
	</script>
</body>

3. 自调用（自己调用自己）

e.g.

	 // fn();   //Uncaught ReferenceError: fn is not defined
	 (function fn(){
	     console.log("自调用");
	 })();
	 //fn();    //Uncaught ReferenceError: fn is not defined

注：在自调用前后调用此函数均报错！

（四）函数的参数

1. 概念

在调用函数时，可以向其传递值，这些值被称之为参数。

2. 特点：

让函数的调用更加灵活

e.g.

function pyramid(rows) {
for (var i=1;i<=rows;i++){
	for (var j=0;j<=rows-i;j++){
		document.write("&nbsp;");
	}
	for (var n=1;n<=i;n++){
		document.write("*&nbsp;");
	}
	document.write("<br>");
	}
}
pyramid(5);
pyramid(2);
pyramid(3);

效果图：
在这里插入图片描述

3. 分类（实参/形参）

实参：在调用函数时传递的真正的值
形参：在声明函数时定义的变量
语法结构：

function 函数名foo(参数--形参){       //封装函数时，括号内的参数为形参
	//函数主体
} 
函数名foo(参数--实参);  //调用函数时，括号内的参数为实参

e.g.

<script>
    function myFunction(name,job) {
        console.log("welcome" + name + ",the" + " " + job);//welcomeBill Gates,the CEO
    }
    myFunction("Bill Gates",'CEO');
</script>

4. 参数的个数

可以是多个，写多个参数时，用逗号“,”隔开。
注：形参、实参必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

5. 参数的默认值（undefined）

函数参数的默认值是undefined。若在调用函数时，参数的值没被提供，那么它的值就为undefined。
函数默认参数：允许在没有实参值或者undefined被传入时使用默认形参。
注：

当实参的个数少于形参的个数时，未被传递值得形参被赋值为undefined
当实参的个数多于形参的个数时，不会报错，但多出个数的实参不解析
e.g.

//实参 < 形参
function fun1(a,b,c) {
    console.log(a); //1
    console.log(c); //undefined
}
fun1(1,2);
//实参 > 形参【不报错，多出个数不被解析】
function fun2(a,b) {
    console.log(a); //1
    console.log(b); //2
}
fun2(1,2,3,4,5,6);

6. 参数的数据类型

可以是任意数据类型【可查看“javascript数据类型”一篇】
数据类型：数值（number）；字符串（string）；布尔值（Boolean）；未定义（undefined）；空值（null）；Symbol（ES6新增）；对象（object）
e.g.

function table (rows,sols,color){
   if(rows==undefined){
        rows = 10;
    }
    if(sols==undefined){
        sols = 10;
    }
    if(color==undefined){
        color = "#ccc";
    }

    //以上三个if语句可简写为：

    rows = rows || 10;
    sols = sols || 10;
    color = color || "#ccc";
    document.write("<table border='1' align='center'>");
    for(var i=1;i<=rows;i++){
        if(i%2==0){
            document.write(`<tr bgcolor=${color}>`);
        }else {
            document.write("<tr>");
        }
        for(var j=0;j<sols;j++){
            document.write(`<td>第${i}行 第${j+1}列</td>`);
        }
        document.write("</tr>");
    }
    document.write("</table>");
}
table(5,6,'blue');
table(5,6);

效果图：
在这里插入图片描述

7. 每每声明一个函数，函数内部都会自动生成一个arguments对象

arguments对象会保存所有传递的实参；
arguments伪变量的length属性是某次调用的实参的个数；
函数对象的length属性是形参的个数
e.g.

function fun(a,b) {
	console.log(arguments);  //Arguments(3)对象[保存所有传递的实参]
	console.log(fun.length);  //2[函数对象的length属性是形参的个数]
	for(var i = 0;i<arguments.length;i++){  //arguments伪变量的length属性是某次调用的实参的个数
		console.log(arguments[i]);  //1 2 3
	}
}
fun(1,2,3);

（五）函数的返回值

1. 概念

是定义在函数内部的语法结构，返回的至就是函数调用表达式的结果。

2. return语法

return 返回值，即 return value。

function myFun() {
	var x = 1;
	return x;  //返回值 1
}

注： return语句仅仅使函数停止执行，JS继续执行代码（从函数调用的地方）。函数调用将被返回值取代。

3. return的使用

（1）赋值给变量

function myFun() {
	var x = 1;
	return x;  //返回值 1
}
var myVar = myFun();
console.log(myVar); //1

（2）即使不保存为变量，同样可以使用返回值

function myFun() {
	var x = 1;
	return x;  //返回值 1
}
var box = document.querySelector("#demo").innerHTML = myFun();
 //获取到一个id为demo的元素，使其innerHTML为1，也就是myFun()所返回的值。

（3）返回值基于传递到函数中的参数返回。

function fun(a,b) {
  return a * b;
}
var num = fun(2,3);
console.log(num); //6

（4）使用return，仅希望退出函数。

function out(m,n) {
	if(m>n){
		return;
	}
	console.log(m * n);
}
out(2,3); //6
out(5,3); //无输出

4. 特征

返回值只能有一个（多写无意义）；
return语句后的代码会被自动忽略掉，起到终止函数的执行并返回函数的值。
return语句可有可无，可以返回任意我们所需要的值。

AIU哎呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript函数（声明、命名、调用、实参、形参、返回值）

javascript函数一、概念函数：就是封装起来的可以重复被调用的代码块。【在js中，函数是头等对象，因为它们可像任何其他对象一样具有属性、方法。区别在于函数可被调用function对象】二、使用函数的优势程序更加简洁；后期维护更加方便；逻辑更加清晰。三、函数的声明（定义）（一）命名规则：函数的命名规则和变量名是一样的（同“javascript变量的声明、赋值、命名”中提...
复制链接

扫一扫