箭头函数

JavaScript中使用一个函数，以下两种方法均是常用的。

一：
function show(){
    alert("无参函数");
}
show();

二：
function show(a,b){
    return a+b;
}
console.log(show(1,2));

ES6中新增了箭头函数，为了是代码更简洁，举个栗子，实现点击方块改变颜色的效果，ES5代码如下：

<div id="box" style="width: 90px;height: 90px;background:#ccc;"></div>
<script>
    var oBox=document.getElementById("box");
    oBox.onclick=function(){
        this.style.background="red";
    }
</script>

箭头函数

<div id="box" style="width: 90px;height: 90px;background:#ccc;"></div>
<script>
    var oBox=document.getElementById("box");
    oBox.onclick=()=>{
        oBox.style.background="red";
    }
</script>

可见，箭头函数是替换了原来的function()，改变为()=>。而且不难发现，除此之外还有一个变化，this变成了oBox。

因为试验中发现使用this会报错，这是为何，那就涉及到箭头函数需要注意到问题了。

this问题

在原有的例子上，在点击事件中增加一个测试语句，我们来看一下this到底指向了哪里。

<div id="box" style="width: 90px;height: 90px;background:#ccc;"></div>
<script>
    var oBox=document.getElementById("box");
    oBox.onclick=()=>{
        alert(this);                //[object Window]
        oBox.style.background="red";
    }
</script>

可见，this改变了作用域，指向了window。

那么在json中又会怎么样，先看一下原本的函数：

var json={
    a:1,
    b:2,
    show:function(){
        alert(this.a);
    }
};
json.show();    //返回 1

 而箭头函数：

var a=2018;
var json={
    a:1,
    b:2,
    show:()=>{
        alert(this.a);
    }
};
json.show();    //返回2018

返回结果2018，是定义在全局变量的a，这又证实了this指向的是window 

arguments问题

函数中arguments是当前函数的一个内置属性。arguments非常类似Array，但实际上又不是一个Array实例，它的长度由实参长度决定。

function show(){
    console.log(arguments);    //返回1,2,3,4
}
show(1,2,3,4);

而对于箭头函数呢，arguments是不能使用的。

var show=()=>{
    console.log(arguments); //报错 arguments is not defined
}
show(1,2,3,4);