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 new fun的执行过程
Aug 05 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 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弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
js不是基础的基础
2006/12/24 Javascript
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
javascript打印输出json实例
2013/11/11 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
使用Python制作微信跳一跳辅助
2018/01/31 Python
详解python中的装饰器
2018/07/10 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
元旦晚会感言
2014/03/12 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL