JS函数:具名函数、匿名函数、自执行函数

在这里插入图片描述

一、具名函数

具名函数，故名思意就是有名字的函数，具名函数一般是我们定义的最多的一种

// 函数
function fn() {
    console.log('我是具名函数')
    console.log('看，我有名字')
    console.log('我的名字叫 fn')
}
fn()
fn()

我们在上述代码中定义了一个函数fn，然后将函数调用了两次，结果非常简单，函数中的内容会被输出两次

console.log('我是具名函数')
console.log('看，我有名字')
console.log('我的名字叫 fn')
console.log('我是具名函数')
console.log('看，我有名字')
console.log('我的名字叫 fn')

我们尝试不使用函数，可以看到代码没有我是用函数方便阅读
如果我们还需要输出更多次？
使用函数的话，我们就只需要调用 fn 即可
下面代码就得把代码复制一边所以会导致代码会非常的冗余
所以得出，具名函数的好处就是,减少冗余代码，方便代码阅读，可以多次调用

二、匿名函数

没有名字的函数，匿名函数我们也随处可见，我们来写几个匿名函数

setTimeout(function () {
  console.log('我是匿名函数，我被用于定时器参数传递')
}, 1000)

let arr = [1, 2, 3]
arr.forEach(function (item) {
  console.log('我是匿名函数，我被用于回调函数参数')
})

let box = document.querySelector('#box')
box.onclick = function () {
  console.log('我是匿名函数，我被用于绑定事件')
}

匿名函数一般被用作，回调函数参数，事件绑定

function fn(){
  console.log('我是一个具名函数')
}
setTimeout(fn)
fn()

我们用具名函数仍然是可以实现上面的代码的，但是我们为什么要使用匿名函数呢？
匿名函数不会创建变量，所以说在内存上就不会造成不必要的浪费，还有就是代码看上去会更加简洁，但是匿名函数不能重复调用

DOM2匿名函数的一点小坑

dom取消事件

我们只需要把onclick赋值为null就可以了

let box = document.querySelector('#box')
box.onclick = function () {
  console.log('我是匿名函数')
}
box.onclick = null

dom2取消事件

addEventListener(type, function, options):绑定某个事件
removeEventListener(type, function, options):移除某个事件

我们使用匿名函数

let box = document.querySelector('#box')
box.addEventListener('mousemove',function () {
  console.log('我是匿名函数')
})
box.removeEventListener('mousemove',function () {
  console.log('我是匿名函数')
})

可以看见移除是失败的

再试试具名函数

let box = document.querySelector('#box')
function fn(){
  console.log('我是具名函数')
}
box.addEventListener('click',fn)
box.removeEventListener('click',fn)

可以看见我们监听的事件被移除了
总结在使用DOM2事件绑定的时候，如果我们有要移除事件的逻辑，请不要使用匿名函数，因为匿名函数我们是无法用代码找到该函数的。

三、自执行函数

在定义的时候就调用这个函数

(function () {
 console.log('我是一个自执行函数')
})()

我们可以看见这个函数在刚被定义出来就被执行了
为什么要使用自执行函数呢，为什么不直接写呢，你又不可以调用两次，我又不绑定事件？？？？
在这里插入图片描述

作用域

作用域得有变量作为参照物
我们的函数在执行的时候就会形成自己私有的作用域

我们举个栗子例子

function fn() {
  var num = 10;
}
fn()

console.log(num)// Uncaught ReferenceError: num is not defined

解释: 我们在函数中定义了一个变量num，我们想在外面去访问这个num，但是告诉我们num这个变量没有定义。
但是我不是在函数中定义了吗？？？？
在这里插入图片描述
先不急我们再来看一段代码

var num = 10
function fn() {
  console.log(num)// 10
}
fn()

运行这段代码却没有报错，我们来看一下下面这幅图理解一下
在这里插入图片描述
结论

函数执行会有自己的作用域

函数中的变量全局访问不到(不会污染全局)

看到这里大家应该还是不知道自执行函数是干嘛的，别急，我们继续向下看
在这里插入图片描述
我们来一个实例来解释

假如我们团队要写京东，然后我们需要给每个人分配任务，一个人写一个板块，我们要怎样才能保证每个人定义的变量不重复呢？？？
此时我们就需要用到自执行函数形成的作用域了

在这里插入图片描述
代码实现如下

/* 这是张三的代码 */
(function(){
  var a = 10;
  console.log(a)
})();

/* 这是李四的代码 */
(function () {
  var a = 5
  console.log(a)
})();

这样每个人的代码都不会影响到别人的代码

在这里插入图片描述