JavaScript中的Function函数


Posted in Javascript onAugust 27, 2015

首先给大家介绍JavaScript中function定义函数的几种方法:

1.最基本的作为一个本本分分的函数声明使用。

function func(){}


var func=function(){};

2.作为一个类构造器使用:

function class(){}
class.prototype={};
var item=new class();

3.作为闭包使用:

(function(){
//独立作用域
})();

4.可以作为选择器使用:

var addEvent=new function(){
if(!-[1,]) return function(elem,type,func){attachEvent(elem,'on'+type,func);};
else return function(elem,type,func){addEventListener(elem,type,func,false);}
};//避免了重复判断

5.以上四中情况的混合应用:

var class=new function(){
var privateArg;//静态私有变量
function privateMethod=function(){};//静态私有方法
return function(){/*真正的构造器*

JavaScript function函数种类:主要介绍普通函数、匿名函数、闭包函数

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的变量。

以上内容就是本文给大家介绍js中的function函数,希望大家喜欢。

Javascript 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
javascript中判断json的方法总结
Aug 27 #Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 #Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 #Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 #Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 #Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 #Javascript
You might like
php下实现折线图效果的代码
2007/04/28 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python实现socket端口重定向示例
2014/02/10 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python 变量初始化空列表的例子
2019/11/28 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
学生党支部先进事迹
2014/02/04 职场文书
法人授权委托书
2014/04/03 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
应届大学生求职信
2014/07/20 职场文书
课程设计的心得体会
2014/09/03 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
Docker官方工具docker-registry案例演示
2022/04/13 Servers