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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue生命周期实例小结
Aug 15 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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
我的论坛源代码(九)
2006/10/09 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
numpy中的高维数组转置实例
2018/04/17 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python机器学习之KNN分类算法
2018/08/29 Python
python软件都是免费的吗
2020/06/18 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
就业表自我评价分享
2014/02/06 职场文书
大学信息公开实施方案
2014/03/09 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
保卫工作个人总结
2015/03/03 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers