Keep on coding

JavaScript - 闭包 - 函数回调 - 即时函数

发表于 | 分类于 ， | | 阅读次数

本小节主要讲解闭包,是特别重要的一块内容.希望大家能够用心学习!

作用域链的补充内容 —-> 搜索规则

如果有忘记的人,翻一下上一篇博客

注意点:如果在内层作用域中声明了和外层作用域中同名的变量,那么这个变量是不会把外层的同名变量覆盖的

搜索原则:

  • 在作用域中如果访问(读取|设置)某个变量,先在当前作用域中搜索,如果找到那么就直接使用
  • 如果没有找到,那么就向上一级作用域中继续搜索,找到则使用,没有找到就重复上面的过程
  • 直到0级作用域链

闭包

闭 : 关闭,封闭的意思,对外界不开方的

包 : 包装起来

闭包技术

  • 作用域规则 : 内层的作用域可以访问外层的的作用域,但反过来不行
  • 有的时候,我们确实需要访问一个封闭空间里的数据源(外层作用域 —-> 内层作用域)
  • 就是提供一种间接访问封闭空间中私有数据的方法

访问数据

  • 直接返回 return
  • 闭包 对直接返回的数据进行包装(函数)
  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    function f1(){
        var num = 10;
        return num;
    }
    //num
    var a = f1();
    var b = f1();
    console.log(a);
    console.log(b);
    //一次性获得数据
    //1 每次调用函数获得的数据并不是同一份数据
    //2 只能获取值,但是却不能修改值
</script>
  • 示例代码 : 闭包一般写法
1
2
3
4
5
6
7
8
9
<script>
    function f1(){
        var num = 10;
        return function(param){
            num = param;    //修改函数内部变量的值
            return num;
        };
    }
</script>
  • 示例代码 : 访问获取数据 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    function f1(){
        var num = 10;
        var name = "张学友";
        return function(){
            return [num,name];
        };
    }
    var func = f1();
    console.log(func()[0]);
    console.log(func()[1]);
</script>
  • 示例代码 : 闭包基本写法 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    function f1(){
        var num = 10;
        var name = "xxx";
        return {
            getNum:function(){
                return num;
            },
            getName:function(){
                return name;
            }
        }
    }
    var func = f1();
    console.log(func.getName());
    console.log(func.getNum());
</script>

闭包读取数据和设置数据

  • 示例代码 : 获取数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    function foo(){
        var name = "卡罗";
        var age = 18;
        return {
            getName:function(nameValue){
                //判断
                if (nameValue != undefined)
                {
                    name = nameValue;
                }
                return name;
            },
            getAge:function(ageValue){
                age = ageValue;
                return age;
            }
        }
    }
    var func = foo();
    console.log(func.getName());     //
    console.log(func.getName("卡罗尔"));
    console.log(func.getName());
</script>
  • 示例代码 :设置数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    function foo(){
        var name = "卡罗";
        var age = 18;
        return {
            getName:function(){
                return name;
            },
            getAge:function(){
                return age;
            },
            setName:function(nameValue){
                name = nameValue;
            },
            setAge:function(ageValue) {
                age = ageValue;
            }
        }
    }
    var func = foo();
    console.log(func.getName());
    func.setName("卡米尔");
    console.log(func.getName());
    func.setAge(20);
    console.log(func.getAge());
</script>

闭包的作用

提供了一种间接访问函数封闭空间中数据的方法

  • 访问函数内部的变量只能通过指定的借口
  • 对变量的修改设置操作会更加安全,可以在设置之前对数据进行校验
  • 延长变量的生命周期 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
    function f1(){
        var age = 20;
        var author= "今何在";
        return {
            getAge:function(){
                return age;
            },
            setAge:function(ageValue){
                //校验处理
                if (ageValue <0)
                {
                    ageValue = 0;
                }
                //其他的处理(异常检测)
                age = ageValue;
            }
        }
    }
    var func = f1();
    func.setAge(22);
    console.log(func.getAge());
    //设置年龄  -3 (因为人的年龄不能是负值 所以得进行安全校验)
    func.setAge(-3);
    console.log(func.getAge());
</script>

setTimeout和闭包的执行

setTimeout(); 只调用一次函数(延迟函数) 一次是隔两秒(至少)

每隔一定的时候就调用一次

  • 参数设置 :
    第一个参数:函数回调(时间到了之后执行的代码)
    第二个参数:间隔时间(毫秒) 1秒 = 1000毫秒

setTimeout的问题

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
<script>
    for (var i = 0; i < 100; i++) {
        setTimeout(function () {
            console.log(i);
        },0);
        console.log("----");
    }
</script>

解决setTimeout的问题

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    for (var i = 0; i < 10; i++) {
        setTimeout((function (j) {
            return function () {
                console.log(j);
            }
        })(i),10);
        console.log("+++++++++");
    }
</script>

div事件和闭包

  • 示例代码 : 
1
2
3
4
5
6
<div>我是第1个div标签</div>
<div>我是第2个div标签</div>
<div>我是第3个div标签</div>
<div>我是第4个div标签</div>
<div>我是第5个div标签</div>
<div>我是第6个div标签</div>
1
2
3
4
5
6
7
8
9
<script>
var divs  = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = function(){
            alert("我是第" + i + "标签");
        }
    }
    // 每次点击得到的都是第六个标签
</script>
  • 用闭包解决问题 : 
1
2
3
4
5
6
7
8
9
10
<script>
    var divs  = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
       (function(a){
           divs[a].onclick = function(){
               alert("我是第" + a + "标签");
           }
       })(i)
   }
</script>

函数的特性

  • 函数本身也是对象(第一型的对象) 凡是可以使用对象的地方都可以使用函数
  • 函数可以创建作用域
  • 函数是可以被调用的

函数的约定和name值

  • 函数声明
  • 函数表达式

  • new 构造函数

  • 示例代码 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    //function funName(参数1,参数2){函数体}   //函数声明
    //函数表达式(匿名)
    var add = function(a,b){
        console.log(a + b);
    }
    //函数表达式(命名)
    var sum = function name(a,b){
        console.log(a + b);
    }
    //sum.length // 形参的个数
    console.log(add.name);   //add 跟浏览器的实现有关系(在火狐中name的值为空)
    console.log(sum.name);   //name
    //03构造函数创建对象
    new Function(参数1,参数2,参数3)
</script>

函数的回调(作为参数传递)

函数是第一型对象(因此可以使用对象的地方都可以使用函数)

  • 函数可以作为函数的参数
  • 函数可以作为函数的返回值

回调函数(回调),当我们把某个函数作为参数传递给另一个函数的时候,这个函数就称为回调函数。

回调函数的基本模式

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function func(callBack) {
        //处理其他的操作
        callBack();     //调用回调函数
    }
    function demo() {
        console.log("这是一个回调函数");
    }
    func(demo); //注意调用函数的时候,参数是回调函数的引用(不要加括号);
</script>

回调函数(关于this丢失的问题)

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
    //如果回调函数是某个对象的方法,而该对象方法中使用了this指针
    //那么该方法作为回调函数来使用的时候,需要注意this丢失的问题
    //01 提供一个对象,该对象中永远有showName方法
    var obj = {
        name:"xxx名字",
        age:30,
        showName:function () {
            console.log(this.name);
        },
        showAge:function () {
            console.log(this.age);
        }
    }
    //02 提供一个函数,该函数接受一个参数(函数引用)
    function demo(callBack) {
        callBack();
    }
    demo(obj.showName); //注意:不要带上括号 打印结果为空(window.name)
    demo(obj.showAge);  //undefined
</script>

回调函数(解决this丢失的问题)

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    //01 提供一个对象,该对象中永远showName方法
    var obj = {
        name:"默认的名字",
        age:30,
        showName:function () {
            console.log(this.name);
        },
        showAge:function () {
            console.log(this.age);
        }
    };
    //02 提供一个函数,该函数接受一个参数(函数引用)
    function demo(callBack,callBack_obj) {
        if (typeof callBack == 'function')
        {
            callBack.call(callBack_obj);
            console.log("++++");
        }
    }
    demo(obj.showName,obj); //注意:不要带上括号
    demo(obj.showAge,obj);  //undefined
</script>

回调函数(兼容字符串方式)

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
    //01 提供一个对象,该对象中永远showName方法
    var obj = {
        name:"默认的名字",
        age:30,
        showName:function () {
            console.log(this.name);
        },
        showAge:function () {
            console.log(this.age);
        }
    };
    //02 提供一个函数,该函数接受一个参数(函数引用)
    function demo(callBack,callBack_obj) {
        //处理第一个参数传递对象方法字符串的形式
        if(typeof callBack == 'string')
        {
            callBack = callBack_obj[callBack];
        }
        if (typeof callBack == 'function')
        {
            callBack.call(callBack_obj);
        }
    }
    //demo(obj.showName,obj);
    //demo(obj.showAge,obj);
    //传递字符串和对象来进行调用
    demo("showName",obj);
</script>

函数作为返回值( 计算器)

  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    //使用闭包实现一个计数器(在该示例中setup函数的返回值为一个函数)
    //通过调用返回值(一个函数),可以操作setup函数中的变量
    var setup = function () {
        var count = 0;
        return function () {
            return count ++;
        }
    }
    var next = setup();
    console.log(next());    //0
    console.log(next());    //1
    console.log(next());    //2
</script>

自定义函数( 惰性函数 )

惰性函数

  • 某个函数直到第一次使用的时候才被正确的定义,并且其具有向后惰性,执行更少的工作。

应用场景

  • 函数有一些初始化的准备工作要做,且只需要执行一次的情况。

特点

  • 能够更新自己(函数)的实现。

缺点:

  • 当重新定义自身的时候,已经添加到原始函数的任何属性都会丢失。
  • 如果函数被赋值给了其他的变量或者是对象方法,那么在使用变量或者是对象方法调用时仍然会执行旧的函数体。
  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    var demo = function foo() {
        console.log("foo!");
        foo = function () {
            console.log("new foo!");
        }
    }
    //函数的调用
    //foo();  //foo!
    //foo();  //new foo!
    //总结:该函数的实现特点在于能够更新自身的实现。
    demo(); //foo!
    demo(); //foo!
</script>

惰性定义函数存在的问题

  • 添加属性
  • 把函数赋值给新的变量
  • 以对象的方法调用函数
  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
    //01 声明函数foo
    function foo() {
        console.log("foo!");
        foo = function () {
            console.log("foo! foo!");
        }
    }
    //02 为foo函数对象添加属性
    foo.description = "foo函数的描述信息";
    //03 把foo函数赋值给其他的变量
    var func = foo;
    //04 把foo函数赋值给对象中的方法
    var obj = {
        showFoo:foo
    }
    //05 验证并演示输出
    func(); //foo!
    func(); //foo!
    console.log(func.description);  //foo函数的描述信息
    //总结:01 如果把函数赋值给其他的变量,那么在以其他变量的方式调用时不会更新自身,还是执行旧的函数体
    obj.showFoo();  //foo!
    obj.showFoo();  //foo!
    console.log(obj.showFoo.description);   //foo函数的描述信息
    //总结:02 如果把函数赋值给对象的方法,那么在以对象方法形式调用时不会更新自身,还是会执行旧的函数体。
    foo();  //已经更新过foo函数 foo! foo!
    foo();  //已经更新过foo函数 foo! foo!
    console.log(foo.description);   //undefined
</script>

即时函数

在函数定义之后立即执行该函数。

即时函数模式的组成:

  • 使用函数表达式来定义函数(匿名函数,注意不能使用函数声明方式)
  • 在函数表达式末尾添加一组(),表示立即执行当前函数。
  • 将整个函数包装在()中,有两种方式

即时函数的作用

  • 用来将所有的代码包装到当前的作用域中,并且不会将任何的变量泄露到全局作用域中。
  • js中没有代码块作用域,而函数是js中唯一可以创建作用域的。
  • 即时函数就是利用了函数创建作用域这一点,来实现对一些需要封装且不允许外部访问的操作。

即时函数的优点

  • 封装在一起执行的代码,且不会产生全局变量,在即时函数内部定义的所有变量都仅仅只是该函数的局部变量,不会造成全局变量污染问题。
  • 具有更好的封装性,外部无法访问到该函数内部的数据。
  • 示例代码 : 即时函数两种写法
1
2
3
4
5
6
7
8
9
10
11
<script>
    //第一种写法
    (function () {
       console.log("即时函数的第一种写法");
    }());
    //第二种写法
    (function () {
        console.log("即时函数的第二种写法");
    })();
</script>
  • 示例代码 : 即时函数可以接受参数并提供返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    //01 接受参数
    (function (str) {
        console.log(str);           //hello
    })("hello");
    //02 提供返回值并赋值给新的变量
    var foo = (function () {
        return 2 + 1;
    })();
    console.log(foo);           //3
</script>

即时函数和闭包

  • 相同点：他们都是函数的一种特殊形态，并且可以共存。而且闭包配合即时函数“效果更佳”。

  • 不同点：即时函数是定义一个函数，并立即执行。它只能被使用一次，相当于“阅后即焚”。闭包是指一个函数与它捕获的外部变量的合体，按照MDN的说法，闭包就像一个对象—一个具有一个方法(行为)和一个或多个私有字段(状态)的对象。从这个角度看，闭包是符合面向对象的封装思想的。

即时对象初始化

结构特征

  • 提供一个对象,在该对象内部提供一个init初始化方法,使用()把对象包装起来(让字面量变成表达式)
  • 然后随即调用init方法,完成初始化操作。

基本结构

({}).init();

模式优点

  • 在执行一次性的初始化任务时保护全局的命名空间。
  • 示例代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    ({
        name:"xxx",
        age:23,
        getDescript:function () {
            console.log("名字:" + this.name + "年龄:" + this.age);
        },
        //注意:在对象中访问对象的属性和方法都需要使用this.前缀
        init:function () {
            this.getDescript();
            //其他的初始化处理
        }
    }).init();