ES6-函数的拓展

1、形参默认参数

• 形参默认值 不是赋值，而是惰性传值

function fn1(x){
     var a = x || 10;  //js中的默认赋值
}
function fn2(x = 10){
     var a = x; // es6 中的写法
     console.log(x);
}
fn2(11);

• 在es6中，不能用let或者const声明与形参重复的变量或常量
• 其实不管是在es6还是js中，形参跟变量名都尽量不要重复

 function fn(x){
        var x = 0;
        // let x = 0; // 报错
        console.log(x); // x被改变为0
}
fn(111);

2、箭头函数

• 普通函数

//命名函数
function fn1(a) {
     console.log(a);
}
//字面量形式
var fn2 = function (a) {
     console.log(a);
}

• 箭头函数

   let fn3 = (a, b) => {
        console.log(a, b);
    }

    fn3(11, 22)

    //一个参数,小括号可以省略
    let fn4 = a => {
        console.log(a);
    }
    fn4(333)

    //没有参数,不可以省略括号。
    let fn5 = () => {
        console.log(123);
    }
    fn5();

3、有返回值的函数

• 1、箭头函数中，如果只有一条return语句，则可以省略大括号
  2、如果这个箭头函数，还有一个形参，则小括号也可以省略
• 普通函数

 function aa() {
        return 324;
}

• 箭头函数的返回值写法

let aa1 = () => 324;

• 两个返回值

  function b() {
        return function (a) {
            return a + 1;
        }
    }

• 上面箭头函数写法

let bb = () => a => a + 1;

console.log(bb()(3));

4、一般绑定事件函数的时候，不要使用箭头函数

• 当内部函数使用箭头函数，不会改变外部函数的 this指向

btn.onclick = function () {
        setInterval(function () {
            console.log(this);  //this指向window
        }, 3000)
}



btn.onclick = function () {
        setInterval(() => {
            console.log(this);  //this指向btn
        }, 3000)
}




btn.onclick = function () {
        //普通函数
        // btn1.onclick = function () {
        //     console.log(this);  //指向btn1
        // }

        //箭头函数
        btn1.onclick = () => {
            console.log(this);  //指向btn
        }
}

5、对象

    let obj = {
        say : function(){
            console.log(this);  // 指向obj
        },
        eat : ()=>{
            console.log(this);  //指向window
        }
    }

    obj.say();
    obj.eat();

6、构造函数

• 给对象定义方法时，不要使用箭头函数
• 构造函数在定义的时候，this指向window
• 构造函数在实例化的时候，this指向对象本身

    function Ball(){
        this.say = function(){
            console.log(this);  //指向对象本身
        }
        this.eat = () =>{
            console.log(this);  //指向对象本身
        }
        console.log(this);  //指向对象本身
    }
    //给对象定义方法时，不要使用箭头函数

    //构造函数在定义的时候，this指向window
    //构造函数在实例化的时候，this指向对象本身
    var b1 = new Ball()
    b1.say()
    b1.eat()
    // console.log(b1); 

7、总结

• 普通函数 ：谁调用它，此时的this就指向谁
• 箭头函数 ：被定义时，定义的环境中的this指向谁，此时的this就指向谁