ES6的箭头函数介绍

箭头函数

箭头函数
介绍

基本用法

介绍

作用：定义匿名函数

箭头函数相当于匿名函数，并且简化了函数定义。

基本用法

箭头函数的常见写法

let fn = ()=>{表达式或语句}；
//箭头左边如果不省略的话就是一个小括号，用来写形参的地方；
//箭头的右边就是写表达式或者语句的地方

左边小括号的用法

没有参数: () => console.log(‘xxxx’)

一个参数: i => i+2

大于一个参数: (i,j) => i+j

//箭头左边的括号问题
//没有参数的时候：()是不能省略的
let fn = () => {
console.log(123);
}
fn();
//只有一个参数的时候:()可以省略
let fn1 = a =>{
console.log(a);
}
fn1(3);

//两个或两个以上的参数时,()不能省略
let fn2 = (a,b) =>{
console.log(a,b);
}
fn2(4,5);//4,5

右边函数体的用法

函数体不用大括号: 默认返回结果；

函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回；

//箭头右边的表达式语句
// 当只有一条语句或者是表达式时，{}可以省略不写，省略不写的时候，会自动返回结果
let fn3 = (a,b) => a+b;
console.log(fn3(6,7));//13

//当函数体不止一条语句或者表达式的时候，{}不能省略，手动返回想要的结果
let fn4 =  (a,b) => {return a*b};
console.log(fn4(3,5));//15

箭头函数的this

箭头函数没有自己的this，箭头
4000
函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

扩展理解：

箭头函数的this看外层的是否有函数，

如果有，外层函数的this就是内部箭头函数的this；如果没有，则this是window。

let obj = {
username :'kobe',
getName1: function () {
btn1.onclick = () =>{
console.log(this);//obj
}
},
getName2:  () => {
btn2.onclick = () =>{
console.log(this);
}
}
}
/*等价的理解；
* obj.getName1 = function () {
btn1.onclick = () =>{
console.log(this);//obj
}
}
* obj.getName2 = () => {
btn2.onclick = () =>{
console.log(this);//window
}
}
* */
obj.getName1();
obj.getName2();