JavaScript函数
JavaScript函数定义
JavaScript使用function关键字定义函数，函数可以通过声明定义，也可以是一个表达式；
函数声明：
1 function functionName(parameters){ 2 do something 3 }
例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>javascript函数</title> 6 </head> 7 <body> 8 <p>本例调用的函数会执行一个计算，然后返回结果：</p> 9 <p id="demo"></p> 10 <script> 11 function add(a, b){ 12 return a+b; 13 } 14 document.getElementById("demo").innerHTML=add(2, 3) 15 </script> 16 17 </body> 18 </html>
函数表达式
JavaScript函数可以通过一个表达式定义，函数表达式可以存储在变量中；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>javascript函数</title> 6 </head> 7 <body> 8 <p>本例调用的函数会执行一个计算，然后返回结果：</p> 9 <p id="demo"></p> 10 <script> 11 // function add(a, b){ 12 // return a+b; 13 // } 14 // document.getElementById("demo").innerHTML=add(2, 3) 15 // 表达式存储在变量中 16 var x = function (a, b){return a*b} 17 document.getElementById("demo").innerHTML=x(5, 4) 18 </script> 19 20 </body> 21 </html>
以上表达式其实是一个匿名函数，与其他语言的lambda表达式一样。
Function()构造函数
函数可以通过构造函数Function()定义；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>javascript函数</title> 6 </head> 7 <body> 8 <p>本例调用的函数会执行一个计算，然后返回结果：</p> 9 <p id="demo"></p> 10 <script> 11 // function add(a, b){ 12 // return a+b; 13 // } 14 // document.getElementById("demo").innerHTML=add(2, 3) 15 // 表达式存储在变量中 16 var x = function (a, b){return a*b}; 17 document.getElementById("demo").innerHTML=x(5, 4) 18 // 通过构造函数Function()创建，注意构造函数的格式与function()不一样! 19 var myFunction = new Function("a", "b", "return a * b") 20 document.getElementById("demo").innerHTML=myFunction(5, 6) 21 </script> 22 23 </body> 24 </html>
函数提升（hoisting）
使用表达式的函数无法提升，提升应用在变量和函数的声明
自调用函数
函数可以自调用，自调用表达式会自动调用。如果表达式后面跟()，则会自动调用。
不能自调用声明的函数，通过添加括号，声明她是一个函数表达式。
例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>javascript 函数调用</title> 8 </head> 9 <body> 10 <h1>函数可以自动调用</h1> 11 <p id="demo"></p> 12 <script> 13 (function (){ 14 document.getElementById("demo").innerHTML="我是自己调用自己的。。" 15 })(); 16 </script> 17 </body> 18 </html>
此外，函数可以作为一个值使用，并且可以做一些列算术运算
箭头函数
箭头函数顾名思义就是用箭头表达式的函数，它比普通函数更加简洁。
表达式格式为：
(参数1, 参数2, 参数N…) => {函数声明}
当只有一个参数时，圆括号可以省略：
单一参数 => {函数声明}
(单一函数) => {函数声明}
例：
const x = (x, y) => {return x*y}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>javascript 之箭头函数</title> 8 </head> 9 <body> 10 <h2>JavaScript箭头函数</h2> 11 <h3>箭头函数不需要function、大括号{}</h3> 12 <p id="demo"></p> 13 <script> 14 // 因为函数是一个常量，所以使用const 15 const x = (x, y) =>{return x*y} 16 document.getElementById("demo").innerHTML=x(5, 5) 17 </script> 18 </body> 19 </html>
函数参数
参数类型：
- 显式参数
- 隐式参数
functionName(parameter1, parameter2, parameter3) {
//要执行的代码
}
显式参数在函数定义时列出，隐式参数在函数调用时传递给函数真正的值；
- 默认参数
如果为设置一个隐式参数，es5会默认设置为undefined，但是最好给一个默认参数。
例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>javascript默认参数</title> 8 </head> 9 <body> 10 <h2>设置默认参数</h2> 11 <p id="demo"></p> 12 <script> 13 function myFunction(x, y) { 14 if (y === undefined) { 15 y = 0 16 } 17 return x*y 18 } 19 document.getElementById("demo").innerHTML=myFunction(4) 20 </script> 21 </body> 22 </html>
或者
if (y === undefined) {
y = 0
}
也可以写成：
y = y || 0;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>javascript默认参数</title> 8 </head> 9 <body> 10 <h2>设置默认参数</h2> 11 <p id="demo"></p> 12 <script> 13 function myFunction(x, y) { 14 // if (y === undefined) { 15 // y = 0 16 // } 17 // 如果y定义了，返回y，否则返回0 18 y = y|| 0; 19 return x*y 20 } 21 document.getElementById("demo").innerHTML=myFunction(4) 22 </script> 23 </body> 24 </html>
- 参数默认值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>JavaScript参数默认值</title> 8 </head> 9 <body> 10 <h2>JavaScript参数默认值</h2> 11 <p id="demo"></p> 12 <p id="demo1"></p> 13 <script> 14 function myFunction(x, y=5){ 15 return x+y 16 } 17 document.getElementById("demo1").innerHTML=myFunction(0, 2); 18 document.getElementById("demo").innerHTML=myFunction(5); 19 </script> 20 </body> 21 </html>
arguments对象
内置对象arguments，它包含了函数的调用参数数组。
通过这个方式你可以很方便的找到最大的参数值；
例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>JavaScript之arguments对象</title> 8 </head> 9 <body> 10 <h2>查找最大的数</h2> 11 <p id="demo"></p> 12 <script> 13 function findMax(){ 14 var i, max=arguments[0]; 15 // arguments长度如果<2，返回max 16 if (arguments.length<2) return max 17 // 遍历arguments 18 for (i = 0; i<arguments.length; i++){ 19 if (arguments[i] > max) { 20 max = arguments[i] 21 } 22 } 23 return max 24 } 25 x = findMax(12, 2, 2904, 495, 33, 13, 9) 26 document.getElementById("demo").innerHTML = x 27 </script> 28 </body> 29 </html>
例：通过arguments求和
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>JavaScript之arguments对象求和</title> 8 </head> 9 <body> 10 <h2>arguments对象求和</h2> 11 <p id="demo"></p> 12 <script> 13 function sumAll(){ 14 var i, sum = 0 15 for (i=0; i<arguments.length; i++){ 16 sum += arguments[i]; 17 console.log(arguments[i]) 18 } 19 return sum 20 } 21 x = sumAll(10, 56, 345, 542, 4, 243, 544) 22 console.log(x) 23 document.getElementById("demo").innerHTML="sum is" + x 24 </script> 25 </body> 26 </html>
函数调用
4种调用方式：
- 作为一个函数调用
1 function myFunction (x, y){ 2 3 rerurn x*y 4 5 } 6 7 myFunction(10, 5) 8 //或者window.myFunction(10, 5)
注意第二种方法虽然可行，但不建议。
- 作为一个全局对象调用
1 function myFunction(x, y){ 2 retuen this 3 } 4 myFunction(10, 5)//返回window对象
- 作为一个方法调用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>JavaScript函数调用之作为方法调用</title> 8 </head> 9 <body> 10 <h2>函数调用之方法调用</h2> 11 <p id="demo"></p> 12 <script> 13 var myObject = { 14 firstName:"John", 15 lastName:"Done", 16 fullName:function(){ 17 return this.firstName+' '+this.lastName 18 } 19 } 20 // fullName方法是一个函数，myObject是函数的所有者； 21 document.getElementById("demo").innerHTML=myObject.fullName() 22 </script> 23 </body> 24 </html>
- 使用构造函数调用
如果函数调用前使用了new关键字，则是调用了构造函数。实际上这是创建了新的对象
例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>JavaScript函数调用之构造函数调用</title> 8 </head> 9 <body> 10 <h2>构造函数调用</h2> 11 <p id="demo"></p> 12 <script> 13 function myFunction(arg1, arg2){ 14 this.firstName = arg1 15 this.lastName = arg2 16 } 17 // 创建一个新对象 18 // 构造函数调用后会创建一个新的对象，他继承了该对象的方法和属性 19 x = new myFunction("John", "Done") 20 document.getElementById("demo").innerHTML=x.firstName 21 </script> 22 </body> 23 </html>
- 作为函数方法调用函数，call()和apply()方法
call()和apply()是预定义的函数方法，都可以用于调用函数，且第一个方法都必须为对象本身。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>javascript函数调用之作为函数方法调用</title> 8 </head> 9 <body> 10 <h2>作为函数方法调用</h2> 11 <p id="demo"></p> 12 <script> 13 var myObject 14 function myFunction(a, b){ 15 return a*b 16 } 17 // call()方法参数的第一个参数必须为对象本身，即"myObject" 18 myObject = myFunction.call(myObject, 10, 2) 19 document.getElementById("demo").innerHTML=myObject 20 </script> 21 </body> 22 </html>
apply()方法第一个参数也需要传对象本身，第二个参数与call()不同的就是它必须为一个数组。可以将多个参数作为一个数组传入。这是其中不同之处
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>JavaScript函数调用之构造方法调用</title> 8 </head> 9 <body> 10 <h2>调用方法apply()</h2> 11 <p id="demo"></p> 12 <script> 13 function myFunction(a, b){ 14 return a*b 15 } 16 var myObject 17 myArray = [4,45,7] 18 // apply()方法第一个参数也是对象本身，第二个参数需要传一个数组 19 myObject = myFunction.apply(myObject, myArray) 20 document.getElementById("demo").innerHTML=myObject 21 </script> 22 </body> 23 </html>
版权声明：本文为H年轻的心原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。