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 参考教程
Dec 29 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
JavaScript如何判断对象有某属性
Jul 03 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Django logging配置及使用详解
2019/07/23 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
初三物理教学反思
2014/01/21 职场文书
法律顾问服务方案
2014/05/15 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
python基础之while循环语句的使用
2021/04/20 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python