体验javascript之美-第五课匿名函数自执行和闭包是一回事儿吗？

_Suqin 发布于2019-08-20 15:56 / 1335人阅读

摘要：大家想想怎么做什么是匿名函数自执行并如何在实际库中应用匿名函数自执行，注意，注意，只有这个名字和没有其它名字，比如封闭空间，这个是为了让大家好理解自己造的词语。

通过本节课你将学到：

1.什么是函数表达式和函数声明
2.first-class function
3.引用和复制的区别
4.函数传参是怎么回事儿
5.关于函数的this和arguments
6.什么是匿名函数自执行并如何在实际库中应用
7.闭包是怎么回事儿？
8.闭包的原理和在jquery中的应用
9.从一到面试题彻底理解闭包和垃圾回收机制
10.回调函数是什么？

概述

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

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

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

      //函数声明
        function show(){
            console.log(12);
        }
        
     //函数表达式
        var show = function(){
            console.log(5);
        };

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

     //函数表达式
        var show = function(){
            console.log(5);
        };  
        
        function Simple(show){
              show();
        }
        //或者更直接
        function Simple(){
              
        }
        simple(function(){});

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

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

var a = 12;
var b = a;
b+=5;
alert(a);//12

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

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

我擦嘞，发生了什么？

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

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

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

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

访问变量有按值和按引用两种方式，但是参数只能是按值传递。
参数类型是基本类型时，被传递的值被复制给一个局部变量，而复合类型复制的是地址。

好吧，直接上一个例子吧。可以慢慢领悟吧。

function setName(obj){
  obj.name = "尼古拉斯·屌·大彬哥"
  //重点
  obj = new Object();
  obj.name = "帅彬"
}
var Person = new Object();
setName(Person);
alert(Person.name);

5.关于函数的this和arguments

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

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

注意了，

var person = {
        name:"leo",
        show:function(){
             this.name = "leolau"; 
             console.log(this);//person对象 object
        }
};

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

var person = {
        name:"leo",
        show:function(){
             this.name = "leolau"; 
             console.log(this);//person对象 object
              var bug = function(){
              console.log(this);//window
            }
            bug();
        }   
};

如何解决？

var person = {
        name:"leo",
        show:function(){
            var that = this;
             this.name = "leolau"; 
             console.log(this);//person对象 object
              var bug = function(){
              console.log(that);//person
            }
            bug();
        }   
};

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

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

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

命名冲突

a.js

var a = 12;

b.js

var a = 5;

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

var a = 12;
(function(){
      var a = 5;
})();

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

这也是很多jquery库的做法，这么搞：

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

既满足了外面的修改，又做到了防止变量污染。闭包下节课再说困了。

下节课多带带说闭包，垃圾回收，回调函数和定时器。

超融合服务器 idc机房托管 js匿名函数自执行第五课 javascript执行函数服务器和云计算是一回事吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82600.html

体验javascript之美第五课 五分钟彻底明白匿名函数自执行和闭包

摘要：注意匿名函数自执行只是产生闭包的一种情况，闭包是现象或者情形，不实用匿名函数自执行也有很多情况产生闭包，所以而且根本就是两回事儿，不能混淆。小测验，你能看出下面的程序用了闭包吗闭包在中使用。闭包无处不在，直接看的例子。通过文你将学到： 1.闭包是怎么回事儿？ 2.闭包的原理和在jquery中的应用 3.从一到面试题彻底理解闭包和垃圾回收机制 4.闭包在jquery中的应用概述 ...

HitenDev 2019-08-20 15:56 评论0 收藏0
体验javascript之美第四课--函数、函数表达式、闭包

摘要：大彬哥版权所有翻录必究尼古拉斯屌大彬哥群尼古拉斯屌大彬哥函数声明函数表达式是不是简单的让人发指区别就一句话，函数声明，可以在函数调用之后，因为有函数预解析。而函数表达式必须在调用之前。通过前三课讲解，大家应该能做到 1.手里有一份随时能够换工作自信的简历 2.知道了学习js的正确姿势 3.理解了全局对象、全局上下文、知道有预解析同时做了至少50道面试题 4.能熟练的使用json构建...

Doyle 2019-08-20 15:54 评论0 收藏0
javascript -- 回调函数之美

javascript -- 回调函数在高级语言层出不穷的年代, 各个语言都号称有着一切皆为对象的自豪说法, 而 js 作为一门脚本语言却相对于java等传统面向对象语言有很大的不同之处, 除了 js 诡异的继承体系之外, 最令人着迷的一个特性就是回调函数, 当然也有很多人对他诟病, 笔者认为回调函数和异步是js语言特性的两大最为突出的店, 当然正如所有优点需要满足自我的需求, 这个世界...

kbyyd24 2019-08-26 11:38 评论0 收藏0
原生js练习题---第五课

摘要：那该如何是好原题给出思路是让事件负责标记按键就好了，而方向键的事件处理使用设个周期比较小的定时器持续监听，由于周期小，长按时就会立刻执行相应的事件处理，效果更加流畅。闪烁实现效果闪烁简单的一个定时器应用，用或都可以实现。 0x1模拟select控件实现效果：5-01模拟select控件比较简单的点击事件处理，也就处理点击选择框展示菜单、点击菜单选择、点击页面任意角落隐藏菜单这三件事...

winterdawn 2019-08-19 18:11 评论0 收藏0