您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

ES6_箭头函数详解

发布时间：2019-10-13 11:15:58编辑：雪饮阅读（）

箭头函数示例:

         let fun=()=>console.log('i am arrows function');

         fun();

单形参简写:

         let fun=(a)=>console.log(a);

         fun(1);

         let fun2=b=>console.log(b);

         fun2(2);

多形参

         let fun2=(a,b)=>console.log(a,b);

         fun2(2,3);

单语句方法体

当方法体仅一条语句可以省略方法体,且自动return该语句

         let fun2=(a,b)=>a+b;

         console.log(fun2(2,3));

this环境

         <button>1</button>

         <button>2</button>

         <script type="text/javascript">

         var fun1=function(){

                   //传统方法this在调用环境

                   console.log(this);

         }

         let fun2=()=>{

                   //箭头函数this在定义环境

                   console.log(this);

         }

         var bt1=document.getElementsByTagName('button')[0];

                   bt1.onclick=fun1;

         var bt2=document.getElementsByTagName('button')[1];

                   bt2.onclick=fun2;

this继承:        

var bt2=document.getElementsByTagName('button')[1];

         let obj={

                   getName:function(){

                            bt2.onclick=()=>{

                                     console.log(this);

                            }

                   }

         }

         obj.getName();

这里this是obj的getName,this会先看其之前是否有定义函数，否则继续向上遍历，上级没有就是window否则就是某个上级的this，那么像下面这种情况其this就是window

         var bt2=document.getElementsByTagName('button')[1];

         let obj={

                   getName:()=>{

                            bt2.onclick=()=>{

                                     console.log(this);

                            }

                   }

         }

         obj.getName();

因为这里用obj字面量定义getName若另外一种方式如：

obj.getName=()=>{

                            bt2.onclick=()=>{

                                     console.log(this);

                            }

则就很容易看出是window了