js - 匿名函数和箭头函数理解

一、匿名函数

1，基本概念

匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！（在ES5中就已经有了匿名函数）

首先我们声明一个普通函数fun：

function fun(){
    console.log("Eula");
}

然后将函数的名字去掉即是匿名函数：

function (){
    console.log("Eula");
}

这样直接写在js中会直接报错，不符合语法规范；需要使用小括号包括起来：

 // 不在报错
 (function () {
     console.log("Eula");
 })

那怎么调用呢，普通函数的调用都是使用 ()小括号来调用，匿名函数也不例外；后面需要在加一个小括号实现自调用，同样括号里面也可以传参；

 (function (value) {
       console.log("name:" + value);
  })("Eula");
  // 打印结果
  name:Eula

2，匿名函数的应用场景

1、自调用

匿名函数想要自调用需要放在（）里面并后面使用小括号调用，里面可以传参；

(function (value){
    console.log("name:"+value);
})("Eula")
输出结果：
name:Eula

2、事件的绑定函数

<input type="button" value="Eula！" id="btn">
<script>
    //获得按钮元素
    var btn=document.querySelector("#btn");
    //给按钮增加点击事件。
    btn.onclick=function(){
        alert("姐是尤菈你记住！");
    }
</script>

3、在对象中使用

var obj={
    name:"Eula",
    fun:function(){
        return "我是"+this.name
    }
};
console.log(obj.fun());//我是Eula

4、函数表达式
JS中定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。

//  1，函数声明
function fun(params){
    console.log(params)
    return ""
}

// 2，函数表达式写法 将匿名函数赋值给变量fun。
var fun = function(params){
    console.log(params)
    return ""
}

//调用方式与调用普通函数一样
console.log(fun());

注意：函数声明，它的一个重要特征就是函数会进行声明提升，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面；

函数表达式的写法则不会进行js预编译的函数提升；

5、回调函数

概念：回调函数就是一个被作为参数传递的函数；

setInterval(function(){
    console.log("我是一个回调函数，每次1秒钟会被执行一次");
},1000);

6、作为返回值返回

	//将匿名函数作为返回值
      function fun() {
        //返回匿名函数
        return function () {
          return "Eula";
        };
      }
      //调用匿名函数
      console.log(fun()()); //Eula
      //或
      const handleFun = fun();
      console.log(handleFun()); //Eula

二 、箭头函数

1，基本概念

箭头函数是ES6中新增一种语法，属于匿名函数； 将函数更加简单化的写法，很常用。

let funName = ()=>{
    console.log('今天天气很好  上课可惜了');
}

2，箭头函数写法的特殊性

他有一些特殊写法 在编辑函数的时候可以适当的做出一些省略：

1，当只有一个参数的时候 可以省略小括号

let fun1 = num=>{
    console.log(num + 300);
}

2，当没有参数或者多个参数的时候 ，不能省略小括号；

// 没有参数
let fun2 = ()=>{
    console.log(300);
}
// 多个参数
let fun3 = (a,b,c)=>{
    console.log(a);
    console.log(b);
    console.log(c);
}

3，当我们只有一句函数体的时候, 并且这句话是返回值的时候 ，可以同时省略return和大括号（函数体） ；

let fun4 = (num) => num+200
console.log(fun4(100));// 300 

4，如果说不省略return 那么大括号也不能省略；

 let fun4 = (num) => {
        return num+200
   }
  console.log(fun4(100));// 300 

5，如果返回值是对象 ，在省略大括号和return的情况下，需要在对象外面加上一层小括号（因为有歧义无法确定大括号是箭头函数的还是对象的 ）

// 省略大括号和return的写法
let fun5 = ()=>({
    name : 'Eula',
    age : 18,
    sex : '女'
})
console.log(fun5 ());

// 正常写法
let fun5 = () => {
   return {
     name: "Eula",
     age: 18,
     sex: "女"
    };
 };
 console.log(fun5());

3，箭头函数的特点

1. 只能定义匿名函数
2. 箭头函数没有原型对象
3. 箭头函数不能定义构造函数
4. 箭头函数不能使用arguments new super
5. 箭头函数没有自己的this （调用的是他的父级的this）

4，箭头函数this总是指向父级的this：

如下分情况进行讨论：

1，say方法是箭头函数 指向父级 ，obj3 的父级是window，所以say函数的this指向是window。

 	 let obj3 = {
        name: "Mary",
        age: 13,
        say: () => {
          return this; //返回的是window
        }
      };
      开始调用
      console.log(obj3.say());

2，say2方法指向的是父级的this,父级是say1函数，say1函数是普通函数只指向obj4； 所以say2的this指向是obj4对象。

	let obj4 = {
        name: "Tom",
        age: 3,
        say1: function () {
          console.log("this:",this); // 此处的this 是 {name: 'Tom', age: 3, say1: ƒ}
          return {
            name: "Jerry",
            age: 2,
            say2: () => {
              // 指向的是父级的this  父级是say1函数  say1函数是普通函数只指向obj4 所以 此处的this指向是{name: 'Tom', age: 3, say1: ƒ}
              return this;   
            }
          };
        }
      };
      开始调用
      console.log(obj4.say1().say2());

3，say2的this指向父级 父级say1也是箭头函数，那么this也指向父级的this，那么obj5对象的父级是window所以say2的this指向是window。

     let obj5 = {
        name: "Tom",
        age: 3,
        say1: () => {
          return {
            name: "Jerry",
            age: 2,
            say2: () => {
              // say2的this指向父级  父级say1也是箭头函数,那么this也指向父级的this,那么obj5对象的父级是window所以此处的this指向window
              return this; 
            }
          };
        }
      };
       开始调用
      console.log(obj5.say1().say2()); // 指向的是window

三、扩展

对象里面的函数会有多种写法，如下：

 	const action = {
 		// 1，省略键名的写法
        one() {
          console.log(111);
        },
        // 2，普通函数的写法
        two: function () {
          console.log(222);
        },
        // 3，匿名函数的写法
        three: () => {
          console.log(333);
        }
      };