ES6箭头函数与普通函数区别.箭头函数与普通函数的区别普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名

.箭头函数与普通函数的区别

普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数

定义函数

// 箭头函数
()=>{
log("我是最正经的箭头函数")
}
//定义一个变量等于这个箭头函数方法
const fun1 = (a) => {
    return `Hello ${a} !`;
};

// 普通函数
const fun2 = function (a) {
    return `Hello ${a} !`;
};

在写法上也有很大差别：箭头函数有简写方法

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

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

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

// 没有参数
let fun1 = () => {
    console.log('dingFY');
};

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

// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

本处代码不是我自己写的，copy的 --- dingFY

简写方式当然还不止这些，当你只需要return一句代码或对象，那么你连return ，大括号这些都不用写了

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

上面这个代码还可以在改进，其实我直接不写大括号也不会报错，要简写就全简写捏

let getTempItem = id =>  id: id, name: "Temp" ;

也许你只看这个看不出优势

这里举例一个最常用的场景，router

图片.png 这下对比看出优势了吗？

箭头函数没有prototype (原型)，所以箭头函数本身没有this

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined
// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

箭头函数不会创建自己的this

箭头函数没有自己的this,箭头函数的this指向在定义（注意： 是定义时，不是调用时）的时候继承自外层第一个普通函数的this。所以，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

也就是说，箭头函数的this与其上下文有关

ES6箭头函数与普通函数区别