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')
});