JavaScript function函数种类详解

本篇主要介绍普通函数、匿名函数、闭包函数

目录

  • 普通函数：介绍普通函数的特性：同名覆盖、arguments对象、默认返回值等。
  • 匿名函数：介绍匿名函数的特性：变量匿名函数、无名称匿名函数。
  • 闭包函数：介绍闭包函数的特性。

1. 普通函数
1.1 示例

function ShowName(name) {
  alert(name);
}

1.2 Js中同名函数的覆盖

在Js中函数是没有重载，定义相同函数名、不同参数签名的函数，后面的函数会覆盖前面的函数。调用时，只会调用后面的函数。

var n1 = 1;

function add(value1) {
  return n1 + 1;
}
alert(add(n1));//调用的是下面的函数，输出：3

function add(value1, value2) {
  return value1 + 2;
}
alert(add(n1));//输出：3

1.3 arguments对象

arguments 类似于C#的params，操作可变参数：传入函数的参数数量大于定义时的参数数量。

function showNames(name) {
  alert(name);//张三
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);//张三、李四、王五
  }
}
showNames('张三','李四','王五');

1.4 函数的默认返回值

若函数没有指明返回值，默认返回的是'undefined'

function showMsg() {
}
alert(showMsg());//输出：undefined
　　

2.匿名函数
2.1 变量匿名函数

2.1.1 说明
可以把函数赋值给变量、事件。

2.1.2 示例

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
  alert(p1+p2);
}
anonymousNormal(3,6);//输出9

2.1.3 适用场景
①避免函数名污染。若先声明个带名称的函数，再赋值给变量或事件，就造成了函数名的滥用。

2.2 无名称匿名函数

2.2.1 说明
即在函数声明时，在后面紧跟参数。Js语法解析此函数时，里面代码立即执行。

2.2.2 示例

(function (p1) {
  alert(p1);
})(1);

2.2.3 适用场景
①只需执行一次的。如浏览器加载完，只需要执行一次且后面不执行的功能。

3. 闭包函数
3.1 说明

假设，函数A内部声明了个函数B，函数B引用了函数B之外的变量，并且函数A的返回值为函数B的引用。那么函数B就是闭包函数。

3.2 示例

3.2.1 示例1：全局引用与局部引用

function funA() {
  var i = 0;
  function funB() { //闭包函数funB
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等

function partShowA() {
  var showa = funA();//局部变量引用：只输出1
  showa();
}

allShowA是个全局变量，引用了函数funA。重复运行allShowA()，会输出1,2,3,4等累加的值。

执行函数partShowA(),因为内部只声明了局部变量showa来引用funA，执行完毕后因作用域的关系，释放showa占用的资源。

闭包的关键就在于作用域：全局变量占有的资源只有当页面变换或浏览器关闭后才会释放。var allShowA = funA() 时，相当于allShowA引用了funB()，从而使funB()里的资源不被GC回收，因此funA()里的资源也不会。

3.2.2 示例2：有参闭包函数

function funA(arg1,arg2) {
  var i = 0;
  function funB(step) {
    i = i + step;
    alert(i)
  }
  return funB;
}
var allShowA = funA(2, 3); //调用的是funA arg1=2，arg2=3
allShowA(1);//调用的是funB step=1,输出 1
allShowA(3);//调用的是funB setp=3,输出 4

3.2.3 示例3：父函数funA内的变量共享

function funA() {
  var i = 0;
  function funB() {
    i++;
    alert(i)
  }
  allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA，allShowC在内部重新进行了绑定，与allShowB共享变量i

3.3 适用场景

①保证函数funA内里的变量安全，因为外部不能直接访问funA的变量。

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • 使用.NET中的Action及Func泛型委托深入剖析

    使用.NET中的Action及Func泛型委托深入剖析

    委托,在C#编程中占有极其重要的地位,委托可以将函数封装到委托对象中,并且多个委托可以合并为一个委托,委托对象则可以像普通对象一样被存储.传递,之后在任何时刻进行调用,因此,C#中函数回调机制的实现基本上依赖于委托.C#的delegate关键字用于声明委托,它具有将声明委托类型映射到System.Delegate类的能力,System.Delegate类位于mscorlib.dll中,是.NET的基础核心类之一.使用delegate关键字声明一个委托,实质上创建了System.Delegate的

  • js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?

    没有区别. 你需要明白 IIFE 的原理,我简单说一下: 复制代码 代码如下: function foo() {...}     // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo();                   // 这是语句,Statement:解释器遇到语句是会运行它的. IIFE 并非必须,传统一点可以这么写: 复制代码 代码如下: function foo() {...} foo(); 那么为什么要 IIFE? 1.传统的方法啰嗦,定义

  • jQuery中$(function() {});问题详解

    $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果你把script标签放到页面最后面那么就没问题了,此时和ready效果一样. $(document).ready(function(){})可以简写成$(function(){}); 点击段落后,此段落隐藏: <html> <head

  • SQL Function 自定义函数详解

    SQL Function 自定义函数详解

    目录 产生背景(已经有了存储过程,为什么还要使用自定义函数) 发展历史 构成 使用方法 适用范围 注意事项 疑问 内容 产生背景(已经有了存储过程,为什么还要使用自定义函数) 与存储过程的区别(存在的意义): 1.     能够在select等SQL语句中直接使用自定义函数,存储过程不行. 2.     自定义函数可以调用其他函数,也可以调用自己(递归) 3.     可以在表列和 CHECK 约束中使用自定义函数来实现特殊列或约束 4.       自定义函数不能有任何副作用.函数副作用是指对

  • PHP register_shutdown_function()函数的使用示例

    通过 register_shutdown_function 方法,可以让我们设置一个当执行关闭时可以被调用的另一个函数. 也就是说,当我们的脚本执行完成或者意外死掉导致 php 执行即将关闭时,我们的这个函数会被调用. [使用场景] ① 页面被(用户)强制停止 ② 程序代码意外终止或超时 ③ php4 中没有析构函数,可以使用该函数模拟析构函数 shutdown.php <?php header("content-type:text/html;charset=utf-8"); c

  • php实现表单多按钮提交action的处理方法

    表单内有两个提交按钮,要实现当点击不同的提交按钮时,分别进行两个不同的处理过程,在这里有实现表单多按钮提交action的处理方法分享给大家. 用PHP判断,一个表单两个按钮,按钮的name属性设为相同,但值设为不同,表单提交后,只需要判断提交上来的值就可以转到不同的处理过程去,这个方法比较合理,适合多个按钮在一个表单里. PHP方法,代码如下: <?php echo "$sub<br>\n"; if ("s1"==$sub) { ... } els

  • FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

    FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

    FloatingActionButton项目在github上的主页:https://github.com/futuresimple/android-floating-action-button FloatingActionButton使用简单,而且可以自定义颜色.大小.背景图片 项目构造: 下面是demo的代码(主要见sample): 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&

  • seajs加载jquery时提示$ is not a function该怎么解决

    jquery1.7以上的都支持模块化加载,只是jquery默认的是支持amd,不支持cmd.所以要用seajs加载jquery时,我们需要稍微做下改动,需要把以下内容做下修改,具体修改方式如下: 把 if (typeof define === "function" && (define.amd)) { define( "jquery", [], function() { return jQuery; }); } 改成 if (typeof defin

  • 动态设置form表单的action属性的值的简单方法

    用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at

  • 深入理解(function(){... })();

    1.他叫做立即运行的匿名函数(也叫立即调用函数) 2.当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!有木有很神奇哦~ 3.要使用一个函数,我们就得首先声明它的存在.而我们最常用的方式就是使用function语句来定义一个函数 4.Function 对象 Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象. 我们先看看,Function对象能不能直接运 用构造函数创建一个新的函数呢?答案是肯定的. var abc

  • JavaScript获取function所有参数名的方法

    我写了一个 JavaScript函数来解析函数的参数名称, 代码如下: function getArgs(func) { // 先用正则匹配,取得符合参数模式的字符串. // 第一个分组是这个: ([^)]*) 非右括号的任意字符 var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1]; // 用逗号来分隔参数(arguments string). return args.split(",").map(functi

  • 详解Python中的装饰器、闭包和functools的教程

    装饰器(Decorators) 装饰器是这样一种设计模式:如果一个类希望添加其他类的一些功能,而不希望通过继承或是直接修改源代码实现,那么可以使用装饰器模式.简单来说Python中的装饰器就是指某些函数或其他可调用对象,以函数或类作为可选输入参数,然后返回函数或类的形式.通过这个在Python2.6版本中被新加入的特性可以用来实现装饰器设计模式. 顺便提一句,在继续阅读之前,如果你对Python中的闭包(Closure)概念不清楚,请查看本文结尾后的附录,如果没有闭包的相关概念,很难恰当的理解P

  • 详解Func<T>与Action<T>区别

    Func<T>.Action<T> 的区别于说明 一.Func Func是一个.Net内置的委托. Func<Result>,Func<T1,Result>是一个.Net内置的泛型委托. Func<TResult> Func<T,TResult> Func<T1,T2,TResult> Func<T1,T2,T3,TResult> Func<T1,T2,T3,T4,TResult> 它有5种形式,只

  • javascript中$(function() {});写与不写有哪些区别

    javascript中$(function() {....}) 是 jQuery 中的经典用法,等同于 $(document).ready(function() {....}),即在页面加载完成后才执行某个函数,如果函数中要操作 DOM,在页面加载完成后再执行会更安全,所以在使用 jQuery 时这样的写法很常见. $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标

  • C#中Action和Func的区别

    本文实例分析了C#中Action和Func的区别,有助于读者牢固掌握并对其准确使用.具体分析如下: 先来看下面这段代码: //测试使用的公共值 int num = 10; //测试Func委托 Func<int, int> f; f = (int tempf) => { return tempf + 1; }; Response.Write(f(num).ToString()+"<br />"); //调用f委托,并打印相应的值! //测试Action委托

  • Android 广播大全 Intent Action 事件详解

    具体内容如下所示: Intent.ACTION_AIRPLANE_MODE_CHANGED; //关闭或打开飞行模式时的广播 Intent.ACTION_BATTERY_CHANGED; //充电状态,或者电池的电量发生变化 //电池的充电状态.电荷级别改变,不能通过组建声明接收这个广播,只有通过Context.registerReceiver()注册 Intent.ACTION_BATTERY_LOW; //表示电池电量低 Intent.ACTION_BATTERY_OKAY; //表示电池电

  • 详解在Java的Struts2框架中配置Action的方法

    在Struts2中Action部分,也就是Controller层采用了低侵入的方式.为什么这么说?这是因为在Struts2中action类并不需要继承任何的基类,或实现任何的接口,更没有与Servlet的API直接耦合.它通常更像一个普通的POJO(通常应该包含一个无参数的execute方法),而且可以在内容定义一系列的方法(无参方法),并可以通过配置的方式,把每一个方法都当作一个独立的action来使用,从而实现代码复用. 例如: package example; public class U

  • 用JS动态改变表单form里的action值属性的两种方法

    方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

  • Codeigniter框架的更新事务（transaction）BUG及解决方法

    由于ci事务判断出错回滚的条件是语句是否执行成功,而更新操作时,就算影响的条数为0,sql语句执行的结果过仍然为1,因为它执行成功了,只是影响的条数为0. 下面介绍解决这个问题的方法: 对于一次要执行许多的语句的事务 只需在更新操作下根据影响条数是否为0来决定是否会滚即可,下面假设第二条语句为更新操作. 复制代码 代码如下: //采用 Codeigniter 事务的手动模式     $this->db->trans_strict(FALSE);     $this->db->tra

  • Javascript自执行匿名函数(function() { })()的原理浅析

    函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hello'); })(); 这段代码的执行效果就是在页面再载入时弹出:"hello" 是什么促使它自动执行的?,来看下面的代码 // 在传统写法上去掉小括号,并在前面加上运算符 ~,!,+,- ~function(){

随机推荐