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 相关文章推荐
正则表达式语法
Oct 09 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
javascript中setInterval的用法
Jul 19 Javascript
js友好的时间返回函数
Aug 24 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
爬虫利器Puppeteer实战
Jan 09 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/11/16 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
JS执行删除前的判断代码
2014/02/18 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python常用列表数据结构小结
2014/08/06 Python
Python中Collection的使用小技巧
2014/08/18 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
人力资源经理的岗位职责
2014/03/02 职场文书
个人贷款担保书
2014/04/01 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
奖学金感谢信
2015/01/21 职场文书
python实现图片批量压缩
2021/04/24 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS