zoukankan      html  css  js  c++  java
  • JavaScript立即执行函数

    立即执行函数(Immediate Functions)

    要了解立即执行函数,先了解函数的基本概念,函数声明,函数表达式,匿名函数

    函数声明:使用function声明函数,并指定函数名。

    function foo() {
        // coding   
    }

    函数表达式:使用function声明函数,但未指定函数名,将匿名函数赋予一个变量。

    var foo = function() {
        // coding
    }

    匿名函数:使用function关键字声明函数,但未指定函数名。匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

    function() {
        // coding
    }

    函数声明与函数表达式的不同在于:

    1. 函数声明可在当前作用域下提前调用执行,函数表达式需等执行到该函数后,方可执行,不可提前调用。

    foo()
    function foo() {
        // coding  
    }
    // 正常,函数声明可提前调用
    
    foo()
    var foo = function() {
        // coding
    } 
    // 报错,foo未保存对函数的引用,函数调用需放在函数表达式后面

    2. 函数表达式可直接在函数后加括号调用。

    var foo = function() {
        console.log(2)
    }()
    
    // 2   解析至此,可直接执行调用

    立即执行函数(function(){})()可以看出很像函数表达式的调用,但为什么要加括号呢?如果不加括号:

    function(){
        console.log(1)
    }()
    
    // 报错,函数需要函数名
    
    解析: 虽然匿名函数属于函数表达式,但未进行赋值,所以javascript解析时将开头的function当做函数声明,故报错提示需要函数名

    立即执行函数里面的函数必须是函数表达式,所以由var setFn = function() {}()可以理解为在匿名函数前加了 = 运算符后,将函数声明转化为函数表达式,所以拿!,+,-,()...等运算符来测试下是否如此。

    !function(){
        console.log(1)
    }()
    // 1
        
    +function(){
        console.log(2)
    }()
    // 2
        
    -function(){
        console.log(3)
    }()
    // 3
        
    (function(){
        console.log(4)
    })()
    // 4

    由此可见,加运算符确实可将函数声明转化为函数表达式,而之所以使用括号,是因为括号相对其他运算符会更安全,可以减少不必要的麻烦。

    立即执行函数与正常函数传参形式是一致的。

    这种模式有一些几部分组成:
    • 使用函数表达式定义一个函数(函数声明不能起作用)
    • 在结尾加上一对括号,让函数立即被执行
    • 将整个函数包裹在一对括号中(只有在你不将函数赋值给一个变量的时候才需要)

    eg:

    (function() {
            console.log("my first iife");
        })();
    

      

    这里需要弄清楚一个概念 函数表达式和函数声明

    函数表达式  Function Expression - var expression= function() {}; 

    函数申明     Function Declaration - function test() {};

    这样就好理解基本概念了吧!

    下面来说为什么会考虑到立刻执行函数

    因为在.net或者其他平台下,作用域scope是按照块来划分的,但是在javascript中,变量的作用域是按照函数划分的,可以这样理解js中有时候并没有block scope这种概念,只有function才有自己的scope,因此IIFE实际创建了一个封闭的scope,可以限制对变量和方法的访问,有时候也会避免全局变量引起的命名冲突,所以他出现了.

  • 相关阅读:
    ansible4:playbook介绍及使用
    ansible3:模块介绍
    Rabin加密算法
    基础业务:图片懒加载
    基础业务:滚动到指定位置导航固定(CSS实现)
    数据库事务处理的并发控制技术(二):事务模型
    详解HTTP缓存
    数据库事务处理的并发控制技术(一):并发控制概述
    二叉树的深度优先遍历和广度优先遍历
    Virtual DOM的简单实现
  • 原文地址:https://www.cnblogs.com/mongo/p/4434679.html
Copyright © 2011-2022 走看看