ES6中的函数

ES5中的函数

（1）通过function关键字定义函数

        function 函数名（[参数]{}）

（2）函数表达式

        let 变量 = function([参数]){}

注：（1）形参和实参的区别

        （2）函数的返回值：return语句来实现

ES6中对函数的扩展

（1）函数形参的默认值

function fun(a,b,c=45){ //形参c的默认值为45，如果在调用函数时，没有给c传递参数值，则使用默认值
    console.log('a=',a);
    console.log('b=',b);
    console.log('c=',c);
}
let a = 10,b=20;
fun(a,b);

 

（2）箭头函数

在定义函数时使用‘=>’符号，在定义回调函数（高阶函数）、函数表达式时使用，可以简化代码

 1、函数没有参数，函数体只有1条语句

let fun = ()=> 'winter';
console.log(fun());

 

当箭头函数的函数体语句只有一条时，需要注意两点

（1）{}可以省略

（2）默认含有return语句 即在没有{}的时，省略了return

2、函数带有1个参数，可以省略'()'

let fun2 = args =>{//args是形参
    console.log(args);
}
fun2(1024);//函数调用，将1024传递给形参args

3、函数带有多个参数

let fun3 = (arg1,arg2) => arg1+arg2
// 等价于
let fun3 = (arg1,arg2) => {return arg1+arg2}

4、函数体只有一条语句，函数返回对象：必须将对象放在()中

let fun4 = ()=>({
    name:'张三',
    age:23
})
console.log(fun4());

 

 5、箭头函数中this绑定

let Stu = {
    id:'黄河',
    obj : {
    id:'S01',
    fun5:function(){
        console.log(this.id);  //this代表的是obj
    },
        fun6:()=>{
        //输出的是undefined，在箭头函数中没有绑定this this指向离它最近的上层对象,this默认绑定的是window对象
        console.log(this.id); 
        }
    }
}

 let obj = {
    id:'S01',
    fun5:function(){
        console.log(this.id);  //this代表的是obj
    },
    fun6:()=>{
        console.log(this.id); //输出的是undefined，在箭头函数中没有绑定this this指向离它最近的上层对象 
    }
}
obj.fun5();

6、箭头函数没有内置的arguments

let pt = ()=>{
    console.log(arguments);//报错
}
pt(12,122,313);

 7、箭头函数绑定给控件注册事件

document.querySelector('button').addEventListener('click',()=>{
    alert('hahahha')
});