javascript 中”!function(){}()“是什么意思? |
您所在的位置:网站首页 › fun,是什么意思 › javascript 中”!function(){}()“是什么意思? |
转: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.csdn.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 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... test1.js $(function(){ $(document.body).append("$(document).ready()1 is now been executed!!!"); });test2.js $(function(){ $(document.body).append("$(document).ready()2 is now been executed!!!"); });最后可以看到页面输出如下: 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!!! |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |