欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

在 javascript 中，"!function{}"是什么意思？

最编程 2024-04-09 16:41:46
...

转：zhidao.baidu.com/question/18…


自执行函知数

javascript中，

这种写法

function(){

//所需要执行的代码

}()

被称为"自执行函数"，好处是把所有变量都运行在函数内部，可以避免产生全局变量。

!隔绝上面代道码专的影响

而"!"的作用是使它和上面的代码隔绝，不会受到其影响。

例如

这2行代码

var a=1

function(){}()

在浏览器执行会属产生语法错误，因为浏览器解析代码的时候，把2行看做一个语句或表达式。

而加上感叹号就能正常执行

var a=1

!function(){}()


------------------------------------

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法，要理解立即执行函数，需要先理解一些函数的基本概念。

函数声明：

function fnName () {…};使用function关键字声明一个函数，再指定一个函数名，叫函数声明。

函数表达式：

var fnName = function () {…};

使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。

匿名函数：

function () {}; 

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

函数声明和函数表达式不同之处在于：

一、Javascript引擎在解析javascript代码时会‘函数声明提升'（Function declaration Hoisting）当前执行环境（作用域）上的函数声明。

而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式。

二、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用。

在function前面加！、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果，而（）、！、+、-、=等运算符，都将函数声明转换成函数表达式。

消除了javascript引擎识别函数表达式和函数声明的歧义，告诉javascript引擎这是一个函数表达式，不是函数声明，可以在后面加括号，并立即执行函数的代码。


扩展阅读

原文：https://blog.****.net/stpice/article/details/80586444 

1. (function(){}())与(function(){})()
这两种写法，都是一种立即执行函数的写法，即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。

通常的函数声明和调用分开的写法如下：

function foo() {/*...*/}     // 这是定义，Declaration；定义只是让解释器知道其存在，但是不会运行。 foo();                   // 这是语句，Statement；解释器遇到语句是会运行它的。


普通的函数声明function foo(){}是不会执行的。这里如果直接这样写function foo(){}()解释器会报错的，因为是错误的语法。
IIFE函数的调用方式通常是将函数表达式、它的调用操作符、分组操作符放到一个括号内，来告诉解释器这里有一个需要立即执行的函数。否则通常情况下，解析器遇到一个function关键字，都会把它当做是一个函数声明，而不是函数表达式。
如下几种写法都是可以的：

(function foo(){/*...*/}()); (function foo(){/*...*/})(); !function foo() {/*...*/}(); +function foo() {/*...*/}(); -function foo() {/*...*/}(); ~function foo() {/*...*/}();


在需要表达式的场景下，就不需要用括号括起来了：

void function(){/*...*/}(); var foo = function(){/*...*/}();  true && function () { /*...*/ }(); 0, function () { /*...*/ }();


void声明了不需要返回值，第二个则将IIFE函数的返回值赋给了foo。第三、第四个都是明确需要表达式的场景，所以解析器会认识这种写法。

对于IIFE函数，也可以给它们传入参数，例如：

(function foo(arg1,arg2,...){...}(param1,param2,...));


对于常见的(function($){...})(jQuery);即是将实参jQuery传入函数function($){}，通过形参$接收。
上述函数中，最开始的那个括号，可能会由于js中自动分号插入机制而引发问题。例如：

a  =  b  +  c ;（function  （） {   // code }）（）;


如果没有第二行的分号，那么该处有可能被解析为c()而开始执行。所以有的时候，可能会看到这样的写法：;(function foo(){/*...*/}())，前边的分号可以认为是防御型分号。

2. 第二类是$(function(){});
$(function(){/*...*/});是$(document).ready(function(){/*...*/})的简写形式，是在DOM加载完成后执行的回调函数，并且只会执行一次。

$( document ).ready(function() {   console.log( "ready!" );});


和

$(function() {   console.log( "ready!" );});


起到的效果完全一样。

在一个页面中不同的js中写的$(function(){/*...*/});函数，会根据js的排列顺序依次执行。
例如：
test.html

<!DOCTYPE html> <html> <head></head> <body>     <span>This page is shown to understand '$(document).ready()' in jQuery. <br /><span>     <p>         If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS...<br /><br />     </p>     <script src="http://code.jquery.com/jquery-latest.js"></script>     <script src="test1.js"></script>    <script src="test2.js"></script></body> </html>

test1.js

$(function(){    $(document.body).append("$(document).ready()1 is now been executed!!!<br /><br />"); });

test2.js

$(function(){    $(document.body).append("$(document).ready()2 is now been executed!!!<br /><br />"); });

最后可以看到页面输出如下：

This page is shown to understand '$(document).ready()' in jQuery. If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS... $(document).ready()1 is now been executed!!! $(document).ready()2 is now been executed!!!



上一篇： 提高大型语言模型 (LLM) 性能的四种数据清理技术--演示：清理 GAI 文本输入

下一篇： 谈谈 maven 的 pom.xml 中排除标记的作用

推荐阅读