一、函数提升
函数提升与变量提升比较类似，是指函数在声明之前即可被调用。
<script> // 调用函数 foo() // 声明函数 function foo() { console.log('声明之前即被调用...') } // 不存在提升现象 bar() // 错误 var bar = function () { console.log('函数表达式不存在提升现象...') } </script>
总结：
- 函数提升能够使函数的声明调用更灵活
- 函数表达式不存在提升的现象
- 函数提升出现在相同作用域当中
二、函数参数
了解函数参数的使用细节，比如参数默认值、动态参数、剩余参数等等，能够提升函数应用的灵活度。
1.1 默认值
<script> // 设置参数默认值 function sayHi(name="小明", age=18) { document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`); } // 调用函数 sayHi(); sayHi('小红'); sayHi('小刚', 21); </script>
1.2 总结
- 声明函数时为形参赋值即为参数的默认值
- 如果参数未自定义默认值时，参数的默认值为
undefined- 调用函数时没有传入对应实参时，参数的默认值被当做实参传入
2.1 动态参数
如果不确定函数调用时传参的数量，则适合用动态参数 👉 arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
<script> // 求生函数，计算所有参数的和 function sum() { // console.log(arguments) 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>
2.2 总结
arguments是一个伪数组arguments的作用是动态获取函数的实参
3.1 剩余参数
函数调用时将部分传参或者全部传参合并到一个数组中，以...other来表示
<script> function config(baseURL, ...other) { console.log(baseURL) // 得到 'http://baidu.com' console.log(other) // other 得到 ['get', 'json'] } // 调用函数 config('http://baidu.com', 'get', 'json'); </script>
3.3 总结
...是语法符号，置于最末函数形参之前，用于获取多余的实参- 借助
...获取的剩余实参，是个真数组
三、箭头函数
箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
以下示例代码，包含了箭头函数的基本写法、只有一个形参的简化写法，只有一行代码的简化写法、省略return、直接返回对象的特殊写法
<body> <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)) 打印2 // 5. 箭头函数可以直接返回一个对象 // const fn = (uname) => ({ uname: uname }) // console.log(fn('刘德华')) 打印{ uname: '刘德华'} </script> </body>
小结
- 箭头函数属于表达式函数，因此不存在函数提升
- 箭头函数只有一个参数时可以省略圆括号
()- 箭头函数函数体只有一行代码时可以省略花括号
{}，并自动做为返回值被返回
箭头函数参数
箭头函数中没有
arguments，只能使用...动态获取实参
<body> <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>
四、箭头函数 this
1.普通函数的this指向
以前普通函数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,它只会从自己的作用域链的上一层沿用this。
<script> // 箭头函数的this 是上一层作用域的this 指向 // const fn = () => { // console.log(this) // window // } // fn() // 对象方法箭头函数 this // const obj = { // uname: 'pink老师', // sayHi: () => { // console.log(this) // this 指向谁？---> window // } // } // obj.sayHi() const obj = { uname: 'pink老师', sayHi: function () { console.log(this) // obj let i = 10 const count = () => { console.log(this) // obj } count() } } obj.sayHi() </script>
