码迷,mamicode.com
首页 > 编程语言 > 详细

从零开始学习前端JAVASCRIPT — 14、闭包与继承

时间:2018-03-02 14:47:03      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:退出   fine   undefined   nbsp   +=   情况   col   学习   隔行换色   

1:闭包

1 . 概念:闭包就是能够读取其他函数内部变量的函数。在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”。

2 . 闭包的特点

1)可以读取函数内部的变量。

2)让这些变量的值始终保存在内存中。

3 . 闭包的原理

理解闭包,首先必须理解JS变量的作用域。变量的作用域无非就是两种(es5):全局变量和局部变量。

JS语言的特殊之处,就在于函数内部可以直接读取全局变量。另一方面,函数外部自然无法读取函数内的局部变量。

注意:

1)函数内部声明变量的时候,一定要使用var声明。如果不用的话,你实际上声明了一个全局变量。

2)局部变量的作用域,在函数定义的时候就已经确定下来了。

出于各种原因,我们有时候需要得到函数内部的局部变量。但是正常情况下这是办不到的。只有变通一下才能实现,那就是在函数内部再定义一个函数。外部变量不能访问内部变量,内部变量却能访问外部变量,这正是因为JS特有的”链式作用域”结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以父对象的所有变量,对子对象都是可见的,反之则不成立。我们只需要把子函数返回出来,我们就可以在外部读取内部变量了。

4 . 闭包的应用场景

1)函数作为返回值。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        function f1() {
            var n = 999;
            nAdd = function () {
                n += 1;
            }
            function f2() {
                console.log(n)
            }
            return f2;
        }
        var result = f1();
        console.log("result的第一次执行")
        result();//999
        console.log("nAdd的执行")
        nAdd();//无输出
        console.log("result的第二次执行")
        result();//1000
    </script>
</body>
</html>

   2)函数作为参数被传递。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        function fun(n, o) {
            console.log(o);
            return {
                fun: function (m) {
                    return fun(m, n);
                }
            };
        }
        var a = fun(0); //undefined
        // 执行完并未销毁保存在内存中
        a.fun(1); //0
        a.fun(2); //0
        a.fun(3); //0

        fun(0).fun(1).fun(2).fun(3);
        //undefined、0、1、2
        var a = fun(0).fun(1); 
        //undefined、0
        a.fun(2); 
        //undefined、1
        a.fun(3);        
        //undefined、1
    </script>        
</body>
</html>

 5 . 使用闭包注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包。否则会造成网页性能问题,在IE中可能导致内存泄漏。解决方法就是在函数退出之前,将不使用的局部变量删除(值置为null,垃圾回收机制就会处理)

2)闭包会在父函数外部,改变父函数内部变量的值。所以不要随便改变父函数内部变量的值。

6 . demo通过js闭包实现鼠标滑过隔行换色的效果

 


2:构造函数的继承

 

从零开始学习前端JAVASCRIPT — 14、闭包与继承

标签:退出   fine   undefined   nbsp   +=   情况   col   学习   隔行换色   

原文地址:https://www.cnblogs.com/witkeydu/p/8491257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!