JavaScript028.JavaScript函数
- JavaScript函数介绍
函数是由事件驱动的，或者当它被调用时 ， 执行的可重复使用的代码
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函数快速入门</title><script type="text/javascript">//定义一个简单的函数//如果不调用函数 ， 该函数不会执行//在js中如果要执行函数 ， 有两种方式：1.主动调用 2.通过一个事件去触发该函数function hi() {alert("hi~~~");}//hi();主动调用</script></head><body><!--这里表示给按钮button绑定了一个onclick事件 ， 当用户点击了该button，就会触发hi()函数--><button onclick="hi()">点击这里</button></body></html>
文章插图
文章插图
8.1JS函数的定义方式方式一：function关键字来定义函数
基本语法：
function 函数名(形参列表){ 函数体 return 表达式}//调用 函数名(实参列表);例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函数使用方式1</title><script type="text/javascript">//1.定义没有返回值的函数function f1() {alert("f1被调用")}f1();//f1被调用//2.定义有形参的函数//这里的形参不需要指定类型,name的数据类型是由实参决定的function f2(name) {alert("hi" + name);}f2("你好吗？");//hi你好吗？f2(800);//hi800//3.定义有形参和返回值的函数,不需要指定返回的类型，返回类型由返回的数据来决定function f3(n1, n2) {return n1 + n2;}alert("f3(\"hi\",200)="+f3("hi",200));//f3("hi",200)=hi200</script></head><body></body></html>方式二：将函数赋给变量基本语法：
var 函数名=fuction(形参列表){函数体return 表达式}//调用 函数名(实参列表);例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>使用函数的第二种方式</title><script type="text/javascript">//可以理解成f1指向了函数var f1 = function () {alert("老师你好");}console.log(typeof f1);//f1的数据类型是 functionf1();//调用函数-老师你好var f3 = f1;//将f1指向的函数赋给其他变量f3();//老师你好var f2 = function (name) {alert("hi" + name);}f2("小红帽");//hi小红帽var f4 = function (n1, n2) {return n1 + n2;}alert(f4(100, 50));//150</script></head><body></body></html>8.2JS函数注意事项和细节- JS中函数的重载会覆盖掉上一次的定义
- 函数的arguments隐形参数(作用域在fuction函数内)，隐形参数是一个对象数组
- 隐形参数：在function函数中不需要定义 ， 可以直接用来获取所有参数的变量
- 隐形参数特别像java的可变参数一样 public void fun(int ...args)，操作类似数组
- 如果函数有形参，在传入实参的时候，仍然按照顺序匹配，如果实参个数大于形参个数，就将匹配上的数赋给形参，忽略没有匹配上的实参 。但是仍然会把所有的实参都赋给arguments
- 如果形参个数大于实参个数，没有匹配的形参的值就是undefined
例子1：JS中函数的重载会覆盖掉上一次的定义
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函数使用的注意事项</title><script type="text/javascript">//1.1js中函数的重载会覆盖掉上一次的定义function f1() {alert("ok f1")}function f1(name) {alert("hi " + name);}//1.2当调用方法f1()的时候，实际上调用的是f1(name)方法//调用f1(name)时，如果没有传入实参，那么这个形参name就是undefinedf1();//hi undefined</script></head><body></body></html>例子2：隐形参数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函数使用的注意事项</title><script type="text/javascript">function f2() {//隐形参数是一个对象数组//遍历函数的arguments隐形参数//arguments是一个数组//注意：如果希望通过console.log输出对象的数据 ， 使用逗号,来连接，而不是加号+console.log("arguments=", arguments);//arguments=Arguments { 0: 10, 1: 20, 2: "50", 3: "nihao", … }console.log("arguments长度=", arguments.length);//arguments长度= 4}f2(10, 20, "50", "nihao");//如果函数有形参，在传入实参的时候，仍然按照顺序匹配//如果实参个数>形参个数，就就将匹配上的数赋给形参，忽略没有匹配上的实参//但是仍然会把所有的实参都赋给argumentsfunction f3(n) {console.log("n=", n)//n= 100console.log("arguments=", arguments)//arguments=Arguments { 0: 100, 1: 300, 2: 788, … }}f3(100, 300, 788);//如果形参个数大于实参个数，没有匹配的形参的值就是undefinedfunction f4(a, b, c, d) {console.log("d=", d);//d= undefined}f4(100, 200, 300);</script></head><body></body></html>
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
