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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
js尾调用优化的实现
May 23 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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 中dirname(_file_)讲解
2007/03/18 PHP
php的ddos攻击解决方法
2015/01/08 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
使用js 设置url参数
2013/07/08 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
学习jQuey中的return false
2015/12/18 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python如何判断IP地址合法性
2020/04/05 Python
C++面试题目
2013/06/25 面试题
《一个小村庄的故事》教学反思
2014/04/13 职场文书
机械专业求职信范文
2014/07/15 职场文书
青年志愿者活动方案
2014/08/17 职场文书
Redis 常见使用场景
2021/08/30 Redis