19-函数的扩展

一、函数参数的默认值（以前做法）

{
    function fn(obj) {  //不传值 默认值undefined,报错
        var obj = obj || {};  //之前解决不传值 设置默认值的方法
        return obj.userName = "zhangsan"
    }
    // let result = fn({});  //传空对象，zhangsan
    let result = fn()  //不传值  
    console.log(result) 
}

ES6做法：

{
    function fn(obj={}) {  //不传值 设置默认值
        return obj.userName = "lisi"
    }
    let result = fn()  //不传值  
    console.log(result)  //lisi
}

二、作用域

如果函数内有优先访问函数内的，没有访问函数体外的

{
    let x = 456;
    function fn(){
        let x = 123;   //如果这里没有let，则打印456
        console.log(x)  //123
    }
    fn()
}

{
    let x = 456;
    function fn(x){
        console.log(x)  //undefined
    }
    fn()
}

{
    let x = 456;
    function fn(x,y = x){
        console.log(x,y)  //hello   hello
    } 
    fn("hello")
}

{
    let x = 456;
    function fn(x,y = x){
        console.log(x,y)  //undefined undefined
    } 
    fn()
}

如果调用时，函数作用域内部的变量x没有生成，结果就会不一样。

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代码中，函数调用时，y的默认值变量x尚未在函数内部生成，所以x指向全局变量。

如果此时，全局变量x不存在，就会报错。

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

三、rest参数

ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

{
    function fn(a,b,...c){
        console.log(a,b,c)   //1 2 [3, 4, 5, 6]
        console.log(c.length)   //4
    }
    fn(1,2,3,4,5,6)
}

注意，rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

四、箭头函数

1. 一个参数的写法：

{
    //箭头函数写法
    let fn = y => y;
    console.log( fn(5) )

    // =>左侧的y指的是参数y
    // =>右侧的y指的是return y

    //等同于：
 
    let fn = function(y){
        return y
    }
    console.log( fn(5) )
}

2. 不需要参数或需要多个参数，就使用一个圆括号代表参数部分

 //不需要参数
var f = () => 5;  
//      ||
var f = function () { return 5 };

//多个参数
var sum = (num1, num2) => num1 + num2; 
//      ||
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { 
    return num1 + num2; 
}

箭头函数注意点：
1.没有arguments对象（存放所有实参，是一个数组）
2.不能new（不能定义构造函数）
3.函数体内的this对象

• 关于arguments对象

//普通函数：
let fn = function(a,b){
    console.log(arguments);     //[1,2,3]
    console.log(a,b);    //1 2
    return 123;
}
console.log( fn(1,2,3) )



//箭头函数：
let fn_1 = () => {
   console.log(arguments);    //arguments is not defined
   return 456;
}
console.log( fn_1(1,2,3) )  

实参于形参不必一一对应，原因是参数在函数内部用一个arguments对象来存放所有参数。

• 关于new

//普通函数：
let fn = function(a,b){
    return 123;
}
console.log( new fn(1,2,3) )   //fn {}


//箭头函数：
let fn_1 = () => {
   return 456;
}
console.log( new fn_1(1,2,3) );   // fn_1 is not a constructor

• 关于this

//普通函数
let obj = {
    userName:"zhangsan",
    run:function(){
      setTimeout(function(){
          console.log(this)   //window
          console.log(this.userName);   //undefined,window上没有userName
      })
   }
}
obj.run()  

//箭头函数
let obj = {
    userName:"zhangsan",
    run:function(){
      setTimeout(()=>{
          console.log(this)   //{userName: "zhangsan", run: ƒ}
          console.log(this.userName)  //zhangsan
      })
   }
}
obj.run()