一、匿名函数
1、匿名函数:没有声明函数名的函数叫做匿名函数。
// 普通函数
function demo(){
return "bert";
}
alert(demo());
// 匿名函数
function(){ //单独的匿名函数无法运行,就算可运行也无法调用
return "bert";
}
2、单一的匿名函数的执行方法
(1)把匿名函数赋值给变量,通过变量打印返回值
var demo=function(){
return "bert";
};
alert(demo());
(2)不额外用变量时,可通过自我执行来执行匿名函数
(function(){
alert("bert");//(匿名函数)();第一个圆括号放匿名函数,第二个圆括号执行
})();
(3)自我执行后用alert()打印,同上效果不同表达而已
alert((function(){
return "bert";
})());
(4)自我执行匿名函数的传参
(function(age){
alert(age);
})(100);
二、闭包
闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见的方式,就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量。也就是说,一个函数里又有一个函数就是闭包。
function demo(){
return function(){
return "bert";
};
}
var result=demo();
alert(result());
使用闭包有一个优点就是通过闭包返回局部变量,这可以把局部变量驻留在内存中,可以避免使用全局变量。(全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难,所以使用私有的,封装的局部变量更佳)。
譬如,进行累加操作,全局变量可以完成但是会有全局变量污染的危险,那使用局部变量则无法完成,但通过闭包却可以实现局部变量的累加。
// 使用全局变量进行累加
var age=100;
function demo(){
age++;
}
alert(age);
demo();
alert(age);
// 通过局部变量无法实现累加
function demo(){
var age=20;
age++;
return age;
}
alert(demo());
alert(demo());
// 通过闭包可以实现局部变量的累加
function demo(){
var age=20;
return function(){
age++;
return age;
};
}
var result=demo();
alert(result());
alert(result());
但是由于闭包里作用域返回的局部变量资源不会被立刻销毁回收,所以可能会占用更多的内存。过度使用闭包会导致性能下降,因此要在非常有必要的时候才使用闭包。
三、数组中的闭包
1、通过一个例子,顺序输出0-4,来查看循环中匿名函数的问题。
(1)作用域链的机制导致一个问题,在循环中里的匿名函数取得的任何变量都是最后一个值。
function demo(){
var arr=[];
for(var i=0;i<5;i++){
arr[i]=function(){
return i;
}
}
return arr;
}
var result=demo();
for(var i=0;i<5;i++){
alert(result[i]()); //返回五次结果都是5
}
因为 result [ i ] 调用的是匿名函数,匿名函数并没有自我执行,等到调用的时候,demo() 已执行完毕,i早已变成5,所以最终的结果就是5个5。
(2)上述代码抽离匿名函数的原型,给arr[i] 赋值的匿名函数抽象为 i,所得到的效果就是0,1,2,3,4顺序弹出,
function demo(){
var arr=[];
for(var i=0;i<5;i++){
arr[i]=i;
}
return arr;
}
var result=demo();
for(var i=0;i<5;i++){
alert(result[i]);
}
(3)然而很多时候 arr[i]=i 中 i 很多情况下都会是匿名函数,其中放很多程序,但又要解决最终返回的结果都是相同的5,就需要通过自我及时执行匿名函数,
function demo(){
var arr=[];
for(var i=0;i<5;i++){
arr[i]=(function(num){ //通过自我及时执行匿名函数
return num;
})(i); //传参
}
return arr;
}
var result=demo();
for(var i=0;i<5;i++){
alert(result[i]);
}
(4)上述代码已经解决了问题,但仍可以优化,在匿名函数的返回中再增一个匿名函数,将匿名函数内变量可以储存在内存中像全局变量一样,
function demo(){
var arr=[];
for(var i=0;i<5;i++){
arr[i]=(function(num){
return function(){ //又增加一个匿名函数
return num;
}
})(i);
}
return arr;
}
var result=demo();
for(var i=0;i<5;i++){
alert(result[i]());
}
2、this对象指向问题
this对象是在运行时基于函数的执行环境绑定的,如果this在全局范围就是window,如果在对象内部就指向这个对象。而闭包却在运行时却是指向window的,因为闭包并不属于这个对象的属性或方法。
var myVar="The Window"; //定义一个全局变量
var demo={
myVar:"The function", //定义一个局部变量
getPoint:function(){ //定义一个方法,方法的返回值是用匿名函数所包裹的
return function(){
return this.myVar; //闭包中的this指向的myVar已经不是demo中的myVar了
}
}
};
alert(demo.getPoint()()); //返回结果The Window
而如果想要闭包中的this指向内部的myVar,可以通过对象冒充的方法一,
alert(demo.getPoint().call(demo)); //返回结果The function
亦可以用改变闭包的作用域链上不同地方this的指向,方式二,
var myVar="The Window";
var demo={
myVar:"The function",
getPoint:function(){ //这里的作用域的this为demo
var that=this;
return function(){ //这里的作用域的this为window
return that.myVar;
}
}
};
alert(demo.getPoint()());
四、对象中的闭包
1、私有作用域
面向对象的语言中大都有私有作用域(块级作用域)的概念,譬如有两个for语句,里面循环变量都是i,第1个for语句执行完并不妨碍第2个for语句的执行,因为里面的 i 都处于不同的私有作用域,但是JS中没有块级作用域的概念。
function count(num){
for(var i=0;i<num;i++){}
alert(i);
}
count(5); //返回结果5,i不会因为离开了for语句块就失效了,这就证明了JS中没有块级作用域
所以可以模仿块级作用域,如此可将很多例如if语句,for语句这样的块级语句,封装起来,把里面的变量私有化,私有化可以保护数据,防止数据泄露,封装细节,安全性和可控性更高。
function count(num){
(function(){
for(var i=0;i<num;i++){ //包含自我执行的匿名函数,就可实现私有作用域
alert(i);
}
})(); //出了这个作用域变量被销毁
alert(i); //此处无法识别i,证明了for语句的私有作用域
}
count(5); //依次输出结果0,1,2,3,4
在全局作用域中使用块级作用域可以减少闭包占用的内存问题,因为没有指向匿名函数的引用。只要函数执行完毕,就可以立即销毁其作用域链了。
2、私有变量
私有变量为函数内部的变量,外部调用不到。
(1)提供对外接口访问私有变量
通过函数内部创建一个闭包,那么闭包通过自己的作用域链也可以访问这些变量,即内部封装起来只给一个对外的接口留有调用私有属性和私有方法。而利用这一点,可以创建用于访问私有变量的公有方法。
function Demo(){
var age=24; //私有变量
function run(){ //私有函数
return "gogogo";
};
this.publicDemo=function(){ //对外可见的公共接口,特权方法
return age+run();
};
this.getAge=function(){
return age;
};
this.getRun=function(){
return run();
}
}
var demo=new Demo();
alert(demo.publicDemo()); //返回结果24gogogo
alert(demo.getRun()); //返回结果gogogo
(2)通过构造方法传参来访问私有变量
function Demo(value){
var age=value;
this.getAge=function(){
return age;
};
//方式二
this.setAge=function(value){
age=value;
};
}
//方式一
var demo=new Demo(24);
alert(demo.getAge());
//方式二
demo.setAge(18);
alert(demo.getAge());
对象的方法,在多次调用的时候会多次创建,不共享不高效,可以使用静态私有变量来避免这个问题。
3、静态私有变量
私有变量方式中所谓不共享,就是在创建新的实例对象中,所输出的原来实例对象值时候不会跟着新实例对象的value之而改变,按值传递,譬如方式一,
var demo=new Demo(24);
alert(demo.getAge()); //输出结果24
var demo2=new Demo(20);
alert(demo.getAge()); //24
解决方法,
(function(){
var age="";
Demo=function(value){
age=value;
};
Demo.prototype.getAge=function(){
return age;
};
Demo.prototype.setAge=function(value){
age=value;
}
})();
var demo=new Demo(24);
alert(demo.getAge()); //输出结果24
var demo2=new Demo(20);
alert(demo.getAge()); //20
实现共享公用了一个地址,无论新实例化任一个都会改变构造函数的值。采用的是Box = function () {} 而不是function Box() {} 因为如果用function Box() {} 这种方法,就变成将其变成私有函数了,无法在全局访问到。使用了prototype导致方法共享了,而age也就变成静态属性了(所谓静态属性,即共享于不同对象中的属性)。