JS中的立即执行函数

JS 立即执行函数可以让函数在创建后立即执行，这种模式本质上就是函数表达式(命名的或者匿名的)，在创建后立即执行。

1、立即执行函数的写法

立即执行函数通常有下面两种写法：

(function(){ ...
})();(function(){ ...
}());//错误的写法
function (){ ...
}();　　　　//报错： Uncaught SyntaxError: Unexpected token (

第三种写法报错的原因是，Javascript引擎看到function关键字之后，认为后面跟的是函数定义语句，而在一条语句后面加上() 会被当做分组操作符，分组操作符里必须要有表达式，所以这里报错，不应该以圆括号结尾。以圆括号开头，引擎就会认为后面跟的是一个表示式，而不是函数定义，所以就避免了错误。

让Javascript引擎认为这是一个表达式的方法还有很多：

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

2、立即执行函数的作用

立即执行函数只有一个作用：创建一个独立的作用域。这个作用域里面的变量，外面访问不到（即避免了「变量污染」）。

面试题：

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){liList[i].onclick = function(){alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
  }
}

因为输出的 i 是全局作用域的，当循环结束后 i 的值是 6，所以输出的 i 就是6。

用立即执行函数给每个 li 创造一个独立作用域即可，此时 i 无法被循环改变，因为 i 是在独立的作用域里，外面无法访问到。

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){!function(j){liList[j].onclick = function(){alert(j) // 0、1、2、3、4、5
    }}(i)
}

转载于:https://www.cnblogs.com/wenxuehai/p/10357274.html

JS中的立即执行函数相关推荐

js中(function(){…})()立即执行函数写法理解
js中(function(){-})()立即执行函数写法理解 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
main.js中封装全局登录函数
main.js中封装全局登录函数 1. 在 main.js 中封装全局登录函数通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. ...
JavaScript中的立即执行函数
原文链接通常我们声明一个函数有以下几种方式: // 声明函数f1 function f1() {console.log("f1"); } // 通过()来调用此函数 f1();/ ...
原生js已载入就执行函数_手写CommonJS 中的 require函数
前言来自于圣松大佬的文章<手写CommonJS 中的 require函数> 什么是 CommonJS ? node.js 的应用采用的commonjs模块规范. 每一个文件就是一个模块, ...
js中自己实现bind函数的方式
前言最近由于工作比较忙,好久都没时间静下心来研究一些东西了.今天在研究 call 和 apply 的区别的时候,看到 github 上面的一篇文章,看完以后,感觉启发很大. 文章链接为 https: ...
js中的对象、函数定义以及形参和实参
一.对象属性的两种写法 1.点语法点语法的属性值不加双引号,运用时不能使用变量 2.中括号的写法 (1)中括号写法obj["key"]=value;必须有双引号,原因是在key这 ...
JavaScript中的自执行函数和闭包实现过程
在JS中,也常常需要复用,将一些常见的操作封装起来,目前看到的很多JS库,比如JQuery就是非常典型的,那么如何在JS中写一个可复用的呢?虽然在JS中有类的这个说法,但是我对这个玩意还是很抵触的,但 ...
深入理解javascript中的立即执行函数(function(){…})()
2019独角兽企业重金招聘Python工程师标准>>> javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各 ...
js中构造函数与普通函数的区别
构造函数不仅只出现在JavaScript中,它同样存在于很多主流的程序语言里,比如c++.Java.PHP等等.与这些主流程序语言一样,构造函数在js中的作业一样,也是用来创建对象时初始化对象,并且总 ...

JS中的立即执行函数

1、立即执行函数的写法

2、立即执行函数的作用

JS中的立即执行函数相关推荐

最新文章

热门文章