ES6里面关于箭头函数的一些问题

箭头函数

// 传统模式
var fn = function (a, b) {
    [a, b] = [b, a];
    return `a = ${a},b = ${b}`;
}
var a = fn(2,3);
console.log(a);

// ES6写法
const fn1 = (a,b) =>{
    [a, b] = [b, a];
    return `a = ${a},b = ${b}`;
}
const b = fn1(2,3);
console.log(a);

注意事项：
1、箭头函数如果只有一个参数，就可以省略()： const a = x =>{}
2、箭头函数如果只有一条返回语句，没有其他语句，那么可以省略{} ：const add = (a,b){a + b}
3、箭头函数中没有this,argument,new.target,如果要强行使用，则指向函数外层对应的this,argument,new.target
4、箭头函数没有原型，所有说占用空间非常小，不能当成构造函数来使用

() => return 'hello'
(a, b) => a + b
(a) => {
  a = a + 1
  return a
}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return

this指向问题
ES5以前的this的指的是函数的调用对象，
ES6的this指向函数被定义时的

语法：去掉function在()和{}之间加上=>：var a = (...参数) => {}

const btn = document.getElementsByTagName('button')[0];
// 传统模式会报错因为当时的this指向window
btn.onclick = function(){
    setInterval(function(){
        console.log(this)//window
        this.style.backgroundColor = `rgb(${(Math.random() * 255) | 0},${(Math.random() * 255) | 0},${(Math.random() * 255) | 0})`;
    }.bind(this),3000);
}

// 箭头函数的this指向是不会更改的
btn.onclick = function(){
    setInterval(() =>{
        console.log(this)//btn
        this.style.backgroundColor = `rgb(${(Math.random() * 255) | 0},${(Math.random() * 255) | 0},${(Math.random() * 255) | 0})`;
    },3000);
}

函数的特点：
1.箭头函数this为父作用域的this，不是调用时的this
箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。
2. 箭头函数不能作为构造函数，不能使用new
3. 箭头函数没有 this argument new.target
4. 应用：临时使用，并不会可以调用，异步处理函数事后处理