前言

在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标签
       }

三、结束语