美文网首页
箭头函数与this

箭头函数与this

作者: zjh111 | 来源:发表于2018-03-06 14:45 被阅读0次

    es3时函数会默认把'.'前面的对象默认当作this传入函数,也可以用call、apply和bind等方法改变。
    由于this太难用才产生=>弱化this产生的问题。
    但是this 指向不像py那样明显的写出来,导致指向不清产生各种问题。
    但是coffeescript中使用=>方便的解决this问题(coffee还有个->没抄)。
    于是有了没有this的箭头函数,确保内外this相同。
    还使代码简化。

    //对代码的一些简化
    let xxx = (p1) => {
    console.log(1)
    return 2
    }
    xxx(2)
    ------------------------------------------------
    //只有一个参数时,参数可以不写()
    //只有一行函数体时可以同时省略return与{}
    //如果写了return必须加{}否则报错
    let xxx = p1 => p1*p1
    xxx(2)
    

    函数的this

    var controller ={
        el:'#app',
        init:function(){
            $(this.el).on('click',this.onClick)//此时this为   controller     
        },
        onClick:function(){
          this.getUse();    //但在这里调用时却是#app这个元素
        },
        getUse:function(){
          console.log(this)
        }
    }
    

    下面是E6之前为解决问问题的一种方法

    var controller ={
        el:'#app',
        init:function(){
          var self= this  //使用self来保留外面的this
          $(this.el).on('click',function(){
            self.xxx()  
          })
        },
        xxx:function(){
           this.getUse()  
        },
        function:getUse(){  
          console.log(this)
        }
    }
    

    ES6箭头函数出现后

    var controller ={
        el:'#app',
        init:function(){
          $(this.el).on('click',() => { //箭头函数本身没有this使用的是外面的this
            this.xxx()  //这里就是controller.xxx()
          })
        },
        xxx:function(){
           this.getUse()  
        },
        getUse(){  //ES6新语法,可以省略":function"
          console.log(this)
        }
    }
    

    使用call给箭头函数指定this,this也不会改变。

    相关文章

      网友评论

          本文标题:箭头函数与this

          本文链接:https://www.haomeiwen.com/subject/oknlfftx.html