ES6箭头函数-2

如下来文字来自阮大神所著书籍摘记。为了加深记忆。本人就手动敲了一遍(相关代码本人也执行过,可保证运行经过.)app

箭头函数注意事项:函数

1) 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。this

2) 不能够当作构造函数。也就是说,不可使用new命令,不然会抛出错误。spa

3)不可使用arguments对象,该对象在函数体内不存在。若是要用,能够用rest参数代替。rest

关于什么是arguments对象。能够参考MDN连接https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/argumentscode

4) 不可使用yield命令,所以箭头函数不能用做Generator函数。对象

其中,第一点尤为值得注意,this对象的指向是可变的,但在箭头函数中它是固定的。blog

下面有几个例子体会一下箭头函数的使用:事件

  • function foo(){
      setTimeout(()=>
      {
        console.log('id:',this.id);
      },100);
    }
    
    var id=21;
    foo.call({id:42})
    
    //输出42

    setTimeout的参数是一个箭头函数,这个箭头函数的定义是在foo函数生成时生效的,真正执行要到100ms秒之后。若是是普通函数,执行时this应该指向全局对象window,这时应该输出21.可是箭头函数致使this老是指向函数定义生效时所在的对象(本例是{id:42}),因此输出的是42.ip

  • 箭头函数可让this指向固定化,这种特性很是有利于封装回调函数。例如如下的例子。DOM事件的回调函数封装在一个对象里面。
    var handler={
      id:'123456',
      init:function()
      {
        document.addEventListener('click',
          event=>this.doSomething(event.type,false);
      },
      doSomething:function(type)
      {
        console.log('Handling '+type+' for'+this.id);
      }
      }

     以上代码的init方法中使用了箭头函数,这致使箭头函数里边的this老是指向handler对象。

  • function foo()
    {
      return ()=>
      {
        return ()=>
        {
          return ()=>
          {
            console.log('id:',this.id);
          }
        }
      }
    }
    var f=foo.call({id:1});
    var t1=f.call({id:2})()();
    var t2=f().call({id:3})();
    var t3=f()().call({id:4})

    上面的代码只有一个this,就是函数foo的this,因此t1,t2,t3都输出一样的结果。由于全部的内层函数都是箭头函数。都没有本身的this,它们的this其实都是最外层foo函数的this.

  • 除了this,如下3个变量在箭头函数中也是不存在的,分别指向外城函数对应的变量:arguments、super和new.target.
    function foo()
    {
       setTimeout(()=>
       {
            console.log('args:',arguments)
       },100)
    }
    foo(2,4,6,8)

     上面的代码中,箭头函数内部的变量arguments实际上是函数foo的arguments变量。

  • 另外因为箭头函数没有本身的this,固然也就不能用call()、apply()、bind()这些方法去改变this的指向。
    (function()
    {
      return [
        console.log((()=>this.x).bind({x:'inner'})())
      ]
    }).call({x:'outer'});
    //输出['outer']

     上面的代码中,箭头函数没有本身的this,因此bind方法无效,内部的this指向外部的this.

相关文章
相关标签/搜索