JavaScript--匿名函数和闭包(16)
// 匿名函数:没有名字的函数;
// 闭包:可访问一个函数作用域里的变量的函数;
一 匿名函数
1 // 普通函数 2 function box(){ // 函数名是box; 3 return 'Lee'; 4 } 5 box(); // =>Lee; 调用函数; 6 // 匿名函数 7 function(){ // 匿名函数,会报错; 8 return 'Lee'; 9 } 10 // 通过表达式自我执行 11 (function(name){ 12 console.log(name); // =>Lee; 13 })("Lee"); // "()"表示执行函数,并且可以传参; 14 // 把匿名函数赋值给变量 15 var box = function(){ // 将匿名函数赋给变量; 16 return 'Lee'; 17 }; 18 console.log(box()); // 调用方式和函数调用相似; 19 // 函数里的匿名函数 20 function box(){ 21 return function(name){ // 函数里的匿名函数,产生闭包; 22 return name; 23 }; 24 }; 25 console.log(box()("Lee")); // 函数box()调用匿名函数,并传参;
二 闭包
// 闭包:有权访问另一个函数作用域中的变量的函数;
// 创建闭包的常见方式:在一个函数内部创建另一个函数;通过另一个函数访问这个函数的局部变量;
1 // 通过闭包可以返回局部变量 2 function box(){ 3 var user = 'Lee'; 4 return function(){ // 通过匿名函数返回box()的局部变量user; 5 return user; 6 }; 7 } 8 console.log(box()()); // =>Lee; 直接调用box()()来获得匿名函数的返回值; 9 10 var b = box(); 11 console.log(b()); // =>Lee; 另一种调用匿名函数方式; 12 13 // 优点:可以把局部变量驻留在内存中,可以避免使用全局变量; 14 // (全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难;所以推荐使用私有的,封装的局部变量);
1 // 缺点: 2 // 通过全局变量来累加 3 var age = 100; // 全局变量; 4 function box(){ 5 age++; // 模块级可以调用全局变量,进行累加; 6 }; 7 box(); // 执行函数,累加一次; 8 console.log(age); // =>101; 输出全局变量; 9 box(); // 执行函数,累加一次; 10 console.log(age); // =>102; 输出全局变量; 11 // 通过局部变量无法实现累加 12 function box(){ 13 var age = 100; 14 age++; // 实现累加; 15 return age; 16 } 17 console.log(box()); // =>101; 18 console.log(box()); // =>101; 无法实现累加,因为第二次调用函数时,函数内部变量age又被初始化了; 19 20 // 通过闭包可以实现局部变量的累加 21 function box(){ 22 var age = 100; 23 return function(){ // 匿名函数内实现累加; 24 age++; 25 return age; // 并返回累加后的变量; 26 }; // 此时box()函数的局部变量age的值已经被修改为累加后的值; 27 } 28 var b = box(); // 给box()函数赋值给变量; 29 console.log(b()); // =>101; 调用匿名函数,累加一次; 30 console.log(b()); // =>102; 第二次调用匿名函数,累加两次; 31 32 // PS:由于闭包里作用域返回的局部变量资源不会被立刻销毁回收,所以可能会占用更多的内存;所以过度使用闭包会导致性能下降;(将闭包引用在"私有作用域"中即可实现变量销毁) 33 // 作用域链的机制导致一个问题,在循环中里的匿名函数取得的任何变量都是最后一个值; ?
1 // 循环里包含匿名函数 2 function box(){ 3 var arr = []; 4 for(var i=0; i<5; i++){ // 当声明变量i=5时,循环停止;而此时循环里的变量i==5; 5 arr[i] = function(){ // arr[i]得到的只是没有执行的匿名函数function(){}; 6 return i; 7 }; 8 }; 9 return arr; // arr = [function,function,function,function,function]; 10 } 11 var b = box(); // =>[function,function,function,function,function]; 得到函数box()返回的数组arr; 12 console.log(b.length); // =>5; 得到函数集合数组长度; 13 for(var i=0; i<b.length; i++){ 14 console.log(box()[i]()); // =>5,5,5,5,5; 输出每个函数的值,都是最后一个值; 15 } 16 // 上面的例子输出的结果都是5,也就是循环后得到的最大i值; 17 // 因为b[i]调用的是匿名函数,匿名函数并没有自我执行,等到调用的时候,box()已执行完毕,i早已变成5; 18 19 // 循环里包含匿名函数-改1,自我执行匿名函数 20 function box(){ 21 var arr = []; 22 for(var i=0; i<5; i++){ 23 arr[i] = (function(num){ // arr[i]得到的是匿名函数执行后的结果数值0-4; 24 return num; 25 })(i); // 自我执行并传参; 26 } 27 return arr; 28 } 29 var b = box(); // =>[0,1,2,3,4]; 此时b代表box()返回的数组; 30 for (var i = 0; i < b.length; i++) { 31 console.log(b[i]); // 0 1 2 3 4; 这里返回的是数值; 32 }; 33 // 例子中,我们让匿名函数进行自我执行,导致最终返回给a[i]的是数组而不是函数了;最终导致b[0]-b[4]中保留了0,1,2,3,4的值; 34 35 // 循环里包含匿名函数-改2,匿名函数里再做个匿名函数; 36 function box(){ 37 var arr = []; 38 for(var i=0; i<5; i++){ 39 arr[i] = (function(num){ 40 return function(){ // 返回函数; 41 return num; 42 } 43 })(i); 44 } 45 return arr; // arr = [function,function,function,function,function]; 46 } 47 var b = box(); 48 for (var i = 0; i < b.length; i++) { 49 console.log(b[i]()); // 0,1,2,3,4; 50 }; 51 52 // 改1和改2中,我们通过匿名函数自我执行,立即把结果赋值给arr[i]; 53 // 每一个i,是调用方通过按值传递的,所以最终返回的都是指定的递增的i;而不是box()函数中的变量i;
三 this对象
1 // 在闭包中使用this对象可能会导致一些问题;this对象是在运行时基于函数的执行环境绑定的; 2 // 如果this在全局范围就是指向window,如果在对象内部就指向这个对象; 3 // 而闭包却在运行时指向window的,因为闭包并不属于这个对象的属性或方法; 4 var user = 'Window'; 5 var obj = { 6 user:'Object', 7 getUserFunction:function(){ 8 return function(){ // 闭包不属于obj,里面的this指向window; 9 return this.user; 10 }; 11 } 12 }; 13 console.log(obj.getUserFunction()()); // =>Window; 14 15 // 可以强制指向某个对象 16 console.log(obj.getUserFunction().call(obj)); // =>Object; 17 18 // 也可以从上一个作用域中的得到对象 19 getUserFunction:function(){ 20 var that = this; // 从对象的方法里得到this;此时that指向obj对象; 21 return function(){ 22 return that.user; 23 } 24 } 25 console.log(obj.getUserFunction()()); // =>Object;
四 内存泄漏
1 // 由于IE的JScript对象和DOM对象使用不同的垃圾收集方式,因此闭包在IE中会导致内存泄漏问题,也就是无法销毁驻留在内存中的元素; 2 function box(){ 3 var oDiv = document.getElementById('oDiv'); // oDiv用完之后一直驻留在内存中; 4 oDiv.onclick = function(){ 5 alert(oDiv.innerHTML); // 这里用oDiv导致内存泄漏; 6 }; 7 oDiv = null; // 解除引用; 8 } 9 box(); 10 // 由于匿名函数保存了一个对box()的活动对象的引用,因此就会导致无法减少oDiv的引用数; 11 // 只要匿名函数存在,oDiv的引用数至少也是1;因此它所占用的内存就永远不会被回收; 12 // PS:如果没有使用解除引用,那么要等到浏览器关闭才得以释放;
五 模仿块级作用域(定义并立即调用一个匿名函数)
1 // JS没有块级作用域的概念; 2 // 这意味着在块语句(for语句/if语句)中定义的变量,实际上是在包含函数中而非语句中创建的; 3 function box(count){ 4 for(var i=0; i<count; i++){} // box(2); => count=2; i=2时循环停止,此时i=2; 5 console.log(i); // =>2; i不会因为离开了for块就失效; 6 } 7 box(2); 8 9 function box(count){ 10 for(var i=0; i<count; i++){} 11 var i; // 就算重新声明,也不会覆盖前面的值; 12 console.log(i); 13 } 14 box(2); 15 // 在JavaScript中,变量i是定义在box()的活动对象中的,因此从它有定义开始,就可以在函数内部随处访问它; 16 // 以上两个例子,说明JavaScript没有块级语句的作用域,if(){}/for(){}等没有作用域; 17 // 如果有作用域的话,出了这个范围i就应该被销毁; 18 19 // JavaScript不会提醒是否多次声明了同一个变量;遇到这种情况,它只会对后续的声明视而不见(如果是初始化并赋值,还是会执行的); 20 21 // 模仿块级作用域(私有作用域) 22 (function(){ 23 // 这里是块级作用域; 24 })(); 25 // 以上代码定义并立即调用了一个匿名函数;将函数声明包含在一对圆括号中,表示它实际上是一个函数表达式; 26 27 // 使用块级作用域(私有作用域)改写 28 function box(count){ 29 (function(){ 30 for(var i=0; i<count; i++){} 31 })(); 32 console.log(i); // 报错,无法访问;变量i在私有作用域中,出了私有作用域即被销毁了. 33 } 34 box(2); 35 // 使用了块级作用域后,匿名函数中定义的任何变量,都会在执行结束时被销毁;(i只能在循环中使用,使用后即被销毁); 36 // 而私有作用域中能够访问变量count,是因为这个匿名函数是一个闭包,他能够访问包含作用域中的所有变量; 37 // 这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数; 38 // 一般来说,我们都应该尽可能少向全局作用域中添加变量和函数;过多的全局变量和函数很容易导致命名冲突; 39 // 使用块级作用域,每个开发者既可以使用自己的变量,又不必担心搞乱全局作用域; 40 (function(){ 41 var box = [1,2,3,4]; 42 console.log(box); // =>[1,2,3,4]; box出来就不被认识了; 43 })(); // 销毁匿名函数中的变量; 44 console.log(box); // =>box is not defined; 45 // 在全局作用域中使用块级作用域可以减少闭包占用的内存问题;因为没有指向匿名函数的引用 46 // 只要函数执行完毕,就可以立即销毁其作用域链了;
六 私有变量
1 // JavaScript没用私有属性的概念;所有的属性都是公用的; 2 // 不过有一个私有变量的概念:在任何函数中定义的变量,都可以认为是私有变量,因为不能在函数外部访问这些变量; 3 // 私有变量包括函数的参数/局部变量和在函数内部定义的其他函数; 4 function box(){ 5 var age = 100; // 私有变量,外部无法访问; 6 } 7 8 // 而通过内部创建一个闭包,那么闭包通过自己的作用域链也可以访问这些变量; 9 // 而利用这一点,可以创建用于访问私有变量的公用方法;特权方法; 10 function Box(){ // 构造函数; 11 var age = 100; // 私有变量; 12 function run(){ // 私有函数; 13 return '运行中...'; 14 }; 15 this.get = function(){ // 对外公共的特权方法; 16 return age+run(); // 将闭包赋值给变量; 17 }; 18 } 19 var box = new Box(); 20 console.log(box.get()); 21 22 // 可以通过构造方法传参来访问私有变量 23 function Person(name){ 24 var user = name; // 这句其实可以省略; 25 this.getUser = function(){ 26 return user; 27 }; 28 this.setUser = function(name){ 29 user = name; 30 } 31 } 32 var p = new Person('Lee'); 33 console.log(p.getUser()); // =>Lee; 34 console.log(p.setUser('Jack')); 35 console.log(p.getUser()); // =>Jack; 36 // 但是,构造函数模式的缺点是针对每个实例都会创建同样一组新方法;而使用静态私有变量来实现特权方法就可以避免这个问题;
七 静态私有变量
1 // 通过块级作用域(私有作用域)中定义私有变量或函数,同样可以创建对外公共的特权方法; 2 (function(){ // 创建私有作用域; 3 var age = 100; // 静态私有变量; 4 function run(){ 5 return '运行中...'; 6 }; 7 Box = function(){}; // 使用函数表达式定义构造函数; 8 Box.prototype.go = function(){ // 公有(特权)方法;在原型上定义的; 9 return age+run(); 10 }; 11 })(); 12 var box = new Box(); 13 console.log(box.go()); // 100运行中...; 14 // 上面的对象声明,采用的是Box = function(){}而不是functiong Box(){};并且在声明Box时没有使用var关键字 15 // 导致:初始化未经声明的变量,总是会创建一个全局变量;因此,Box就成了一个全局变量,能够在私有作用域之外被访问到; 16 // 因为如果用函数声明定义构造函数,那么就变成私有函数了,无法在全局访问到了,所以要使用函数式定义构造方法; 17 (function(){ 18 var user = ""; 19 Person = function(value){ // 此处定义的Person是全局变量; 20 user = value; // 这里的构造函数有权访问私有变量name; 21 }; 22 Person.prototype.getUser = function(){ 23 return user; 24 }; 25 Person.prototype.setUser = function(value){ 26 user = value; 27 } 28 })(); 29 var person = new Person(); 30 person.setUser('Lee'); 31 console.log(person.getUser()); // =>Lee; 32 // 使用了prototype导致方法共享了,而user也就变成静态属性了; 33 // 所谓静态属性:即共享于不同对象中的属性;?
八 模块模式
1 // 简言之,如果必须创建一个对象并以某些数据对其进行初始化,同时还要公开一些能够访问这些私有数据的方法,那么就可以使用模块模式; 2 // 之前采用的都是构造函数的方式来创建私有变量和特权方法; 3 // 那么对象字面量方式就采用模块模式来创建; 4 var box = { // 字面量对象,也是单例对象:只有一个实例的对象; 5 age:100, // 这是公有属性,将要改成私有; 6 run:function(){ 7 return '运行中...'; 8 }; 9 }; 10 11 // 模块模式私有化变量和函数: 12 var box = function(){ 13 var age = 100; 14 function run(){ 15 return '运行中...'; 16 } 17 return { // 将一个字面量对象作为函数的值返回; 18 go:function(){ // 返回的对象字面量中只包含可以公开的属性和方法; 19 return age+run(); // 由于这个对象是在匿名函数内部定义的,因此它的公有方法有权访问私有变量和函数; 20 } 21 }; // 从本质上讲,这个对象字面量定义的是单例的公共接口; 22 }(); 23 // 这种模式在需要对单例进行某些初始化,同时又需要维护其私有变量时是非常有用的; 24 25 // 上面直接返回对象的例子,也可以这么写: 26 var box = function(){ 27 var age = 100; 28 function run(){ 29 return '运行中...'; 30 } 31 var obj = { // 创建字面量对象; 32 go:function(){ 33 return age+run(); 34 } 35 }; 36 return obj; // 返回刚创建的对象; 37 }(); 38 39 // 字面量的对象声明,其实在设计模式中可以看作是一种单例模式; 40 // 所谓单例模式,就是永远保持对象的只有一个实例; 41 42 // 增强的模块模式:适合返回自定义对象,也就是构造函数; 43 function Desk(){}; 44 var box = function(){ 45 var age = 100; 46 function run(){ 47 return '运行中...'; 48 }; 49 var desk = new Desk(); 50 desk.go = function(){ 51 return age+run(); 52 }; 53 return desk; 54 }(); 55 console.log(box.go()); // =>100运行中;
九 小结
// 在JavaScript编程中,函数表达式是一种非常有用的技术;使用函数表达式可以无须对函数命名,从而实现动态编程;
1.函数表达式
1 // 函数表达式不同于函数声明;函数声明要求有名字,但函数表达式不需要; 2 // 没有名字的函数表达式叫做匿名函数;
2.闭包
1 // 当在函数内部定义了其他函数时,就创建了闭包.闭包有权访问包含函数内部的所有变量;原理如下: 2 // 在后台执行环境中,闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域; 3 // 通常,函数的作用域及其所有变量都会在函数执行结束后被销毁; 4 // 但是,当函数返回了一个闭包时,这个函数的作用域将会一直在内存中保存到闭包不存在为止;
3.块级作用域
1 // 使用闭包可以在JavaScript中模仿块级作用域(JavaScript本身没有块级作用域的概念);要点如下: 2 // 创建并立即调用一个函数,这样既可以执行其中的代码,又不会在内存中留下对该函数的引用; 3 // 结果就是函数内部的所有变量都会被立即销毁--除非将某些变量赋值给了包含作用域(即外部作用域)中的变量;
4.私有变量
1 // 闭包还可以用于在对象中创建私有变量,要点如下: 2 // 即使JavaScript中没有真是的私有对象属性的概念,但是可以使用闭包来实现公有方法,而通过公有方法可以访问包含作用域中定义的变量; 3 // 可以使用构造函数模式、原型模式来实现自定义类型的特权方法,也可以使用模块模式来实现单例的特权方法;