js中的立即执行函数的写法,立即执行函数作用是什么?

更新日期: 2018-05-29阅读量: 3344标签: 函数

js立即执行函数是什么?

就是指:声明一个匿名函数,而且该匿名函数会被马上调用。


js使用立即执行函数有什么作用呢?

立即执行函数会创建一个独立作用域, 该作用域的变量外部是无法访问的。立即执行函数主要是为了防止环境污染(也就是说避免变量污染)。在es6中提供了let,使用let声明的变量是块级作用域局部变量。

以一个著名的面试题为例:

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
  }
}

为什么 alert 的总是 6 呢,因为 i 是贯穿整个作用域的,而不是给每个 li 分配了一个 i,那么怎么解决这个问题呢?用立即执行函数给每个 li 创造一个独立作用域即可(当然还有其他办法):

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)
}

在立即执行函数执行的时候,i 的值被赋值给 j,此后 j的值一直不变。i 的值从 0 变化到 5,对应 6 个立即执行函数,这 6 个立即执行函数里面的 j 「分别」是 0、1、2、3、4、5


js立即执行函数的写法有哪些?

1、使用()运算符方式一:

(function(val) {
  console.log(val);  //使用()运算符
})('fly63.com');


2、使用()运算符方式二:

(function(val) {
  console.log(val);  //使用()运算符
}('fly63.com'));


3、使用!运算符:  

!function(val) {
  console.log(val);  //使用!运算符
}('fly63.com');


4、使用+运算符:  

+function(val) {
  console.log(val);  //使用+运算符
}('fly63.com');


5、使用+运算符:    

-function(val) {
  console.log(val);  //使用-运算符
}('fly63.com');


6、使用=运算符:     

var fn = function(val) {
  console.log(val);  //使用=运算符
}('fly63.com');

备注:这里的fn其实打印会发现:其值是undefined哦!


7、其它方式

~function(){
    console.log('fly63.com')
}();

void function(){
    console.log('fly63.com')
}();

new function(){
    console.log('fly63.com')
}();

[ function() {
 console.log('fly63.com')
}() ];

delete function() {
  console.log('fly63.com')
}();

typeof function() {
   console.log('fly63.com')
}();


1, function() {
  console.log('fly63.com')
}();

1 ^ function() {
  console.log('fly63.com')
}();

1 > function() {
   console.log('fly63.com')
}();


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/835

javascript封装函数

使用函数有两步:1、定义函数,又叫声明函数, 封装函数。2、调用函数var 变量 = 函数名(实参);对函数的参数和返回值的理解

用原生Js实现Jquery函数方法

在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作

JavaScript全局属性和全局函数

调用上面的全局函数而不是全局方法的属性是有意义的,因为函数是全局调用的,而不是任何对象。 无论如何,您也可以调用这些函数方法,因为它们是运行它们的全局对象的方法。在web浏览器中,全局对象是浏览器窗口

JavaScript高阶函数

Javascript中的函数本质上都指向某个变量,既然变量可以指向函数,函数的参数可以接受变量,那么函数是不是可以可以作为另一个函数的入参?因为Javascript是一门弱类型语言,不会对函数输入值和函数的输出值进行强定义和类型检查

Javascript之尾调用

尾调用是函数式编程的一个重要的概念,本篇文章就来学习下尾调用相关的知识。有说过在一个函数中输出一个函数,则这个函数可以被成为高阶函数。本文的主角尾调用和它类似,如果一个函数返回的是另一个函数的调用结果,那么就被称为尾调用。

什么是函数的副作用——理解js编程中函数的副作用

函数副作用是指当调用函数时,除了返回函数值之外,还对主调用函数产生附加的影响。副作用的函数不仅仅只是返回了一个值,而且还做了其他的事情

JS ES6中的箭头函数(Arrow Functions)使用

ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。typeof运算符和普通的function一样,instanceof也返回true,表明也是Function的实例

JS高阶编程技巧--惰性函数

在vue、react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListener(),因为兼容性,还有:

a标签调用js函数写法总结

这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

javascript中的回调函数

回调函数是每个 JS 开发人员都应该知道的概念之一。 回调用于数组,计时器函数,promise,事件处理程序等中。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!