JavaScript函数的相关知识
㈠函数的简单介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的简单介绍</title> <script> /*函数function * 函数也是一个对象 * 函数中可以封装一些功能（代码）,在需要时可以执行这些功能（代码） * 函数中可以保存一些代码，在需要的时候使用 * */ //我们在实际开发中很少使用构造函数来创建一个函数对象 //创建一个函数 var fun = new Function("console.log('Hello 这是我的第一个函数');"); fun(); /*封装到函数中的代码不会立即执行 * 函数中的代码会在函数调用的时候执行 * 调用函数 语法：函数对象（） * 当调用函数时，函数中封装的代码会按照顺序执行*/ /*使用 函数声明 来创建一个函数 * 语法：function 函数名（[形参1，形参2...形参N]）{ * 语句... * } * */ function fun2(){ console.log("这是我的第二个函数~~~~"); alert("哈哈哈哈哈哈"); document.write("┭┮﹏┭┮"); } fun2(); //调用fun2 /*使用 函数表达式 来创建一个函数 * var 函数名 = function([形参1,形参2...形参N]){ * 语句... * }; * */ var fun3 = function(){ console.log("我是匿名函数中封装的代码"); }; //注意：一定要加上；号，因为这段代码整个是一个赋值语句 fun3(); </script> </head> <body> </body> </html>
㈡函数的参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的参数</title> <script> /* * 定义一个用来求两个数和的函数 * 可以在函数的（）中来指定一个或多个形参（形式参数） * 多个形参之间使用，隔开，声明形参就相当于在函数内部声明了对应的变量 * 但是不赋值 */ function sum(a,b){ console.log(a+b); } /*在调用函数时，可以在（）中指定实参（实际参数） * 实参将会赋值给函数中对应形参*/ sum(123,456); /*调用函数时解析器（浏览器）不会检查实参的类型 * 所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查 * 函数的实参可以是任意的数据类型,也可以是一个对象，也可以是一个函数 * 当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递 */ sum(123,"hello"); //结果返回123hello sum(true,false); //结果返回1 /*调用函数时解析器也不会检查实参的数量 * 多余实参不会被赋值 * 如果实参的数量少于形参的数量，则没有对应实参的形参将会是undefined */ sum(123,456,"hello",true,null); //结果返回579 sum(123); //结果返回NaN </script> </head> <body> </body> </html>
㈢函数的返回值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的返回值</title> <script> /* * 创建一个函数，用来计算三个数的和 * * 可以使用 return 来设置函数的返回值 * 语法： return 值 * * return后的值将会作为函数的执行结果返回 * 可以定义一个变量，来接收该结果 * * 在函数中return后的语句都不会执行 * * 如果return语句后不跟任何值就相当于返回一个undefined * 如果函数中不写return，则也会返回undefined * * return后可以跟任意类型的值 */ function sum(a,b,c){ var d = a + b + c; return d; } /* * 调用函数 * 变量result的值就是函数的执行结果 * 函数返回什么result的值就是什么 */ var result = sum(4,5,6); console.log("result = " +result); //测试alert的返回值 var result = alert("hello"); console.log("result = " +result); //结果："result = undefined" //结论：alert没有返回值 </script> </head> <body> </body> </html>
㈣返回值的类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回值的类型</title> <script> //break与return的区别 function fun(){ alert("函数要执行了~~~~~"); for(var i=0;i<5;i++){ if(i == 2){ //使用break可以退出当前的循环 break; //结果为：0,1 结束循环，接着执行循环后面的语句 //continue用于跳过当次循环 continue; //结果为：0,1,3,4,5 循环结束，执行接下来的代码 //使用return可以结束整个函数 return; //结果为：后面的语句不再执行 } console.log(i); } alert("函数执行完了~~~~~"); } fun(); /*返回值可以是任意的数据类型 * 也可以是一个对象，也可以是一个函数 */ //测试返回值可以是任意的数据类型 function fun2(){ return 10; return "hello"; return true; return null; return undefined; } var a = fun2(); console.log("a = "+a); //测试返回值是一个对象 function fun3(){ var obj = {name:"沙和尚"}; return obj; } var b = fun3(); console.log("b = "+b.name); //结果返回沙和尚 //测试返回值可以为一个函数 function fun4(){ //在函数内部再声明一个函数 function fun4(){ alert("我是fun4"); } fun4(); } fun3(); //结果返回：我是fun4，因为调用fun3等于调用fun4 function fun4(){ //在函数内部再声明一个函数 function fun4(){ alert("我是fun4"); } //将fun4函数对象作为返回值返回 return fun4(); } a = fun3(); console.log(a); a(); fun3()(); //以上三种形式是一样的效果 /*在此说明一个知识点： * * 在调用函数时有以下的知识点：（这里mianji为假设的一个函数名） * * mianji() * - 调用函数 * - 相当于使用的函数的返回值 * * mianji * - 函数对象 * - 相当于直接使用函数对象*/ fun(mianji); //调用函数对象 fun(mianji()); //调用函数，也就是调用函数的返回值 </script> </head> <body> </body> </html>
㈤立即执行函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立即执行函数</title> <script> /* * 立即执行函数 * 函数定义完，立即被调用，这种函数叫做立即执行函数 * 立即执行函数往往只会执行一次 */ //第一种举例如下 (function(){ alert("我是一个匿名函数~~~~"); })(); //第二种举例如下 (function(a,b){ console.log("a = "+a); console.log("b = "+b); })(123,456); //结果返回："a = 123""b = 456" </script> </head> <body> </body> </html>
