JavaScript小白教程4
Posted jiatianyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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不变
以上是关于JavaScript小白教程4的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）