zoukankan      html  css  js  c++  java
  • 浅浅的分析下es6箭头函数

    原文链接:http://damobing.com/?p=589

    前言

    箭头函数作为es6重点的语法内容之一,很多开发者对其爱不释手,当也要注意其可能存在的问题,其正确的使用场景,否则会引起不必要的bug。

    语法

    //场景1 没有参数,空的小括号,返回值不用加 return,也就是说支持单一表达式,如果加return 需要构成语句
    var demo=()=>5675;
    
    //场景2 :只有一个参数 ,小括号省略
    var demo=num1=>5675;
    
    //场景3:有多个参数
    var demo=(num1num2)=>5675;
    
    //场景 4 :有多个参数 ,并且需要语句块
    var demo=(num1,num2)=>{
        if(num1<num2){
        return num1
        }else{
        return 2
        }
    }
    
    //场景5 :需要返回的为对象时需要两队花括号来区分对象以及本身的语句块
    var demo=()={{
     name:1,
     version:2
    }}

    特点

    无this

    箭头函数不会创建自己的this;它使用封闭执行上下文的this值。

    适用场景

    以下逻辑参考《你不知道的js》,请根据自己的需要进行选择是否使用箭头函数。

    使用js箭头函数决策图

    简单的理解上面的逻辑图大概就是这样的几个前提:
    1 确定参数是固定的,没有默认值,没有rest参数收集器,如果有的话 ,也可以用一对小括号来归纳,对于整个团队你的参数是明显可知可控的。
    2 简单的流式逻辑图,没有过多的逻辑或者业务判断
    3 方法体比较简单,只是单个或者简单的表达语句
    4 返回值是比较简单的基本数据类型,如果是对象需要额外的大括号,其他的返回内容也是额外注意的,无论哪种请保证你的返回值是明确的、可读的。

    不适用场景

    定义对象方法

    一般情况下如果想定义对象下的函数,是多少涉及使用对象中的其他属性的,如果用箭头函数会因为对象无法形成作用域,没有相关上下文,导致this指向全局。特别需要说明的一点是,如果你对象属性方法中需要定义方法,同时想使用对象属性,那么此时建议使用箭头函数。代码参考如下:

    • 字面直接量
    let person={
      name:'zhangsan',
      say1:()=>{
        console.log(this.name)
      },
      say2:function(){
        console.log(this.name)
      },
      say3:function(){
        return ()=>{
         console.log(this.name)
    }
      },
      say4:function(){
        return function(){
         console.log(this.name)
          }
      }
    }
    person.say1()//全局
    person.say2()//对象
    person.say3()()//对象
    person.say4()()//全局
    • 原型对象
    function animal(){
      this.name='animal'
    }
    animal.prototype.run=()=>{
      console.log('animal:'+this.name)
    }
    
    animal.prototype.run2=function(){
      console.log('animal:'+this.name)
    }
    var dog=new animal();
    dog.run()//codepen
    dog.run2()//animal

    定义事件的回调事件

    此时用this唤起的是全局对象,而用传统方式是获取到的事件元素。

    var btn=document.getElementById("btn"),
        btn2=document.getElementById("btn2");
    btn.addEventListener("click",function(){
      console.log(this)
    })
    btn2.addEventListener("click",()=>{
      console.log(this)
    })

    构造器函数

    因为箭头函数无法形成作用域,所以在实例化的时候构造器会失败,不能使用箭头函数实现构造器,真实的使用会报错。

    let bird=()=>{
      console.log(this)
    }
    let xique=new bird()//bird is not a constructor

    逻辑判断过于复杂

    这时候逻辑过于复杂使用箭头函数会导致代码结构不清楚,建议使用原始的结构。
    比如以下场景:
    1 业务或者语法判断过于复杂
    2 返回值情况很复杂

    建议

    尽管箭头函数和let、const以及一些es6语法变得风行,甚至于有些人觉得用箭头函数就觉得自己的技术进阶了,其实不然,大多人人还是停留在了它写法上的便利,并没有了解好其真正的使用场景。

    总之,个人的建议是:上面提到的几种不适合的场景不要用箭头函数。箭头函数适用于那些参数业务逻辑以及返回值都简单的方法的实现。它本质我个人认为就是一段函数的简化写法,最大的利好在于传递了当前对象,避免了之前很多类似于var that=this ,self = this的写法。

    参考文档

    文末福利:

    福利一:前端,Java,产品经理,微信小程序,Python等100G资源合集大放送:jianshu.com/p/e8197d4d9

    福利二:微信小程序入门与实战全套详细视频教程。


    【领取方法】

    关注 【编程微刊】微信公众号:

    回复【小程序demo】一键领取130个微信小程序源码demo资源。

    回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集100G资源大放送。


  • 相关阅读:
    Educational Codeforces Round 20 D. Magazine Ad
    Educational Codeforces Round 20 C. Maximal GCD
    紫书第三章训练2 暴力集
    Educational Codeforces Round 20 B. Distances to Zero
    Educational Codeforces Round 20 A. Maximal Binary Matrix
    紫书第三章训练1 D
    紫书第一章训练1 D -Message Decoding
    HAZU校赛 Problem K: Deadline
    Mutual Training for Wannafly Union #8 D
    紫书第三章训练1 E
  • 原文地址:https://www.cnblogs.com/ting6/p/9725520.html
Copyright © 2011-2022 走看看