一文弄懂箭头函数

一篇文章，让您学会箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

一、声明一个只有一个参数的函数（es6之前）

const sum = function(x) {
     return x
 }

改造为箭头函数，一个参数时，可以省略（）

const sum = x => x;
console.log(sum(3))

注：当箭头函数中没有参数时，不可以省略（）

---

二、声明一个求两个数和的函数(es6之前，两个及以上参数）

function sum(x, y) {
    return x + y;
}
console.log(sum(1,3))

改造为箭头函数

//方法1
const sum1 = (x, y) => {
     return x + y
}
//方法2
const sum2 = (x, y) => x + y

---

三、对象里的函数属性（es6之前）

const obj = {
     name1: 'nihao',
     show: function(){
         console.log(this.name1);
      }
}
obj.show();

改造为箭头函数

 const obj = {
      name1: 'nihao',
      show: () => {
          console.log(this.name1);
      }
}
obj.show();

es6中对象函数的新的写法

 const obj = {
      name1: 'nihao',
      show() {
          // es6中对对象方法的简写
          console.log(this.name1);
      }
 }
 obj.show();

---

四、箭头函数返回值为一个对象

//不简写
var obj = () =>{ 
    return {x:1};
}  

//简写
var obj = () =>({x:1});

注:在简写的情况下，返回的对象必须在（）里面，否则会报错

---

箭头函数中的注意点：

1. 构造函数中不可以使用箭头函数，不能使用new
2. 箭头函数this为父作用域的this，不是调用时的this(不可以使用call（）、bind()、apply()方法改变this指向）
3. 箭头函数不可以作为构造函数原型的方法，
4. 箭头函数没有argument对象，不能通过arguments对象访问传入的参数
5. 箭头函数不可以作为回调函数
6. 箭头函数没有原型属性

 const btn = document.querySelector('button');
 // 箭头函数里面没有this
 btn.addEventListener("click", () => {
      console.log(this); //window
   // this.style.background = 'red';  这样写会没有效果
      btn.style.background = "red";
 })

 

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。 

使用箭头函数的时候，一定要注意this指向问题呦。