ES6箭头函数的使用

前言

箭头函数是

ES6

当中对函数的一种全新的表示方法，看起来也非常简洁，我在之前也经常使用，但是没有整体的学习，今天突发奇想，决定进一步的学习一下箭头函数

起步

我们以前在写函数的时候会这样写

function fun() {
   return 100;
}

console.log(fun());     //100

也会这样写

const fun = function() {
   return 100;
}

console.log(fun());     //100

在ES6中，我们将代码简化

const fun1 = () => {
   return 100;
}
console.log(fun1());     //100

再次简化

const fun2 = x => x;
console.log(fun2(100));     //100

• ()中定义参数，如果只有一个参数，()可以省略

• {}中写函数体，如果函数体中只有返回值，可以不写return

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

举个例子

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log("我是" + this.name);
       }, 500)
   }
}
obj.sayName();

这串代码执行结束后，打印的是 

我是undefined

 ，那么为什么“小明”不能被打印出来呢？

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log(this);
       }, 500)
   }
}
obj.sayName();

所以我们打印一下this，打印的结果是window对象，所以这个this指向的是window对象，也就是全局对象。因为这里的代码是sayName函数里面套了一个函数，内函数里面的this指向不到

小明

，但是sayName函数的this可以指到

小明

，解决的办法就是在sayName函数里定义一个变量，值为this，内函数再通过变量指向

小明

，代码如下

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       let self = this;
       setTimeout(function() {
           console.log("我是" + self.name);
       }, 500)
   }
}
obj.sayName();

这样就能够打印出

我是小明

了

使用箭头函数

看下面这串使用了箭头函数的代码

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(() => {
           console.log("我是" + this.name);
       }, 500)
   }
}
obj.sayName();

打印的结果就是 

我是小明

我想你们和我都有同样的一个疑惑：为什么使用箭头函数就可以实现了呢？

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

• this指向不同
• 普通函数：谁调用这个函数，
  this
  指向谁
• 箭头函数：在哪里定义函数，
  this
  指向谁

片尾

嘻嘻嘻，小白暂时用到的也就这么多（其实我就是会这么多），后续我会继续更新这篇博客的