|
|
|
|
移动端
创建专栏

匿名函数自执行和闭包是一回事儿吗?

在javascript中,有些看起来很复杂却又很好理解的东西,但是理解他们需要一定的技巧同时理解他们又非常的重要,了解了他们就给你打开了一扇门,让你知其然还能够知其所以然。因为他们紧密结合,自成一体。今天我们来说说这些既简单有重要的东西。

作者:面包理想学院|2018-01-25 16:07

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

 一、匿名函数自执行

概述

在javascript中,有些看起来很复杂却又很好理解的东西,但是理解他们需要一定的技巧同时理解他们又非常的重要,了解了他们就给你打开了一扇门,让你知其然还能够知其所以然。因为他们紧密结合,自成一体。今天我们来说说这些既简单有重要的东西。

1.什么是函数表达式和函数声明

大家已经知道函数就是特殊的对象,然后大家也了解函数声明和函数表达式了。

  1. //函数声明 
  2.         function show(){ 
  3.             console.log(12); 
  4.         } 
  5.          
  6.      //函数表达式 
  7.         var show = function(){ 
  8.             console.log(5); 
  9.         };    

2.看到函数表达式也没啥奇怪的,因为函数是对象,那把一个对象赋值给一个变量或者当成参数传递都是可以的。

  1. //函数声明 
  2.         function show(){ 
  3.             console.log(12); 
  4.         } 
  5.          
  6.      //函数表达式 
  7.         var show = function(){ 
  8.             console.log(5); 
  9.         };    

函数能像数字一样赋值给变量传递给参数的现象就叫做 first-class function,没啥难的吧。

3.说到了对象,我们就说下引用和复制的区别。

  1. var a = 12; 
  2. var b = a; 
  3. b+=5; 
  4. alert(a);//12 

这个没啥好解释的,b复制一份儿啊,b怎么改跟a无关。

  1. var arr1 = [12,5,8]; 
  2. var arr2 = arr1; 
  3. arr2.pop(); 
  4. alert(arr1);//12,5 

我擦嘞,发生了什么?

记住一句话,基本类型的复制是直接拷贝一份儿跟原来的无关,而对象复制仅仅是把地址指向复制了一份儿。

我有一个馒头,基本类型复制就相当于照着我的馒头又给你做一个,吃了你的馒头我手里的没影响。

我有一把钥匙,能开一个合租房的门,对象复制是引用,就是复制了一把钥匙,你把厕所给拆了,我也得憋着。理解了不?

4.函数传参这个我只是说一句,这个是很多开发者犯错的地方,这里不解释我一解释你上下都不明白了,只是告诉你就行。

访问变量有按值和按引用两种方式,但是参数只能是按值传递。

参数类型是基本类型时,被传递的值被复制给一个局部变量,而复合类型复制的是地址。

好吧,直接上一个例子吧。慢慢领悟吧。

  1. function setName(obj){ 
  2.   obj.name = "尼古拉斯·屌·大彬哥" 
  3.   //重点 
  4.   obj = new Object(); 
  5.   obj.name = "帅彬" 
  6. var Person = new Object(); 
  7. setName(Person); 
  8. alert(Person.name); 

5.关于函数的this和arguments

js里面最恶心的东西,没有之一。下面我说说函数里面的this。

  1. function show(){console.log(this);}//window 
  2. var show = function{console.log(this);}//window 

注意了,

  1. var person = { 
  2.         name:"leo"
  3.         show:function(){ 
  4.             this.name = 'leolau';  
  5.             console.log(this);//person对象 object 
  6.         } 
  7. }; 

但是这里有个奇怪的事情,很多人认为是bug,面试也经常考。

  1. var person = { 
  2.         name:"leo"
  3.         show:function(){ 
  4.             this.name = 'leolau';  
  5.             console.log(this);//person对象 object 
  6.              var bug = function(){ 
  7.             console.log(this);//window 
  8.             } 
  9.             bug(); 
  10.         }    
  11. }; 

如何解决?

  1. var person = { 
  2.         name:"leo"
  3.         show:function(){ 
  4.             var that = this; 
  5.             this.name = 'leolau';  
  6.             console.log(this);//person对象 object 
  7.              var bug = function(){ 
  8.             console.log(that);//person 
  9.             } 
  10.             bug(); 
  11.         }    
  12. }; 

至于arguments给大家一个实际应用。未知参数个数不定求和。大家想想怎么做?

6.什么是匿名函数自执行并如何在实际库中应用

匿名函数自执行,注意,注意,只有这个名字和iife没有其他名字,比如封闭空间,这个是为了让大家好理解自己造的词语。他的一个重要用途就是防止命名冲突,另外是组织和架构库,比如jquery。

命名冲突

  1. a.js 
  2. var a = 12; 
  3. b.js 
  4. var a = 5; 

同时引用a,b后面覆盖前面了。怎么防止命名冲突前后覆盖。

  1. var a = 12; 
  2. (function(){ 
  3.     var a = 5; 
  4. })(); 

这里iifes里面的a并不会干扰外面的a,那么问题来了,万一我就想改外面的a,呢?

这也是很多jquery库的做法,这么搞:

  1. (function(global,$){ 
  2.     $.a = 12; 
  3.     global.a = 5; 
  4.    
  5. })(window,jquery); 

既满足了外面的修改,又做到了防止变量污染。

二、闭包

概述

经常听到闭包这个词儿,或者匿名函数自执行之类的。到底他们是一个东西吗?

1.什么是闭包?

我不想扣定义,直接上例子。

  1. function parent(firstname){ 
  2.   return function(lastname){ 
  3.   console.log(firstname+'·屌·'+lastname); 
  4.   } 
  5. parent('尼古拉斯')('大彬哥'); 

看图:

函数执行完以后会销毁(这里我就不谈堆栈操作了理解图就行了),然后各种变量会垃圾回收,而这里parent函数确实销毁了,但是firstName这个参数并没有垃圾回收,释放内存,依然在内存中能够被return里面的函数使用,好像return里面的函数把父函数的那个资源给关闭在了自己的函数里面一样,这个函数销毁资源被关闭到子函数中依然能够使用的现象叫做闭包。

注意匿名函数自执行只是产生闭包的一种情况,闭包是现象或者情形,不实用匿名函数自执行也有很多情况产生闭包,所以根本就是两回事儿,不能混淆。

类比,在window系统中,你子文件夹中有使用的文件父文件夹是没法删除的。

2.实际应用,情况很多,先来一道面试题。

  1. function fn{ 
  2.             var arr = []; 
  3.             for(var i = 0;i<3;i++){ 
  4.                 arr.push(function(){ 
  5.                     console.log(i); 
  6.                 }); 
  7.             } 
  8.             return arr; 
  9.         } 
  10.         var arrFn = fn(); 
  11.         arrFn[0]();//3 
  12.         arrFn[1]();//3 
  13.         arrFn[2]();//3 

与这个类似的一个题是循环里面用事件,事件里面的i有问题,如下。

  1. for(var i = 0;i<aBtn.length;i++){ 
  2.     aBtn[i].onclick = function(){ 
  3.         alert(i);//3 
  4.     }; 

还有一到非常爱考的面试题:

  1. for(var i = 0;i<3;i++){ 
  2.     setTimeout(function(){ 
  3.         alert(i); 
  4.     }); 

我只分析一个,其它的大家就会分析了。注意表象上粗略的理解就是 函数执行一瞬间,并不会等定时器,但是这个说法并不对,因为第一个就说不通。下面我们进入内部深入分析下过程。

记住一句话,函数定义压入arr的时候并没有执行。

小测验,你能看出下面的程序用了闭包吗?

  1. function show(){ 
  2.     var a = 12; 
  3.     setTimeout(function(){ 
  4.         console.log(a); 
  5.     },1000); 

3.闭包在jquery中使用。

闭包无处不在,直接看jquery的例子。

  1. $('#btn').click(function(){ 
  2.     var json = {}; 
  3.     ajax(url,function(data){ 
  4.         json =dada; 
  5.     }); 
  6.      
  7. }); 

【本文为51CTO专栏作者“面包理想学院”的原创稿件,转载请通过51CTO联系作者获取授权】

戳这里,看该作者更多好文

【编辑推荐】

  1. 我是一个函数,生活在内存当中
  2. 从大间隔分类器到核函数:全面理解支持向量机
  3. 从ReLU到Sinc,26种神经网络激活函数可视化
  4. 函数式编程在Redux/React中的应用
  5. 一文概览深度学习中的激活函数
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多