关于ES6箭头函数需要知道的那些事

什么是箭头函数：

主要因为旧js总是写function，太繁琐！ES6推出专门简化所有function的新的定义函数的语法

箭头函数要怎么使用

1. 去掉function,在()和{}之间加上=>

//普通函数
function fun(val){console.log(1)}
//改成箭头函数 
var fun=(val)=>{console.log(1)}   //去掉function,在()和{}之间加上=>

2. 如果只有一个形参变量，则可以省略()，但是如果没有形参时，不能省略()

//匿名函数自调
(function(){
  console.log(`我是匿名函数自调!`)
})();
//改成箭头函数
(() => console.log(`我是匿名函数自调!`))();

3. 如果函数体只有一句话，可省略{}，和结尾的; 如果仅有的一句话还是return，则必须省略return！

<script>
		var str = "you can you up";
        str = str.replace(/\b[a-z]/g,function(kw){
            return kw.toUpperCase()
        })
        //改成箭头函数时 函数主体一句话函数体只有一句话，可省略{};return必须去掉
        str = str.replace(/\b[a-z]/g, kw => kw.toUpperCase());
        console.log(str);
</script>

箭头函数极大了提高我们的开发效率。一开始接触ES6的箭头函数可高兴坏了，再也不用写function这个单词，刷 ~刷 ~,整个项目全都是用箭头函数写，但是这个箭头函数好用是好用，但是它也是有坑的。看看这个坑在哪？

来看下面代码

<script>
      var lilei = {
        sname: "lilei",
        sage: "29",
        friend: ["博特", "福特斯", "口技"],
        intr: function () {
          this.friend.forEach(
            function (val) {
              console.log(`${this.sname}认识${val}`);
            }.bind(this)
          );
        },
      };
  		lilei.intr();
</script>

看看输出结果

那我们想把function去掉使用箭头函数，我们来试着改一下

<script>
      var lilei = {
        sname: "lilei",
        sage: "29",
        friend: ["博特", "福特斯", "口技"],
        intr: () => {//由于这里也没有了墙，下面所有的this都指向了window
          this.friend.forEach(
          (val) => { //这堵墙没了这里的this就指向了上面的this
          //这里使用了箭头函数就不用使用bind方法来定义下面的this了
            console.log(`${this.sname}认识${val}`);
          });
        },
      };
      lilei.intr();
</script>

再来看看输出结果

什么？竟然报错了为什么会报错呢？因为function这样写就好比一堵墙，有这堵墙函数里面的this就会指向lilei。如果没有了function，而使用了箭头函数，那这堵墙就不存在，函数里面的this直接指向了window,由于window全局下没有friend变量，foreach无法遍历，所以会报错。真的是这样吗?我们来验证一下！

<script>
      var friend = ["李白", "马超", "韩信"]; //在全局添加了friend数组
      var sname = "xiaoming"; //在全局添加了sname
      var lilei = {
        sname: "lilei",
        sage: "29",
        friend: ["博特", "福特斯", "口技"],
        intr: () => {  //由于这里也没有了墙，下面所有的this都指向了window
          this.friend.forEach(
          (val) => {   //这堵墙没了这里的this就指向了上面的this
          //这里使用了箭头函数就不用使用bind方法来定义下面的this了
            console.log(`${this.sname}认识${val}`);
          });
        },
      };
      lilei.intr();
</script>

再来看输出结果

还真的是指向了全局变量了，这就说明箭头函数也是有小脾气的，不是所有请况都能用箭头函数的，那在什么情况下适合用箭头函数呢？

1. 希望函数中的this与外部函数的this一致(像上面代替bind),或函数根本就没有涉及this时，就可以随意使用箭头函数
2. 如果函数的this刚好不想与外部的this一致时，就不能使用箭头函数了
   另外箭头函数不支持arguments

正确做法：看下面改的代码

<script>
      var lilei = {
        sname: "lilei",
        sage: "29",
        friend: ["博特", "福特斯", "口技"],
        intr(){  //ES6新规定，:function 可写可不写 这里的this就指向了lilei这个对象
          this.friend.forEach((val) => {//希望下面的this和外面的函数的this一致,就可以使用箭头函数       
            console.log(`${this.sname}认识${val}`);
          });
        },
      };
      lilei.intr();
    </script>

现在知道怎么用好箭头函数啦~~~~~~~
如果说得不好，请多多谅解~谢谢

东哥笔记