学习目标：
- 掌握函数进阶
学习内容：
- 函数提升
- 函数参数
- 箭头函数
函数提升：
函数提升与变量提升比较类似，是指函数在声明之前即可被调用。
<script>
var fun
// 1. 会把所有函数声明提升到当前作用域的最前面
// 2. 只提升函数声明，不提升函数调用
// fn()
// function fn() {
// console.log('函数提升')
// }
// fun()
// var fun = function () { //只提升了赋值，没有提升变量 报错
// console.log('函数表达式')
// }
// 函数表达式 必须先声明和赋值， 后调用 否则 报错
</script>
总结：
- 函数提升能够使函数的声明调用更灵活。
- 函数表达式不存在提升的现象。
- 函数提升出现在相同作用域当中。
函数参数：
- 动态参数：
arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
<script>
function getSum() {
// arguments 动态参数 只存在于 函数里面
// 是伪数组 里面存储的是传递过来的实参
// console.log(arguments) [2,3,4]
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
console.log(sum)
}
getSum(2, 3, 4)
getSum(1, 2, 3, 4, 2, 2, 3, 4)
</script>
总结：
arguments是一个伪数组，只存在于函数中。arguments的作用是动态获取函数的实参。- 可以通过
for循环依次得到传递过来的实参。
- 小结：
1.当不确定传递多少个实参的时候，我们怎么办？
arguments动态参数。
2.arguments是什么？
伪数组。
它只存在函数中。
- 剩余参数：
剩余参数允许我们将一个不定数量的参数表示为一个数组。
...是语法符号，置于最末函数形参之前，用于获取多余的实参。
借助...获取的剩余实参，是个真数组。
<script>
function getSum(a, b, ...arr) {
console.log(arr) // 使用的时候不需要写 ...
}
getSum(2, 3)
getSum(1, 2, 3, 4, 5)
</script>
开发中，还是提倡多使用剩余参数。
- 小结：
1.剩余参数主要的使用场景是？
用于获取多余的实参。
2.剩余参数和动态参数区别是什么？开发中提倡使用哪一个？
动态参数是伪数组。
剩余参数是真数组。
开发中使用剩余参数想必也是极好的。
- 展开运算符：
展开运算符...，将一个数组进行展开。
<script>
const arr1 = [1, 2, 3]
// 展开运算符 可以展开数组
// console.log(...arr)
// console.log(Math.max(1, 2, 3))
// ...arr1 === 1,2,3
// 1 求数组最大值
console.log(Math.max(...arr1)) // 3
console.log(Math.min(...arr1)) // 1
// 2. 合并数组
const arr2 = [3, 4, 5]
const arr = [...arr1, ...arr2]
console.log(arr)
</script>
说明：不会修改原数组。
| 剩余参数 | 函数参数使用，得到真数组 |
|---|---|
| 展开运算符 | 数组中使用，数组展开 |
- 小结：
1.展开运算符主要的作用是？
可以把数组展开，可以利用求数组最大值以及合并数组等操作。
2.展开运算符和剩余参数有什么区别？
展开运算符主要是数组展开。
剩余参数在函数内部使用。
箭头函数：
目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁。
使用场景：箭头函数更适用于那些本来需要匿名函数的地方。
- 基本语法：
语法1：基本写法。
//普通函数
const fn = function () {
console.log(123)
}
fn()
// 1. 箭头函数 基本语法
const fn = () => {
console.log(123)
}
fn()
语法2：只有一个参数可以省略小括号。
const fn = (x) => {
console.log(x)
}
fn(1)
// 2. 只有一个形参的时候，可以省略小括号
const fn = x => {
console.log(x)
}
fn(1)
// 3.只有一行代码的时候，我们可以省略大括号
const fn = x => console.log(x)
fn(1)
语法3：如果函数体只有一行代码，可以写到一行上，并且无需写return直接返回值。
//普通函数
const fn = function (x) {
return x + x
}
console.log(fn(1)) //2
// 4. 只有一行代码的时候，可以省略return
const fn = x => x + x
console.log(fn(1)) //2
语法4：加括号的函数体返回对象字面量表达式。
// 5. 箭头函数可以直接返回一个对象
const fn = (uname) => ({ uname: uname })
console.log(fn('刘德华'))
总结：
<script>
//普通函数
// const fn = function () {
// console.log(123)
// }
// fn()
// 1. 箭头函数 基本语法
// const fn = () => {
// console.log(123)
// }
// fn()
// const fn = (x) => {
// console.log(x)
// }
// fn(1)
// 2. 只有一个形参的时候，可以省略小括号
// const fn = x => {
// console.log(x)
// }
// fn(1)
// 3. 只有一行代码的时候，我们可以省略大括号
// const fn = x => console.log(x)
// fn(1)
// 4. 只有一行代码的时候，可以省略return
// const fn = x => x + x
// console.log(fn(1))
// 5. 箭头函数可以直接返回一个对象
// const fn = (uname) => ({ uname: uname })
// console.log(fn('刘德华'))
</script>
- 小结：
- 箭头函数属于表达式函数，因此不存在函数提升。
- 箭头函数只有一个参数时可以省略圆括号( )。
- 箭头函数函数体只有一行代码时可以省略花括号{ } ,并自动做为返回值被返回。
- 加括号的函数体返回对象字面量表达式。
- 箭头函数参数：
| 普通函数 | 有arguments动态参数 |
|---|---|
| 箭头函数 | 没有arguments动态参数，但是有剩余参数 ...args |
<script>
// 1. 利用箭头函数来求和
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) // 9
</script>
- 小结：
1.箭头函数里面有arguments动态参数吗？可以使用什么参数？
没有arguments动态参数。
可以使用剩余参数。
- 箭头函数this：
在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值，非常令人讨厌。
箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this。
<script>
// 以前this的指向： 谁调用的这个函数，this 就指向谁
// console.log(this) // window
// // 普通函数
// function fn() {
// console.log(this) // window
// }
// window.fn()
// // 对象方法里面的this
// const obj = {
// name: 'andy',
// sayHi: function () {
// console.log(this) // obj
// }
// }
// obj.sayHi()
// 2. 箭头函数的this 是上一层作用域的this 指向
// const fn = () => {
// console.log(this) // window
// }
// fn()
// 对象方法箭头函数 this
// const obj = {
// uname: '雪碧宝宝',
// sayHi: () => {
// console.log(this) // this 指向谁？ window
// }
// }
// obj.sayHi()
const obj = {
uname: '雪碧宝宝',
sayHi: function () {
console.log(this) // obj
let i = 10
const count = () => {
console.log(this) // obj
}
count()
}
}
obj.sayHi()
</script>
在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数。
- 小结：
1.箭头函数里面有this吗？
箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this。
2.DOM事件回调函数推荐使用箭头函数吗？
不太推荐。特别时需要用到this的时候。
事件回调函数使用箭头函数时，this为全局的window。
