匿名函数、回调函数、钩子函数、箭头函数

一、匿名函数

匿名函数的作用：
（1）通过匿名函数可以实现闭包，闭包是可以访问在函数作用域内定义的变量的函数

1、定义

指的是没有名字的函数

// 声明一个普通的函数，函数的名字叫做fn
function fn() {
  console.log('test')
}

//  将函数的名字去掉(运行时会发现报错)
function () {
  console.log('test');
}

// 如需要定义一个匿名函数在匿名函数的外部加一层括号
(function (){
  console.log('test');
})
// 在函数的最后加上括号进行执行
(function (){
  console.log('test');
}) ()

2、匿名函数的使用场景

在Event中

<input type="button" value="btn" id="sub">

<script>
  // 获取按钮元素
   var btn = document.getElementById('sub')
  
  // 给按钮添加点击事件
   btn.onclick = function() {
       alter('start')
   }
 </script>

在object中

var obj = {
   name: 'zjs',
   age: 18,
   fn:function(){
     return "我的姓名是"+this.name+"今年"+this.age
   }
}
console.log(obj.fn()) //进行对象中的内容输出

在函数表达式中

// 将匿名函数赋值给变量fn
var fn = function (){
   return "2022"
}

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

回调函数中

setInterval(function(){
  console.log("回调函数")
},1000)

返回值

// 将匿名函数作为返回值
function fn() {
   return function(){
     return 'test'
   }
}

// 调用匿名函数
console.log(fn()()); // test

// 或者调用
var box = fn()
console.log(box()) // test

模仿块级作用域

(function(){
   // 这里是块级作用域（私有作用域）
}())

// 块级作用域实例
function fn(){
  
  (function(){
    var t = 'test'
  })()
  console.log(t) //报错 t is not defined 
}

fn()

二、回调函数

1、定义

回调（callback）是作为参数传递给另一个函数的函数
允许函数调用另一个函数完成后执行

三、钩子函数

1、定义

钩子函数是在一个事件触发的时候，再系统级捕获到了他，然后做一些操作。
是一个函数，在系统消息出发时被系统调用
不是用户自己触发的
直白的说钩子函数就是回调函数，其实质就是在框架的说法，是在框架的生命周期的某个阶段触发的回调函数

2、实例（vue)

例如在vue的生命周期，mounted（）事件中，在vue实例挂载之后会执行mounted（）中的函数

<div id="#root"></div>

    <script>
    
        new Vue({  //new 一个实例对象
            el:"#root",
            data:{
                str:1,
            },
            mounted(){    //当我的实例挂载完毕之后 会执行  这个就是钩子函数
                console.log(123)
            }
        })

    </script>

四、箭头函数

（1）定义：

箭头函数没有自己的this、argument、super、new target，适用于本来需要匿名函数的地方，并且它不能用作构造函数

· 没有单独的this：在箭头函数出现之前，每一个新的函数根据它是被如何调用的来定义这个函数的this值：
如果该函数是一个构造函数，this指针指向一个新的对象
在严格模式下的函数调用下，this指向undefined
如果该函数是一个对象的方法，则它的this指针指向这个对象
常见使用到箭头函数的场景：

// 不使用箭头函数
function Person() {
  var age = 10;
  
  setInterval(function addAge() {
   this.age ++;
  },1000)
}

// 使用到箭头函数        箭头函数不会创建自己的this，它会从自己的作用域的上一层继承this
function Person() {
   var age = 10;
  
  setInterval( ()=> {
   this.age++
  },1000)
}