zoukankan      html  css  js  c++  java
  • 箭头函数初学

    ES6中,箭头函数算是一个比较突出的特性,使用这么久了,做个小短的总结如下,有不对还请不吝指出。

    1,与传统函数的区别

         这个从外观来看,比较直观的是少了function,多了=>

     传统函数:

    function test(a,b){
        return a+b;
    }
    

     箭头函数:

    (a,b)=>{
      return a+b;  
    }
    或者
    const test = (a,b)=>{
      return a+b;  
    }

    2,细节处理

       当传入一个参数时,可去掉外面的括号,没有参数时括号不能省掉

    a=>{ return a+b }

     当函数体里面只有一句返回语句时,可省略return 

    (a,b)=>a+b

     当函数体里面只有一句返回语句,但是一个object对象时,要用()把Object对象包起来,箭头函数会把{}看作一个代码块,直接返回会报错

     传统函数:

    function test(a,b){
      return {
       a:a,
       b:b  
     }  
    }

    箭头函数:

    (a,b)=>({a,b})

    3,this属性

     箭头函数没有this,在箭头函数里面的this都是指代父级this,如果父级还是箭头函数,那就继续上一级,直到找到非箭头函数的this,

    也因为没有this,箭头函数不能用作构造函数,不能用来new

    function test(){
        setTimeout(()=>{
          console.log(this.num);
      },1000)
    }
    
    test.call({num:1});//1

    上面这个函数,定时器里面不用箭头函数时,this对象是指代window对象,控制台会打印undefined

    但是用做箭头函数时,this指向test,打印test的num属性

  • 相关阅读:
    C# 局部函数与事件
    PHP curl_multi_strerror函数
    PHP curl_multi_setopt函数
    PHP curl_multi_select函数
    PHP curl_multi_remove_handle函数
    PHP curl_multi_init函数
    用户&权限
    HEOI2019 游记——240秒处的起死回生
    WPF 判断调用方法堆栈
    WPF 判断调用方法堆栈
  • 原文地址:https://www.cnblogs.com/lr-blog/p/9399993.html
Copyright © 2011-2022 走看看