ES6（四）形式简洁 =＞ 箭头函数

目录

前言

一、箭头函数

1、概念：

2、语法：(对比普通函数)

3、举个栗子：

二、函数特性

1、小括号可简写

2、大括号可简写

​

 3、不含this关键字

外部无函数场景

外部有函数场景

三、结束语

---

前言

      在javascript基础中，我们声明一个函数通常都是用function的。但是，
即使是对于函数内书写功能再简单，function形式也不能作相应的化简，这就导致了程序的冗杂。
当然，这只是小糖的个人理解。下面，我们来学习箭头函数~

一、箭头函数

1、概念：

        简单理解就是-----一种新的定义函数的方式，对于函数表达式的简写方式。
        不用function关键字啦~

2、语法：(对比普通函数)

        普通函数：function (形参) {代码段};
        箭头函数：(形参) => {代码段};

3、举个栗子：

普通函数：

 {
            let f0 = function(a) {console.log(a);}
            f0(100);
       }

箭头函数：
 

        {
            let f = (a) => {console.log(a);}
            f(200);
       }

二、函数特性

1、小括号可简写

         箭头函数如果只有一个形参，那么可以省略小括号不写。
                   如 (a) => {  } 等同于 a => {  }
举个栗子

2、大括号可简写

        若箭头函数代码段只有一个命令，那么可以忽略大括号不写。
                 如() => {console.log("aaa")} 等同于 () => console.log("aaa")
举个栗子

注意！！！！！

箭头函数中，如果省略大括号，代码段会自动返回我们所写的语句，不用加return

       {
           let fun = (a,b) => {return a + b};
           console.log(fun(1,2));
           //等同于
           let fun1 = (a,b) => a + b;  //自动返回 a + b 的结果
           console.log(fun1(2,3));
       }

 3、不含this关键字

        箭头函数里不含 this 关键字，箭头函数自身不含this，如果出现则this来自该箭头函数的外部函数。

        通俗理解：如果箭头函数被一个函数包裹着，那他的this就是其外部函数的this；

                          如果箭头函数外部没有函数包裹，则this指向window。
 

外部无函数场景

       //3、(1)箭头函数外部没有函数时 （this指向window）
       {
           let fun = a => console.log(this);
           fun();  //结果为window
       }

外部有函数场景

       //(2)箭头函数在函数内部 （this指向外部函数）
 
       var btn = document.querySelector('button');
       btn.onclick = function () {
           let fun1 = a => console.log(this);
           fun1();  //结果返回div标签
       }

三、结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤