1.匿名函数的常见场景

js中的匿名函数是一种很常见的函数类型,比较常见的场景:

  1.  
    <input type="button" value="点击" id="btn">
  2.  
    <script type="text/javascript">
  3.  
    //匿名函数的第一种情形
  4.  
    var btn=document.querySelector("#btn");
  5.  
    btn.onclick=function(){
  6.  
    // alert("aaaaa");
  7.  
    }
  8.  
    //匿名函数的第二种情形
  9.  
    setInterval(function(){
  10.  
    // alert("bbbbb");
  11.  
    }, 1000);
  12.  
    //匿名函数的第三种情形
  13.  
    var fun=function(){
  14.  
    alert("ccccc");
  15.  
    }
  16.  
    // fun();
  17.  
    //匿名函数的第四种情形
  18.  
    var obj={
  19.  
    name:"dddd",
  20.  
    say:function(){
  21.  
    alert(this.name);
  22.  
    }
  23.  
    }
  24.  
    obj.say();
  25.  
    </script>

上面展示的就是常见的匿名函数的使用场景。(注意:querySelector是H5中新增的查找dom元素的方法)

2.匿名自执行函数

见名思义,匿名自执行函数首先是一个匿名函数,但是这个函数是可以自己自动执行的,不需要借助其他的元素。
  1.  
    <input type="button" value="点击" id="btn">
  2.  
    <script type="text/javascript">
  3.  
    //1,匿名函数的第一种实现方式
  4.  
    (function(data){
  5.  
    // alert(data);
  6.  
    })("eee");
  7.  
    //2.匿名自执行函数的第二种实现方式
  8.  
    (function(){
  9.  
    // alert("fff");
  10.  
    }());
  11.  
    //3.匿名自执行函数的第三种实现方式
  12.  
    !function(data){
  13.  
    // alert(data);
  14.  
    }("hhh");
  15.  
    //4.匿名自执行函数的第四种实现方式
  16.  
    var fun=function(data){
  17.  
    alert(data);
  18.  
    }("iii");
从上面的代码块中我们可以总结出实现匿名自执行函数的方法一般有四种。

3.匿名自执行函数的作用

1.匿名自执行函数最常见的作用是用于实现闭包的情况中。关于闭包的概念我会在后面的博客中详细介绍。这里简单说明一下闭包。闭包:闭包是js的一种特性,我们可以通过闭包实现函数内外部的连接,并且可以使得函数的局部变量始终存在于内存中。
 
2.匿名自执行函数还可以用于在js中模拟创建块级作用域,即如果使用匿名自执行函数将某些代码包裹起来可以实现块级作用域的效果,减少全局变量的数量,在匿名自执行函数执行结束后变量就会被内存释放掉,从而也会节省了内存。
 

4,匿名函数和匿名自执行函数总结

匿名函数可以简单理解为没有名字的函数,常见的场景一共就有4种。
匿名自执行函数可以简单理解为可以自己执行的匿名函数,实现匿名自执行函数的方式一共有4种。
匿名自执行函数的作用就是用于闭包和创建独立的命名空间两个方面。

js中的匿名函数和匿名自执行函数的更多相关文章

  1. js进阶js中支持正则的四个常用字符串函数(search march replace split)

    js进阶js中支持正则的四个常用字符串函数(search march replace split) 一.总结 代码中详细四个函数的用法 search march replace split 二.js进 ...

  2. js中使用function定义类、实例化,函数的调用方法

    function Test002(name, age){ name, age, this.printInfo = function(){ //定义的公有方法 console.log(name, age ...

  3. JS中var声明与function声明两种函数声明方式的区别

    JS中常见的两种函数声明(statement)方式有这两种: // 函数表达式(function expression) var h = function() { // h } // 函数声明(fun ...

  4. js中函数表达式和自执行函数表达式的用法总结

    立即调用函数表达式 给函数体加大括号,在有变量声明的情形下,没有任何区别 但是,如果只是[自动执行]的情形下,就会不同 因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的 //以下情形并无 ...

  5. 在js中获取query string 以及重写URL的函数

    函数用途:如标题.1. 从URL中解析出參数,2.重写URL中的參数值 例如以下代码所看到的.包括了測试.能够直接copy到浏览器中,输入測试地址:localhost:xxx?a=1&b=2& ...

  6. JS中有关分支结构、循环结构以及函数应用的一些简单练习

    案例一:搬桌子    年龄大于七岁男女都可以搬桌子,年龄小于七岁大于五岁的男生可以搬桌子: var num =parseInt(prompt("请输入你的年龄")) var sex ...

  7. jquery中ready函数,$(function(){})与自执行函数的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. koa-graphql express-graphql 中如何 定义每一个字段resolver执行函数

    第一种方式:  首先来看一下,官方给出的koa-graphql的例子, ```js var express = require('express'); var {graphqlHTTP} = requ ...

  9. js中try、catch、finally的执行规则

    首先一个常识就是,在浏览器执行JS脚本过程中,当出现脚本错误,并且你没有手动进行异常捕捉时,他会在浏览器下面出现黄色的叹号,这是正常的,这也不是最重要的,最重要的是,出错行以下的所有JS代码将中停执行 ...

  10. js中变量名加“-” new Vue()不执行

    如var app-1 = new Vue(): 不执行的 var app1 = new Vue(): 才能执行

随机推荐

  1. spring boot 拦截器之WebMvcConfigurerAdapter

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   上一篇我们讲到了拦截器,我们也简单的讲解到了WebMvcConfigurerAdapter这个拦截器.本篇我们来对Web ...

  2. imx6 qt 24bpp RGB

    imx6运行qt,在24bit的LVDS接口屏上显示时,显示效果与实际的不同.蓝色变成了黄色. 本来应该显示成蓝色: 实际上去显示成了黄色: 而其他绿色的图标并没有改变,只是蓝色和黄色互换了. 猜想应 ...

  3. 介绍Unity中相机的投影矩阵与剪切图像、投影概念

    这篇作为上一篇的补充介绍,主要讲Unity里面的投影矩阵的问题: 上篇的链接写给VR手游开发小白的教程:(三)UnityVR插件CardboardSDKForUnity解析(二) 关于Unity中的C ...

  4. 10个最佳的触控手式的JavaScript框架(转)

    由于各种原因移动开发是一项艰难的工作,比如它是非常耗时的.充满压力的任务.最重要的是,作为一个开发人员,你必须保持更新所有最新 的技术和技巧——你必须知道所有最新的趋势,问题和解决方案等.例如跨浏览器 ...

  5. OpenGL介绍

    OpenGL是一个开放的三维图形软件包,它独立于窗口系统和操作系统,以它为基础开发的应用程序可以十分方便地在各种平台间移植:OpenGL可以与Visual C++紧密接口,便于实现机械手的有关计算和图 ...

  6. Unity3D - 详解Quaternion类(二)

    OK,不做引子了,接上篇Unity3D - 详解Quaternion类(一)走起! 四.Quaternion类静态方法 Quaternion中的静态方法有9个即:Angle方法.Dot方法.Euler ...

  7. el表达式取值优先级

    不同容器中存在同名值时,从作用范围小到大的顺序依次尝试取值:pageContext->request->session->application

  8. 很好的hadoop学习博客实际操作训练(旧版本)

    实际操作 http://www.cnblogs.com/xia520pi/archive/2012/05/16/2504205.html 流程解析 http://www.cnblogs.com/spo ...

  9. 你真的了解HTML吗?–雅虎面试题

    http://helloweb.wang/jingyan~jiqiao/589.html

  10. org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Can

    org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Can ...