JavaScript小白教程4
JavaScript 函数定义
JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义，也可以是一个表达式。
函数表达式
<body> <p>函数存储在变量后，变量可作为函数使用：</p> <p id="demo"></p> <p id="demo1"></p> <script> var x = function (a, b) {return a * b}; document.getElementById("demo").innerHTML = x; document.getElementById("demo1").innerHTML = x(4, 3); </script> </body>
输出结果：
函数存储在变量后，变量可作为函数使用：
function (a, b) {return a * b}
12
Function() 构造函数
<body> <p id="demo"></p> <script> var myFunction = function (a, b) {return a * b} document.getElementById("demo").innerHTML = myFunction(4, 3); </script> <p id="demo1"></p> <script> var myFunction = new Function("a", "b", "return a * b"); document.getElementById("demo1").innerHTML = myFunction(4, 3); </script> </body>
输出结果：
12
12
自调用函数
<body> <p>函数可以自动调用：</p> <p id="demo"></p> <script> (function () { document.getElementById("demo").innerHTML = "Hello! 我是自己调用的"; })(); </script> </body>
输出结果：
函数可以自动调用：
Hello! 我是自己调用的
函数是对象
<body> <p> toString() 将函数作为一个字符串返回：</p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunction.toString(); </script> </br> <p> arguments.length 属性返回函数接收到参数的个数：</p> <p id="demo1"></p> <script> function myFunction(a, b) { return arguments.length; } document.getElementById("demo1").innerHTML = myFunction(4, 3); </script> </body>
输出结果：
toString() 将函数作为一个字符串返回：
function myFunction(a, b) { return a * b; }
arguments.length 属性返回函数接收到参数的个数：
2
箭头函数
ES6 新增了箭头函数。
箭头函数表达式的语法比普通函数表达式更简洁。
<body> <h2>JavaScript 箭头函数</h2> <p>IE11 及更早 IE 版本不支持箭头函数。</p> <p id="demo"></p> <script> const x = (x, y) => { return x * y }; document.getElementById("demo").innerHTML = x(5, 5); </script> </body>
输出结果：
JavaScript 箭头函数
IE11 及更早 IE 版本不支持箭头函数。
25
JavaScript函数传参
<body> <p>查找最大的数。</p> <p id="demo"></p> <script> function findMax() { var i, max = arguments[0]; if(arguments.length < 2) return max; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; } x = findMax(1, 123, 500, 115, 44, 88); document.getElementById("demo").innerHTML = x; </script> </body>
输出结果：
查找最大的数。
500
使用构造函数调用函数
<body> <p>该实例中， myFunction 是函数构造函数:</p> <p id="demo"></p> <script> function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new myFunction("John","Doe") document.getElementById("demo").innerHTML = x.firstName; </script> </body>
输出结果：
该实例中， myFunction 是函数构造函数:
John
传入数组
<body> <p id="demo"></p> <script> var myObject, myArray; function myFunction(a, b) { return a * b; } myArray = [10, 2] myObject = myFunction.apply(myObject, myArray); // 返回 20 document.getElementById("demo").innerHTML = myObject; </script> </body>
输出结果：
20
JavaScript闭包
<body> <p>局部变量计数。</p> <button type="button" onclick="myFunction()">计数!</button> <p id="demo">0</p> <script> var add = (function () { var counter = 0; return function () {return counter += 1;} })(); function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script> </body>
<body> <p>局部变量计数。</p> <button type="button" onclick="myFunction()">计数!</button> <p id="demo">0</p> <script> function add() { var counter = 0; return counter += 1; } function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script> </body>
这两段代码执行的结果不一样，一个可以加一个只能加到1不变
