ES6中箭头函数学习总结

ES6中箭头函数学习总结

一.箭头函数的基本使用

1. 先来看看普通的函数是怎么定义的

   • 单纯定义函数：

     • const aaa=function () {}
       

   • 通过对象字面量定义函数

     • const obj={
         aaa:function () {},
         //或使用下面增强写法
         aaa(){}           
       }
       

2. 再来看看ES6中箭头函数的定义

   • const aaa=()=>{}
     // const aaa=(参数列表) =>{函数体}
     

3. 现在知道了箭头函数和普通函数的差别，接下来分析其参数和返回值与普通函数的差异。

二.箭头函数的参数与返回值

1. 参数问题

   • 传入两个参数的写法：

     • const sum=(num1,num2)=>{
         return num1+num2
       }
       

   • 传入一个参数的写法：

     • const power= (num) =>{
         return num*num
       }
       

     • 照葫芦画瓢，应该使用如上写法，但是有更简略的写法：省略传入参数的小括号（）

     • const power= num =>{  //此处省略小括号
         return num*num
       }
       

2. 返回值问题

   • 函数体中有多行代码时

     • const test= () =>{
         console.log('Hello World');
         console.log('Hello Vuejs');
       }
       

     • 照常输出，并没有什么不同

   • 函数体中只有1行代码时

     • const mul=(num1,num2)=>{
         return num1 + num2
       }
       

     • 按照常理来说这么写，但是也有更加简略的写法

     • const mul = (num1,num2) => num1 * num2   //省略大括号，自动返回
       

三.箭头函数中this的使用

1. 现在再来看看在标签中箭头函数与普通函数this的返回值

   • <script>
     setTimeout(function () {
       console.log(this);     //window
     },1000)
     setTimeout( () => {
       console.log(this);     //window
     },1000)
     console.log(this)        //window
     </script>
     

     • 通过打印我们发现这两个函数返回的this都是window对象
     • 并且它们的this与函数体外的this值相同
     • 暂时先保留这个疑问，接着往下看

2. 看看在对象中箭头函数与普通函数this的返回值

   • <script>
     const obj={
       aaa(){
         setTimeout(function () {
           console.log(this);  //window
         })
         setTimeout( () => {
           console.log(this);  //obj对象
         })
         console.log(this);    //obj对象
       }
     }
     </script>
     

     • 在obj对象中我们定义了一个aaa函数，并且在其中调用了普通函数与箭头函数
     • 通过打印输出我们看到除了普通函数function ()返回的this是window，其余都是obj对象

3. 因此我们得出结论：

   • 箭头函数的this是从当前作用域依次向外逐层寻找this，直到查找到有this的定义为止。

     • 这样我们就可以明白为什么输出的是那样的结果：

     • 举个例子：比如上例中的setTimeout函数

       setTimeout( () => {//---------作用域上界
         console.log(this);  
       })//--------------------------作用域下界
       

     • 其中this在当前函数作用域中没有找到有this的定义，于是逐层往上找：

       const obj={
         aaa(){//---------------------------------第2层作用域上界
           setTimeout(function () {
             console.log(this);  
           })
           setTimeout(() => {//-----第1层作用域上界
             console.log(this);  
           })//---------------------第1层作用域下界
         }//--------------------------------------第2层作用域下界
       }
       

     • 当找到第2层的时候发现此时this有定义，并且为obj对象。

     • 至此完成查找

四.来检验一下是否真的掌握了箭头函数中的this

1. 话不多说，上代码

   const obj1={
     aaa(){
       setTimeout(function () {
         setTimeout(function () {
           console.log(this);     
         })
         setTimeout(() => {
           console.log(this);     
         })
       })
       setTimeout(() => {
         setTimeout(function () {
           console.log(this);     
         })
         setTimeout(() => {
           console.log(this);     
         })
       })
       console.log(this);    //obj1对象
     }
   }
   

2. 话不多说，上答案

   const obj1={
     aaa(){
       setTimeout(function () {
         setTimeout(function () {
           console.log(this);     //window
         })
         setTimeout(() => {
           console.log(this);     //window
         })
       })
       setTimeout(() => {
         setTimeout(function () {
           console.log(this);     //window
         })
         setTimeout(() => {
           console.log(this);     //obj
         })
       })
       console.log(this);    //obj对象
     }
   }
   

至此，关于ES6中this的基础问题已经基本解决了。