JavaScript中立即执行函数实例详解

2024-10-30 05:40:51

前言

js立即执行函数可以让你的函数在创建后立即执行，js立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，这种模式本质上就是函数表达式(命名的或者匿名的)，在创建后立即执行。

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法，最初我以为是一个括号包裹匿名函数，再在后面加个括号调用函数，最后达到函数定义后立即执行的目的，后来发现加括号的原因并非如此。

下面话不多说了，来一起看看详细的介绍吧。

通常我们声明一个函数有以下几种方式：

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();

//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();

//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

如果你看过一些自定义控件的话你会发现他们大多数都是沿用这种写法：

(function() {
 ```
 // 这里开始写功能需求
 })();

这是我们常说的立即执行函数(IIFE)，顾名思义，也就是说这个函数是立即执行函数体的，不需要你额外去主动的去调用，一般情况下我们只对匿名函数使用IIFE，这么做有两个目的：

一是不必为函数命名，避免了污染全局变量

二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

如果看到这两句话无法理解，那么先从IIFE的运行原理说起。

因为IIFE通常用于匿名函数，这里就用简单的匿名函数作为栗子：

var f = function(){
 console.log("f");
}
f();

我们发现这里f只是这个匿名函数的一个引用变量，那么既然f()能够调用这个函数，我把f替换成函数本身可以么：

function(){
 console.log("f");
}();

运行之后得到如下结果：

Uncaught SyntaxError: Unexpected token (

产生这个错误的原因是，Javascript引擎看到function关键字之后，认为后面跟的是函数声明语句，不应该以圆括号结尾。解决方法就是让引擎知道，圆括号前面的部分不是函数定义语句，而是一个表达式，可以对此进行运算，这里区分一下函数声明和函数表达式：

1、函数声明(即我们通常使用function x(){}来声明一个函数)

function myFunction () { /* logic here */ }

2、函数表达式(类似以这种的形式)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

小学我们就学过用()括起来的表达式会先执行，就像下面这样：

1+(2+3) //这里先运行小括号里面的内容没有意见撒

其实在javascript中小括号也有相似的作用，Javascript引擎看到function关键字会认为是函数声明语句，那么如果Javascript引擎优先看到小括号会怎么样：

//用小括号把函数包裹起来
(function(){
  console.log("f");
})();

函数成功执行了：

f //控制台输出

这种情况下Javascript引擎就会认为这是一个表达式，而不是函数声明，当然要让Javascript引擎认为这是一个表达式的方法还有很多：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

回到前面的问题，为什么说IIFE这种形式避免了污染全局变量，如果你见过别人写的jquery插件，里面通常会有类似这样的代码：

(function($){
  ```
  //插件实现代码
})(jQuery);

这里的jquery其实是该匿名函数的参数，联想一下我们调用匿名函数时候是用f()那么匿名带参数的就是f(args)对吧，这里把jquery作为参数传入该函数，那么在函数内部使用形参$的时候就不会影响到外部环境，因为有些插件也会用到$这个限定符，你在这个函数内部可以随意折腾。

以上，在此过程中参考了以下两篇文章：

javascript立即执行某个函数：插件中function(){}()再思考

JavaScript中的立即执行函数

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

JavaScript立即执行函数的三种不同写法

第一种: (function () { // open IIFE // inside IIFE }()); // close IIFE 第二种: !function () { // open IIFE // inside IIFE }(); // close IIFE 第三种: void function () { // open IIFE // inside IIFE }(); // close IIFE
JavaScript中的立即执行函数表达式介绍

我们习惯看到这样的匿名函数复制代码代码如下: (function(){ console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function) 发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些. 自执行函数有下面的这一些例
详解javascript立即执行函数表达式IIFE

一.IIFE解释全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 像如下的代码所示,就是一个匿名立即执行函数: (function(window, undefined){ // 代码... })(window); 二.括号的意义 2.1 包住function(){}的括号的意义这个括号的目的,是为了把function(){}转化为表达式.像一些库的源码,喜欢用如下方式代替: ~function(){ // 代码... }(); 或者这种方
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?

没有区别. 你需要明白 IIFE 的原理,我简单说一下: 复制代码代码如下: function foo() {...} // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo(); // 这是语句,Statement:解释器遇到语句是会运行它的. IIFE 并非必须,传统一点可以这么写: 复制代码代码如下: function foo() {...} foo(); 那么为什么要 IIFE? 1.传统的方法啰嗦,定义
js 在定义的时候立即执行的函数表达式(function)写法

1.前言函数需要先定义,后使用. 这基本上所有编程语言的一条铁的定律. 一般状况下, 我们需要调用一个JavaScript 函数, 基本的状况都是先定义, 然后再调用. 看一个例子复制代码代码如下:  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt
深入理解javascript中的立即执行函数(function(){…})()

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.
详解JS中的立即执行函数

1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形式必须是函数表达式,不能是函数声明 function(){alert(123);}(); VM265:1 Uncaught SyntaxError: Unexpected token 3.可以在函数前面加符号,或者用括号将
JS动态插入并立即执行回调函数的方法

本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
深入浅析javascript立即执行函数

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花; 当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. JavaScript 函数语法函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript
深入解析JavaScript中的立即执行函数

它是什么在 JavaScript 里,每个函数,当被调用时,都会创建一个新的执行上下文.因为在函数里定义的变量和函数是唯一在内部被访问的变量,而不是在外部被访问的变量,当调用函数时,函数提供的上下文提供了一个非常简单的方法创建私有变量. function makeCounter() { var i = 0; return function(){ console.log(++i); }; } //记住:`counter`和`counter2`都有他们自己的变量 `i` var counter =

JavaScript中立即执行函数实例详解

相关推荐

随机推荐