1. 函数提升
函数提升与变量提升比较类似，是指函数在声明之前即可被调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
foo()
function foo() {
console.log('声明之前即被调用...')
}
bar()
var bar = function () {
console.log('函数表达式不存在提升现象...')
}
</script>
|
总结：
- 函数提升能够使函数的声明调用更灵活
- 函数表达式不存在提升的现象
- 函数提升出现在相同作用域当中
2. 函数参数
函数参数的使用细节，能够提升函数应用的灵活度。
2.1 默认值
1
2
3
4
5
6
7
8
9
10
| <script>
function sayHi(name="小明", age=18) {
document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`);
}
sayHi();
sayHi('小红');
sayHi('小刚', 21);
</script>
|
总结：
- 声明函数时为形参赋值即为参数的默认值
- 如果参数未自定义默认值时，参数的默认值为
undefined
- 调用函数时没有传入对应实参时，参数的默认值被当做实参传入
2.2 动态参数
arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
function sum() {
let s = 0
for(let i = 0; i < arguments.length; i++) {
s += arguments[i]
}
console.log(s)
}
sum(5, 10)
sum(1, 2, 4)
</script>
|
总结：
arguments 是一个伪数组arguments 的作用是动态获取函数的实参
2.3剩余参数
1
2
3
4
5
6
7
8
| <script>
function config(baseURL, ...other) {
console.log(baseURL)
console.log(other)
}
config('http://baidu.com', 'get', 'json');
</script>
|
总结：
... 是语法符号，置于最末函数形参之前，用于获取多余的实参- 借助
... 获取的剩余实参，是个真数组
2.4 展开运算符
与剩余参数相比
剩余参数：函数参数使用，得到真数组
展开运算符：数组中使用，数组展开
3. 箭头函数
目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁使用场景:箭头函数更适用于那些本来需要匿名函数的地方
箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <body>
<script>
</script>
</body>
|
总结：
- 箭头函数属于表达式函数，因此不存在函数提升
- 箭头函数只有一个参数时可以省略圆括号
()
- 箭头函数函数体只有一行代码时可以省略花括号
{}，并自动做为返回值被返回
3.1 箭头函数参数
箭头函数中没有 arguments，只能使用 ... 动态获取实参
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<script>
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
const result = getSum(2, 3, 4)
console.log(result)
</script>
|
3.2 箭头函数 this
箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <script>
const obj = {
uname: 'pink老师',
sayHi: function () {
console.log(this)
let i = 10
const count = () => {
console.log(this)
}
count()
}
}
obj.sayHi()
</script>
|
 // 声明函数 function foo() {...)
