js进阶----(作用域+解构+箭头函数)--＞箭头函数

学习目标：知道函数参数默认值，动态参数，剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异

（一）函数提升

1.目标：能说出函数提升过程（函数提升与变量提升比较类似，函数在声明之前即可被调用）

fn()
function fn() {
  console.log('函数提升')
}
//会把所有函数声明提升到当前作用域的最前面
//只提升函数声明，不提升函数调用




fun()
var fun =function() {
console.log('函数表达式')
}
//这是个变量赋值而不是函数声明，所以这种就必须先要进行函数声明赋值再调用
//函数表达式必须先声明和赋值，后调用，否则报错

---

（二）函数参数

1.动态参数：arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

（不确定传递多少个参数的时候）

//求和函数，计算所有参数的和
function sum() {
  //console.log(arguments) 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)//三个参数

2.剩余参数

（1）...是语法符号，置于最末尾函数形参之前，用来获取多余的实参

（2）借助...获取的剩余实参，是个真数组

（3）剩余参数只能存在于函数里边

  function getSum(a,b ...arr) { 
      console.log(arr);
      let s = 0
      for (let i = 0;i <= arr.length;i++)
      s+=arr[i]
    }
    getSum(2,3) //假如写了形参，2给了a,3给了b，那么数组arr就为空。
    getSum(2,3,4) //2给了a，3给了b，数组arr里边就仅仅只有3

3.补充：展开运算符
目标：能够使用展开运算符并说出常用的使用场景

展开运算符（...)将一个数组进行展开

注意：该运算符不会修改原数组

应用：求数组最大/最小值，合并数组等

    const arr1 = [1, 5, 3, 8, 2]
    // console.log(...arr1) //展开运算符可以展开数组1 5 3 8 2 
    console.log(Math.max(1, 2, 3)) //Math.max里边只能是(,)括号且逗号隔开，不能用于数组
    //1 求数组最大小值
    console.log(Math.max(...arr1)); //但是运用展开运算符之后就能将Math用于数组了
    console.log(Math.min(...arr1))

    //控制台打印...arr1看不到逗号，实际上...arr是等价于1，2，3的，所以才对Math有效

      
    // 2 合并数组
    const arr2 = [3,4,5]
    const arr =[...arr1, ...arr2]
    console.log(arr)

    

---

（三）箭头函数

目标:熟悉箭头函数不同写法

目的：引入箭头函数目的是更简短的函数写法并且不绑定this,箭头函数语法比函数表达式更简洁

场景：需要匿名函数的地方

1. 基本语法

    // const fn = function fn(){
    //   console.log(123);
    // }
    //箭头函数(主要是用来替函数表达式)
    const fn = (x) => {  //箭头用来替代function,然后大括号里边是函数体。(括号里是形参)
      console.log(x);  //括号里是形参

    }
    fn(2)  //箭头函数是函数，所以遵循函数调用。(括号里是实参)

2. 箭头函数参数

（1）箭头函数只有一个参数时可以省略圆括号

（2）函数体只有一行代码可以省略大括号

（3）箭头函数属于表达式函数，不存在函数提升

（4）普通函数有arguments动态参数，但是箭头函数没有，只有剩余参数...args

  // const fn = function fn(){
    //   console.log(123);
    // }

    // 1. 箭头函数(主要是用来替函数表达式)
    // const fn = (x) => {
    //   console.log(x);
    // }
    // fn(2)

    //2.箭头函数只有一个形参时，小括号不用写
    // const fn = x => {
    //   console.log(123);
    // }
    // fn(2)

    //3. 只有一行代码，可以省略大括号
    // const fn = x => console.log(x)
    // fn(2)

    //4. 只有一行代码时省略return，这里原本是return x+x
    // const fn = x =>x+x 
    // console.log(fn(1))

    //5. 箭头函数可以直接返回一个对象
    const fn = (uname) => ({uname:uname}) //大括号里边是对象，但是只有一行代码将大括号省略，而对象又是大括号包裹，
    //会分不清，所以在对象外面再加小括号包裹，表示这是个对象而不是函数体的大括号
    //最后得到属性名uname，属性值是马云
    console.log(fn('马云'));

 利用箭头函数的剩余参数进行求和：

    const getSum = (...args) => {
      let sum = 0
      for (let i = 0; i < args.length; i++) {
        sum += args[i]
      }
    }
    const result = getSum(2, 3)
    console.log(result)

3. 箭头函数this

（1）普通函数里的this指向

    //以前this的指向：谁调用这个函数，this就指向谁
    console.log(this); //指向window

    //普通函数
    function fn() {
      console.log(this)  //指向window
    }
    fn() //这就相当于window调用，谁调用这个函数，this就指向谁

 （2）对象里的方法this指向

const obj = {
  naem:'andy',
  sayHi:function () {
    console.log(this)  //下面是obj对象调用了该方法/函数，所以该this指向obj
}
}
obj.sayHi() //方法的调用

(3)箭头函数里的this指向

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this

const fn = () => {
  console.log(this) //这里this指向window，并不是window调用fn，箭头函数作为一个作用域，它里边的this要指向上一个作用域，上一个啥也没有，不就是window了嘛
}
fn() 

const obj = {
  uname:'老王',
  sayHi:() => {
    console.log(this) //指向window
}
}
obj.sayHi()

const obj = {
  uname:'老王'，
  sayHi：function () {
    let i =10
    const count = () => {
      console.log(this) //指向obj
   }
count()
 }
}
obj.sayHi()