爱尔兰布伦国家公园内的史前石墓【摘自微软Bing】

今天我们要讲的是箭头函数，一起来看看她的强大魔力

1、箭头函数

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

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

x => x * x

先看一段代码

let car = {

carArr: ['大众', '本田', '红旗'],

drive: function () {

return function (item) {

     console.log('开', this.carArr[item]);

      }

   }

};

let newCar = car.drive();

newCar(2); 

如大家所料报错了:

为什么会报错？我们接下来看看要说的箭头函数

箭头函数

let car = {

carArr: ['大众', '本田', '红旗'],

drive: function () {

returnitem =>{

      console.log('开', this.carArr[item]); //成功输出：开红旗

      }

   }

};

let newCar = car.drive();

newCar(2);

*看加粗文字部分，这就是箭头函数用法

下面我们详细讲解下箭头函数

let hello=function(){

console.log('箭头函数');

}

<-- 两种写法等价-->

let hello =() => {  console.log('箭头函数');};*注意加粗部分，箭头函数的写法更简洁是不是？

1、带参数的箭头函数

let hello =(x)=> {    console.log(x); }

如果要传参数的话必须把参数用括号括起来，多个参数的(x,y,z);

2、不带参数的箭头函数

let hello =()=> {    console.log('箭头函数'); }

注意：不带参数的箭头函数括号()也必须保留,否则编译无法通过

3、直接返回值的箭头函数

let hello =(x) => x;//这里没有加{}括号

let a = hello('箭头函数');

console.log(a);

注意：直接返回值的函数不需要加{}括号,这样写直接返回传入值，实际开发中如果需要处理业务逻辑加上{}括号，也可以通过retuen返回值,看下面代码

let hello = (x) => {

//业务代码

return x; //返回值x

}

现在我们来讲解下前面留下的问题?

普通函数的写法中this的绑定是在函数调用的时候绑定的，这取决于函数调用的上下文，箭头函数的this绑定是在函数创建的时候绑定的。

car.drive()是一个函数，而且返回了一个函数赋值给newCar变量，当newCar()作为函数调用的时候，此时的newCar()的上下文是最顶层window, 因为this没有进行动态绑定，此时this被指向window对象，故而抛出错误。箭头函数在函数创建时就绑定了this上下文，this指向当前的car对象，很好的解决了这个问题

注意：在严格模式下， this为undefined而不是window）。

各位如果有什么不懂的，多读读这两段话，在运行上面的例子，应该会加深理解

个人学习心得，大神路过 ，不喜勿喷😊  ，如果你觉得不错，欢迎点赞，订阅，分享出去给需要的人，笔者将非常感谢，如果有疑问请留言或者私信

<完>

如果你是喜欢看书的朋友，不妨点击【有惊喜】这是我在亚马逊买的电子书，都非常珍贵。希望你能喜欢

作者：小处成就大事

简介：一个喜欢分享和学习的前端开发程序猿，平时喜欢看看书，游泳，爬山，户外骑行等，期待与志同道合的你成为朋友，一起交流、一起进步。

初衷：闲时喜欢写一些文章分享，记录丰富自己。可能没有别人写得好，但是我写的每一篇都非常用心和投入。真心希望来到这里对你有所收获，我将非常开心很欣慰。

博客：小处成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和学习，期待你的到来