JS函数(自调函数)与闭包【高级函数】
JavaScript:BOM(浏览器对象)+DOM(文档对象)+ECMAScript
javascript面向对象:
* 概述:
* 发展:
* 互联网发展对浏览器页面性能或效果要求越来越高,HTML(XHTML\DHTML)及javascript等技术发展.
* 行业标准发展,推动javascript的要求越来越高.
* 工作内容:
* 对客户端逻辑处理越来越高.
* 概念:
* 面向对象:这个人就是对象,年龄、性别、学历等叫做属性,出生、上学、结婚等叫做方法(函数).
* 类、对象、继承、重载、重写等.
* 类:例如女生就是一个类.
* 对象:例如范冰冰就是一个对象.
* 面向过程:这个人出生、长大、上学、功能、结婚、生子、去世.
* 注意:javascript是不存在类的概念.
* 开发工具:
* MyEclipse或Eclispe都需要掌握.
* WebStrom:在国内,号称是前端开发神器.
------------------------------------- 函数:------------------------------
* 定义函数的三种方式:
* function 函数名(){}
* var 函数名 = function(){}
* var 函数名 = new Function();
* Arguments对象:
* 模拟函数的重载效果.
arguments代表的是实参对象
<script type="text/javascript">
function add() {
if(arguments.length==2){
return arguments[0]+arguments[1];
}
if(arguments.length==3){
return arguments[0]+arguments[1]+arguments[2];
}
}
alert(add(1,2)); //3
alert(add(1,2,3));//6
</script>
* 特性:
* Arguments对象内部应该是一个数组结构.
* Arguments对象的length属性:可以获取当前函数的实参个数.
* 变量的作用域:
* 分类:
* 全局域 - 全局变量
* 局部域(函数域) - 局部变量
* 特殊情况:
* 定义局部变量时,不使用"var":局部变量自动被定义为全局变量.
* 全局变量与局部变量同名时:在函数域中只能访问局部变量.
第一种情况:
函数内部访问全局变量
<script type="text/javascript">
var a='a';
function test() {
alert(a);//a
}
alert(a);//a
test();
</script>
第二种情况:
全局变量与局部变量同名时:在函数域中只能访问局部变量.
<script type="text/javascript">
var a='a';
function test() {
alert(a);//undefined 局部变量
var a='b';
alert(a);// b
}
alert(a);//a
test();
</script>
第三种情况:
定义局部变量时,不使用"var":局部变量自动被定义为全局变量.
<script type="text/javascript">
var a='a';
function test() {
alert(a);//a 全局变量
a='b';
alert(a);// b
}
alert(a);//a
test();
</script>
第四种情况:
提示undefined:存在变量，值为空(类似于java的只定义未初始化)
报错未定义:不存在变量
<script type="text/javascript">
var c;
alert(c) ;//提示undefinde(弹出框)
alert(d);//报错未定义(不弹出，报错)
</script>
第五种情况:方法内部改变全局变量值
<script>
var a;
(
function(){
a="222";
alert("改变a的值为222")
}
)();
alert(a);//222
</script>
* 特殊函数:
* 匿名函数:没有名的函数
* 将匿名函数作为参数传递给另一个函数.
* 利用匿名函数来执行一次性任务.
第一种:
将匿名函数作为参数传递给另一个函数.
<script type="text/javascript">
var one=function(){return 1;}
var two=function(){return 2;}
function add(a,b){
alert (a()+b());//加括号的作用是加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将 括号内的表达式（expression）转化为对象，而不是作为语 句（statement）来执行
}
// add(one,two);//相当于传一个变量
add(function(){return 1;},function(){return 2;});//与上面一句等价
</script>
第二种
利用匿名函数来执行一次性任务.(自调函数)
上面只是手动的设置调用函数一次，可以被重复调用，为了希望函数只被调用一次，可以用自调函数。(页面加载后执行一次，不可以被重复调用)
自调函数(自己调用自己，只能执行一次，重要)
<script type="text/javascript"> ( function (a,b) { alert(a+""+b) } )('1','2'); </script>
* 回调函数:
* 匿名回调函数
* 自调函数
* 第一个小括号:定义函数
* 第二个小括号:调用函数(传参)
* 内部函数(私有函数)
* 在一个函数中,定义另一个函数.
* 类似于Java中的内部类.
解决当前特定需求，代码安全性
* 返回函数的函数:内部函数的一种特殊用法.
/** * 内部函数 * 返回函数的函数(内部函数的特殊用法) */ function fn(){ var a='a'; return function n(){ var b='b'; return a+b; } } var fun = fn(); alert(fun);//function n(){var b='b'; return a+b; } alert(fun());//ab alert(fn()());//ab
平行函数可以通过内部函数访问到其局部变量，先获取到n(),再通过n()获取。
* 预定义函数(全局对象):
* escape()函数:将字符串内容进行转义.
* eval()函数:将字符串内容进行转义.
* Number()函数:将字符串内容转换成数字,多与isNaN()函数配合使用.
* parseFloat()或parseInt()函数
* String()函数
(function test() { var name = "乔治"; var fun="alert('s')" var fun1 = "function(){alert('wwww')}"; alert(escape(name));//%u4E54%u6CBB eval(fun);//弹出s alert(eval('('+fun1+')'));//function(){alert('wwww')} eval('('+fun1+')')();//wwww(加圆括号是加上圆括号的目的是迫使eval在处理JavaScript代码的时候强制将 括号内的表达式（expression）转化为对象，而不是作为语 句（statement）来执行。) //第二个圆括号是调用函数 var URI = "http://qiaozhi.cn?name=乔治"; alert(encodeURI(URI));//http://qiaozhi.cn?name=%E4%B9%94%E6%B2%BB alert(decodeURI(URI));//http://qiaozhi.cn?name=乔治 })();
-------------------------------- 闭包--------------------------
是不是闭包条件:
(1)全局域中访问局部函数n()——其上一层函数为fn()
(2)函数n()可以访问fn()变量
(3)函数fn中的局部变量位置不能改变
* 闭包的概念,在目前阶段极其重要.闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。
*闭包的两个重要作用:一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
* 对象:
* 原型:
* 原型的应用,在目前阶段及其重要.
* 继承:
1.函数的作用链:变量的作用域具有传递性
var a='a'; function fn() { var b='b'; alert(a);//a alert(b);//b function n() { var c='c'; alert(a);//a alert(b);//b alert(c);//c } n(); } fn();
2.闭包:(作用是降低函数之间的耦合性，类似于java中的解耦——继承，接口)
/** * 闭包 */ var a='a'; var n; function fn() { var b='b'; alert(a);//a alert(b);//b n=function() { var c = 'c'; alert(a);//a alert(b);//b alert(c);//c } } fn(); n();
3.循环中闭包:
/** * 循环中闭包 */ function f() { var a=[]; var i; for(i=0;i<3;i++){ a[i]=function(){ return i; } } return a; } var fun=f(); alert(fun[0]());//3 alert(fun[1]());//3 alert(fun[2]());//3
4.利用闭包实现getter,setter(页面初始化执行一个函数给变量赋值)
/** * getter,setter */ var getvalue,setvalue; ( function f() { var secret=0; getvalue=function () { return secret; } setvalue=function (x) { secret=x; } } )(); alert(getvalue());//0 setvalue(123); alert(getvalue());//123
5.利用闭包让局部变量保存在内存中
function f1(){ var n=999; //nAdd是一个没有使用var声明的全局变量，这个变量现在指向了在f1函数内部声明的一个匿名函数 nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1();//result就是f2函数 result();//第一次调用result函数 999 nAdd();//nAdd代表的就是在f1函数内部声明的一个匿名函数，nAdd()就是在调用匿名函数 result();//第二次调用result函数 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
6.使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
最后附几个自己写的简单的闭包:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*第一个简单的闭包案例*/
var inner="";
function out(){
a='aaaa';
inner=function () {
return a;
}
}
out();
alert(inner());
/*由于不写var默认是全局变量，因此可以将上面代码改造为下面*/
function out_1(){
a='bibao2';
inner_1=function () {
return a;
}
}
out_1();
alert(inner_1());
/*闭包3*/
function f1(){
var n=999;
//nAdd是一个没有使用var声明的全局变量，这个变量现在指向了在f1函数内部声明的一个匿名函数
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();//result就是f2函数
result();//第一次调用result函数 999
nAdd();//nAdd代表的就是在f1函数内部声明的一个匿名函数，nAdd()就是在调用匿名函数
result();//第二次调用result函数 1000
</script>
</body>
</html>
参考:http://www.cnblogs.com/xdp-gacl/p/3703876.html
补充:JS自调函数的几种写法:
(function(name) { alert(name) })("xxx");
(function(name) { alert(name) }("xxx"));
