ES6箭头函数-2

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

箭头函数注意事项：

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

2) 不可以当做构造函数。也就是说,不可以使用new命令,否则会抛出错误。

3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

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

4) 不可以使用yield命令,因此箭头函数不能用作Generator函数。

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

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

```
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.
箭头函数可以让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.

巴特西

ES6箭头函数-2

最新文章

热门文章