ES6箭头函数

 接下来将以箭头函数中的this指向&&箭头函数与普通函数区别进行讲解

一、箭头函数中的this

先来说说js中的this指向吧，大家都知道js中的this默认是指向window的，只有问们作用域更改的使用或者调用的时候才会改变this的指向，就好比说在js中直接log this 那么拿到的就是window这个顶级对象，而在函数内部调用的时候就会指向调用的对象，而箭头函数就不太一样了，箭头函数指向的是他所在位置的父级作用域，不废话了上代码！！

//箭头函数的常见的格式()=>{} 以下我就使用（）的方式直接调用了
var a = () => {
    console.log(this);// window
}
a()

var btn = document.querySelector('.btn')
        
btn.onclick = function () {
    console.log(this);//<button class="btn">按钮</button>
    (() => {
        console.log(this);//<button class="btn">按钮</button>
    })()
}
//html <button class="btn">按钮</button>

这样就可以直接看出箭头函数没有自己的this指向，它的this指向父级上下文，而第二个例子由于btn调用了函数，导致箭头函数也进行了改变

在我们数据请求的时候经常是函数套函数，这个时候就是一个很好的环境，使用箭头函数，因为箭头函数没有this指向，他的this也就是外层函数的this

二、箭头函数与普通函数区别

接下来我们在说说箭头函数与普通函数区别这也是js中一个很经典的面试题

区别点：

            1.箭头函数是匿名函数 箭头函数不能作为构造函数使用 不能使用new

            2.箭头函数的this,始终指向父级上下文

            3.箭头函数不能通过call apply bind改变this指向,但是可以通过这些方法传递参数

            5.箭头函数没有arguments属性,可以用...展开运算符来接收所有的参数集合

有关arguments的演示

function A(){
    console.log(arguments);//Arguments[]是一个伪数组 
    //伪数组的定义：身上有length属性但是原型指向的不是Array
    //这个时候我们可以将伪数组转为数组，这样就可以使用数组的方法了
    //转为数组的方法其实有很多的这里就简单说下可以用ES6的扩展运算法...
    //也可以使用数组原型上的方法Array.from()他的返回值是一个数组
    let arr = [...arguments]
    console.log(arr);//[]
    console.log(Array.from(arguments)); //[]
}
var B = ()=>{
    // console.dir(arguments);//Uncaught ReferenceError: arguments is not defined
}
//调用ab两个函数胡
B()
A()

不可以使用call apply bind改变this指向

var btn = document.querySelector('button')
var a = ()=>{
    console.log(this); //window
}
btn.onclick = function () {
    console.log(this);
    a.call(this) //  window 这里使用call方法修改this指向了，还是输出了window
}

这个就是ES6中的箭头函数了，祝大家国庆假期