return 的使用

return的使用：

JS函数默认返回的是undefined，如果有返回值的话，需要加return进行返回输出；
return 也可以用来终止函数的执行，直接返回空，即 return;
return 返回的一定是值；

示例：

function calc(num1, num2) {
    if (num1 === undefined || num2 === undefined) {
        return;
    }
    var sum = num1 + num2;
    // return的一定是值
    return sum;
}

console.log(calc(10)); // undefined
console.log(calc(10, 20)); //30

匿名函数的区分

匿名函数中，变量的作用域只在函数内部

函数表达式：把一个匿名函数本身作为值赋值给其他东西，这种函数一般不是手动触发执行，而是靠其他程序驱动触发执行（如：触发某个事件的时候，触发执行）

document.body.onclick = function (){}
setTimeout(function(){},1000); // 设置定时器，1000ms后执行匿名函数

自执行函数: 创建完一个匿名函数，紧接着就把当前函数加小括号执行

(function(n){... //此处，n赋值为100
})(100);

自执行函数

没有函数名，通常定义完成后，就会立即执行。写法如下：

(function(n){…})(10)

~function(n){…}(10)

-function(n){…}(10)

!function(n){…}(10)

+function(n){…}(10)

前面加的() ! + – ~ 只有一个目的，让语法符合而已。自执行函数本身因为没有函数名，所以不进行变量提升。

(function(n){console.log(n)})(10); 
!function(n){console.log(n)}(10);
+function(n){console.log(n)}(10);
-function(n){console.log(n)}(10);
~function(n){console.log(n)}(10);

输出结果均为10

箭头函数

箭头函数是为了简便函数的书写。

规则：

定义变量为函数名；
将function 改为=>
箭头后书写函数体，如果只有一条语句，则不用加{}

注：
如果形参只有一个，则不用加括号()
如果函数体中只有一条语句，则不用加{}

例：

function sum(n, m) {
    return n + m;
}
// 更改成箭头函数
let sum1 = (n, m) => n + m;
console.log(sum1(12, 23));

箭头函数里没有类数组arguments，但是有数组…arg(arg是自定义的数组名，可以为其他的名字)

let sum = (...arg) => {
    console.log(arg);
};
sum(1, 2, 3, 4);

输出：

在这里插入图片描述

函数实参arguments类数组

应用场景：在确定有多少个形参传入或者数据类型不确定时，可以使用arguments 进行传参的获取。
arguments 的定义如下：

例：计算不确定个数、不确定类型的数字之和。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入不定个数数字或字符进行求和运算</title>
</head>

<body>
    <!-- 每个函数都有一个实参类数组arguments：
    1. 不论是否有实参都存在这样一个实参类数组；
    2. 在输入的参数个数、类型不定时，可以使用这个arguments（不用定义形参，因为根本不知道有几个形参） -->
    <script>
        function sum() {
            // console.log(arguments);
            let res = null;
            for (let i = 0; i < arguments.length; i++) {
                // 由于存在非数字字符，故先将其全部转为数字后，再判断是否非数字；
                let item = Number(arguments[i]);
                // 如转换后仍为非数字（AA），则跳出本次继续后面的运算
                if (isNaN(item)) {
                    continue;
                } else {
                    res += item;
                }
            }
            return res;
        }
        console.log(sum());
        console.log(sum(12));
        console.log(sum(12, 23));
        console.log(sum(12, 23, '45'));
        console.log(sum(12, 'AA', '23')); //若不进行数字转换，则为‘12AA23’
    </script>
</body>

</html>

结果分别为：

null
12
35
80
35

函数执行底层机制

函数是对象，故会开辟堆内存存储函数体语句（以字符串形式）；
函数执行是另开辟一个私有内存空间执行；
每次函数执行都会新开辟一个私有栈内存，所以函数执行会开辟大量的自由栈，执行完成后需要做释放内存的操作；
函数体外的变量和函数体内定义的变量名可以相同，二者不关联，因为一个在堆内存中定义，一个在私有栈内存中定义；

例：

function fn(n, m) {
    var res = null;
    res = n + m;
    return res;
}
var AA = fn(10, 20);
console.log(AA);

底层运行机制：

在这里插入图片描述

return 的使用

匿名函数的区分

自执行函数

箭头函数

函数实参arguments类数组

函数执行底层机制

你可能也喜欢