小程序制作流程_JavaScript中当即执行函数实例详解

发布时间:2021-01-11 13:14 作者:jianzhan

摘要: JavaScript保持中立即实行涵数案例详细说明 javascript和别的程序编写語言对比较为随便,因此javascript编码中填满各种各样奇怪的书写,有时候镜中花水中月,自然,能了解各型各色

JavaScript中立即执行函数实例详解       javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料,需要的朋友可以参考下。

前言

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

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

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

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

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

//一个命名为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作为参数传入该函数,那么在函数内部使用形参$的时候就不会影响到外部环境,因为有些插件也会用到$这个限定符,你在这个函数内部可以随意折腾。

以上,在此过程中参考了以下两篇文章:


总结

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


  • 手机html网页和电脑上的

    不便在专用工具、编码等层面详尽表明,感谢!在专用型专用工具上,手机上上版网页页面网页页面和电脑上上版网页页面网页页面没有什么区别,可以根据本身的喜好。我是钟爱用D

  • 企业建设网站要注重哪些

    在当下这一互联网的阶段,大伙儿早就习惯性性性的从在网络上得到信息内容內容,并且查寻信息内容內容的真实性的难题,因此未来追处时期的发展趋势发展趋势,很多的企业都一开

  • 网页设计中的小问题?

    院校网站要新开业一个版块,必须在上边设计方案一个网页页面,这一必须如何做?便是在原来网站在开展阿里云域名页的创建,我是第一次触碰,有点儿不明白。由于目前所闻即本人

  • 有哪些好的专门研究网页

    我之前在 果核随意门 上见到过一个专业科学研究网页页面颜色的网站十分非常好,可是忘记了加便签了,,如今试着找了好长时间未能再寻找,期待有了解的帮个忙强烈推荐一下,谢了

  • web应用使用jsp还是html做前

    引进较为不便。 2、假如应用jsp,jsp中置入java编码,则前后左右台不可以彻底分离出来,网页页面较为错乱 大家一般如何均衡利与弊,求出惑你务必把握以下客观性客观事实:html网页页