关于JS箭头函数的表现形式

箭头函数是ES6开始引入的，是JavaScript向更高级语言进化，向其他标准语言靠拢的标志之一。箭头函数的使用，简化了代码量，也引入了新的特性定义。

一、JS箭头函数的表现形式种类

(一)不带函数体箭头函数

1.单一参数形式

let reflect=value=>value;

console.log(reflect("你好")); //输出结果：你好

//实际上相当于

let reflect=function(value){

       return value;

}

2.两个及两个以上参数形式

let sum=(num1,num2)=>num1+num2;

console.log(sum(3,4)); //输出结果：7

//实际上相当于

let sum=function(num1,num2){

       return num1+num2;

}

3.无参数形式

let getname=()=>"Nicholas";

console.log(getname());//输出结果：Nicholas

//实际上相当于

let getname=function(){

       return "Nicholas";

}

(二)带函数体箭头函数

1.返回变量形式

let sum=(num1,num2)=>{

       return num1+num2;

}

console.log(sum(3,4));//输出结果：7

//实际上相当于

let sum=function(num1,num2){

       return num1+num2;

}

2.返回对象形式

let getTempItem=id=>({id:id,name:"Temp"});//如果想让箭头函数向外返回一个对象字面量，需要将该字面量包裹在小括号中，这样是为了将其与函数体区分开来

console.log(getTempItem(3));//输出结果：{id:3,name:"Temp"}

//实际上相当于

let getTempItem=function(id){

       return{

              id:id,

              name:"Temp"

       };

}

(三)立即执行体箭头函数

let person=((name)=>{

       return{

              getName:function(){

                     return name;

              }

       }

})("张小玉");

console.log(person.getName());//输出结果：张小玉

//相当于

let person=function(name){

       return{

              getName:function(){

                     return name;

              }

       };

}("张小玉");

二、JS箭头函数的注意事项

   1.箭头函数没有this、super、arguments和new.target绑定，这些值均由其外围最近一层函数决定。

   2.箭头函数不能通过new关键字调用，由于其无[[Construct]]方法进行对象实例化构造，所以程序会抛出错误。同样的，由于其不能实例化，无构建原型需求，所以箭头函数也不存在prototype这个属性。

   3.在箭头函数体内，要注意this指向，对于非箭头函数，指向的是当前函数体，而箭头函数由于不能实例化，其只能相当于语句，因此this指向，是其上一层函数体。同样的，箭头函数体内的arguments调用，也是指向其上一层函数体。