js箭头函数以及和普通函数的区别，this指向问题

一、基本语法

ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子：

// 箭头函数
var fun = (name) => {
   
    // 函数体
    return `Hello ${
     name} !`;
};

// 等同于
var fun = function (name) {
   
    // 函数体
    return `Hello ${
     name} !`;
};

可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采用箭头=>来定义函数。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。

关于箭头函数的参数：

① 如果箭头函数没有参数，直接写一个空括号即可。

② 如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

③ 如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中即可。

// 没有参数
var fun1 = () => {
   
    console.log(111);
};

// 只有一个参数，可以省去参数括号
var fun2 = name => {
   
    console.log(`Hello ${
     name} !`)
};

// 有多个参数
var fun3 = (val1, val2, val3) => {
   
    return [val1, val2, val3];
};

关于箭头函数的函数体：

①如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。

var f = val => val;
// 等同于
var f = function (val) {
    return val };

var sum = (num1