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}

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>

输出结果：

自调用函数

<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 属性返回函数接收到参数的个数：

箭头函数

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 版本不支持箭头函数。

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>

输出结果：

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不变