最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 你不知道的箭头函数

    正文概述 掘金(A白衣苍狗)   2021-03-27   520

    什么是箭头函数

    引用参考MDN

    function (a,b){
        return a+b
    }
    
    //上面函数可以用箭头函数简写为
    
    (a,b) => a+b
    

    箭头函数实际就是个匿名函数,简化了函数的定义,在只有一个参数和一条返回语句时 function return以及{}都可以省略.多个参数或者多条语句时括号和花括号就不可以省略了.

    箭头函数的this

    箭头函数是没有this的,准确的说是它没有自己的this,它的this是根据上下文继承来的. 箭头函数的定义可不只是简简单单的简化代码,它更多的是被用来改变this的行为特性.

      var name = "The Window";
    
      var object = {
        name : "My Object",
    
        getNameFunc : function(){
          return function(){
            return this.name;
          };
    
        }
    
      };
    
      alert(object.getNameFunc()());
      
      ---------------------------------
        var name = "The Window";
    
      var object = {
        name : "My Object",
    
        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };
    
        }
    
      };
    
      alert(object.getNameFunc()());
    

    上面是我们在闭包学习中抄来的一段代码.我们看第一段,普通函数调用this会指向全局window,所以运行this.name的结果自然就是The window.第二段同样是普通函数,但是函数最开始是通过对象的方法调用object.getNameFunc()(),此时this指向的是调用它的对象object,然后通过缓存将this赋给that,所以最后运行的时候就是objectname了.第二段代码可以用箭头函数更加方便的写出来.

        var name = "The Window";
    
      var object = {
        name : "My Object",
    
        getNameFunc : function(){
          return () => this.name
    
        }
    
      };
    
      alert(object.getNameFunc()());
    

    箭头函数中的闭包

    箭头函数也是可以使用闭包的.

    //一个闭包
    function foo(){
        var i = 0
        return function(){
            return i++
        }
    }
    var a = foo()
    a()
    a()
    a()
    
    //通过箭头函数可以改写成
    
    var foo = (i = 0 )=> () => i++
    var a = foo()
    a()
    a()
    a()
    

    箭头函数中的递归

    例如给定一个数字,我们用递归求它的阶层,3的话就是123

    function fac(n){
        if(n<=0){
            return 1
        }else{
            return n*fac(n-1)
        }
    }
    

    上面为一个普通的递归求阶乘的函数,我们可以用箭头函数改写为下

    var fac = n => {
        if(n<=0){
            return 1
        }else{
            return n*fac(n-1)
        }
    }
    

    我们可以合理的运用三元运算使代码更加优雅

    var fac = n => (n<=0? 1 : n*fac(n-1))
    

    不适用的

    • 由于箭头函数本身没有this,所以对于call,apply方法无法修改this.
    • 箭头函数不能使用new,会抛出错误.
    • 箭头函数没有prototype属性.

    起源地下载网 » 你不知道的箭头函数

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元