JS自执行函数,匿名函数

自执行函数

  1. 先来看个最简单的自执行函数
(function(){
    
}());

相当于声明并调用

var b=function () {
   
    }
b()
  1. 自执行函数也可以有名字
function b(){
    ...
}()
  1. 自执行函数也可以传参
function b(i){
    console.log(i)
}(5)

下面我们来总结一下自执行函数:

• 自执行函数在调用上与普通函数一样,可以匿名,可以传参。只不过是在声明的时候自调用了一次

• 自执行函数的写法有两种 , 推荐第二种写法

   // 1.第一种方式: 两个()() ,function写在第一个()里面
   (function(){})()

   // 2.第二种方式: 一个() ,里面写 function(){}()
   (function(){}())

匿名函数

匿名函数就是没有名字的函数

匿名函数通常与自执行函数结合使用,因为匿名函数没有函数名,没办法调用,通过自执行调用

匿名函数的基本形式为

(function(){...})();

前面的括号包含函数体,后面的括号就是给匿名函数传递参数并立即执行之

匿名函数的作用是避免全局变量的污染以及函数名的冲突

1.小括号的作用

小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。

这个返回值实际上也就是小括号中表达式的返回值。

所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function 对象。

因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。

所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。

简单来说就是小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值

2.匿名函数的写法

方式1,调用函数,得到返回值。强制运算符使函数调用执行

(function(x,y){
    return x+y;
}(3,4)); 

方式2,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用再去调用执行

(function(x,y){
    return x+y;
})(3,4); 

这种方式也是很多库爱用的调用方式,如jQuery,Mootools。

方式3,使用void

void function(x) {
    x = x-1;
}(9);

方式4,使用-/+运算符

-function(x,y){
    return x+y;
}(3,4);

+function(x,y){
    return x+y;
}(3,4);

--function(x,y){
    return x+y;
}(3,4);

++function(x,y){
    return x+y;
}(3,4); 

方式5,使用波浪符(~)

~function(x, y) {
    return x+y;
}(3, 4); 

方式6,匿名函数执行放在中括号内

[function(){
    console.log(this) // 浏览器得控制台输出window
}(this)] 

方式7,匿名函数前加typeof

typeof function(){
console.log(this) // 浏览器得控制台输出window
}(this) 

匿名自执行函数

匿名自执行函数首先是一个匿名函数,但是这个函数是可以自己自动执行的,不需要借助其他的元素

匿名自执行函数的作用:

• 匿名自执行函数最常见的作用是用于实现闭包的情况中

• 匿名自执行函数还可以用于在js中模拟创建块级作用域

匿名函数

function () {
   
    }

自执行

(function(){
          //代码
 })();

匿名函数自执行 实现 异步函数递归

详情可参考 icode仓库的 js/异步递归调用.js

目标:在setTimeout异步函数中依次 打印 0 1 2 3 4

(function async(i) {
    
    if (i >= 5)
        return
    else
        
        setTimeout(() => {
            console.log(i)
            i++
            async(i)
        }, 1000)
    
})(0)

你可能感兴趣的:(JS自执行函数,匿名函数)