聊聊js的立即执行函数

jsmask
423 阅读2分钟

这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战

介绍

本期我们讲述js里比较常用的一种形式——立即执行函数，相信立即执行函数大家也并不陌生，它是js一个非常重要的基本功，现在就给大家梳理一下，介绍它的一些概念，注意事项和特点。

概念

立即执行函数(IIFE)（ 立即调用函数表达式）是一个在定义时就会立即执行的 JavaScript函数。其英文简写IIFE，即：Immediately(立即地) Invoked(调用) Function(函数) Expression(表达式)

在写立即执行函数函数之前我们先了解一下什么是函数声明式和函数表达式。

函数声明式：

function test(){
  console.log('Function Declaration');
}

函数表达式：

把一个(匿名)函数(函数声明式)赋值给一个变量的形式。

var test = function(){
    console.log('Function Expression');
}

注意：+1 !1 ~1 (1) 都算是函数表达式

对于函数后面的括号，叫执行符合。

test()

跟以上这些基础的写法，不难想象出，立即执行函数是如何书写了。

(function () {
    console.log('Function Expression');
})();

它称为自执行匿名函数的设计模式，主要包含两部分。第一部分是包围在 圆括号运算符 () 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。

第二部分再一次使用 () 创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。

注意

当一个函数需要立即执行的情况，该函数必须是表达式形式

var test = function(){
    console.log('Function Expression');
}();

(function(){
    console.log('Function Expression');
})()

!function(){
    console.log('Function Expression');
}()

W3C推荐的立即执行函数的编写规范

(function(){
   console.log('Function Expression');
}());

但实践中，为了清晰，所以 圆括号运算符 () 要放到外面且前面加。防止上层没有。无法判定上下层关系而造成错误。

;(function(){
    console.log('Function Expression');
})();

;(function test(a,b,c,d){
    console.log(arguments.length);
    console.log('Function Expression');
})(1,2,3)

特点

  • 可以创建一个与外界没有任何关联的独立作用域
  • 执行完成后，自动销毁
  • ES3、ES5立场上是没有模块概念，立即执行函数来模拟模块化，封闭作用域、抛出接口
  • 向外界抛出一系列属性和方法，也可以在window上保存属性和方法
avatar
文章
阅读
粉丝