前端小知识--从Javascript闭包看let

2018-03-20 阅读 2059 收藏 2

之前一直模模糊糊记得,let解决了某个闭包问题,想用时又不敢肯定,今天终于遇到这个问题了,那我们就一起来分析一下,什么是let,let有什么作用,以及,他是如何解决闭包的,当然,也顺便好好聊聊闭包。

1、闭包

1.1 闭包的定义

闭包的定义是这样的:内部函数被保存到了外部,即为闭包 先来看一个简单的例子:

//我们声明一个函数test(),这个函数返回了一个function
 function test(){
     var i = 0;
     return function(){
        console.log(i++)
     }
 }; 
//把test()的返回值赋给a和b变量,所以其实这时候的a/b=function(){console.log(i++);}
 var a = test();
 var b = test();
 //依次执行a,a,b,控制台会输出什么呢?
 a();a();b();

先思考一下,然后去浏览器验证一下

答案是:0,1,0

这是因为,a/b=test()时,a/b各自保留了test的AO,所以各自上面均有一个i=0;

1.2 实现共有变量

这样其实是实现了一个共有变量,比如我们把上面的代码稍稍调整一下,就实现了一个累加计数器;

//累加器
function add(){
    var count = 0;
    function demo(){
        count++;
        console.log(count);
    }
    return demo;
}
var counter = add();
counter();

这也是闭包的第一个功能,实现共有变量;

1.3 可以做缓存

闭包的第二个功能是可以用作缓存,比如下面这个例子,我们用push把准备用到的东西放进去,当eat调用时使用:

//隐式缓存应用
function eater(){
    var food = "";
    var obj = {
        eat: function(){
            console.log("I'm eating " + food);
            food = "";
        },
        push: function(myFood){
            food = myFood;
        }
    }
    return obj;
}
var eater1 = eater();
eater1.push('banana');
eater1.eat();

1.4 可以实现封装,属性私有化

这个典型的例子是圣杯继承实现的雅虎的写法

雅虎写法
var inherit = (function(){
    var F = function(){};
    return function(Target,Origin){
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constructor = Target;
        //超类
        Target.prototype.uber = Origin.prototype;
    }
}())
//理解,return时保留了F变量,闭包私有化变量

1.5 模块化开发,防止污染全局变量

利用闭包变量私有化,避免命名空间的问题
var name = "heh";
var init = (function(){
   var name = "zhangsan";
   function callName(){
       console.log(name);
   }
   return function (){
       callName();
   }
}())
init();

1.6 闭包的危害

以上四点,其实都是闭包的好处,善加利用是能够帮助到我们的,所以大家不要先入为主觉得闭包是不好的,闭包其实是我们解决很多问题的一种思路,但当然,闭包确实有它危害的方面:

闭包会导致原有作用域链不释放,造成内存泄漏,即占用导致剩下内存变少

1.如何清除闭包:

闭包函数=null;
如第一个例子:a = null;

否则闭包会一直占用内存,直到浏览器进程结束。

2.闭包会在父函数外部,改变父函数内部变量的值。

如1.3的例子,我们修改了内部的food值,所以,对于闭包,一定要小心使用。

3.还有一个最常见的情况是for循环中的闭包:

我们写一个ul列表,当点击时输出对应的i;

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var items = document.getElementsByTagName('li');
        var len = items.length;

        for (var i = 0; i < len; i++) {
            items[i].onclick = function () {
                console.log(i);
            }
        }
    </script>
</body>

这和我们之前事件委托的例子很像,但是这里我们输出的不是对应的this对象,而是函数所在作用域的i值,可以看到,我们输出的都是4,而我们的i应该是从0到1、2、3,加到4的时候已经不满足条件了,不会进入循环。

这到底是怎么回事呢?

这同样形成了一个闭包,内部的函数console.log(i)被保存到了外部的items[i].onclick()之中,所以我们有一个外部的AO,里面保存了一个i,但是这个i是for循环执行完之后的i,当我们执行点击函数时,始终用到的就是这个i,但这明显和我们要的不一样,我们希望每一个执行点击时输出的都是for循环时对应的那个i;

这时候的闭包,是存在一定问题的,利用立即执行函数可以解决这个问题。

2、立即执行函数

立即执行函数,顾名思义,立即会执行的函数(Immediately-Invoked Function Expression),即当js读取到该函数,会立即执行。 我们1.4、1.5对应的例子中就用到了这个方法。 用法如下:

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var items = document.getElementsByTagName('li');
        var len = items.length;

        for (var i = 0; i < len; i++) {
            items[i].onclick = (function () {
                var index = i;
                return function () {
                    console.log(index);
                }
            }())
        }
    </script>
</body>

每次到了立即执行函数时,都会把当前的i赋值给index保存起来,并返回带有这个值的函数。

2.1 立即执行函数的写法

官方的两种写法
(function (){}());//w3c建议第一种
(function (){})();

2.2 立即执行函数用于初始化

<!--针对初始化功能的函数-->
var num = (
    function (b) {
        var a = 123;
        console.log(a,b);
        d = a + b;
        return d;
    }(2);
)
<!--返回值赋值给num-->
<!--执行完就被释放-->

2.3 常见写法的注意事项

//1.只有表达式才能被执行符号执行,会忽略表达式的名字
//2.我们正常函数执行的写法如下
function test(){
};
test();
// 但是直接在函数声明后接执行符号,是不可以的,会报语法错误
function test(){
}();

//3.凡是能变成表达式就能被执行
var test = function () {
}();
// 执行一次后被永久销毁
// 表达式部分 = function(){
// }()

//4.最先识别哪个括号
(--这种写法最外面先
function test(){}()
--);

(--这种写法最前面先
function test(){}
--)
();
//可以没有test名称

//5.当有参数时,不报错,但也不执行
function test(a,b,c,d){
    console.log(a+b+c+d);
}(1,2,3,4);

实际分成了两个部分
function test(a,b,c,d){
    console.log(a+b+c+d);}
和
(1,2,3,4);//4,输出个数

2.4 作用

通过定义一个匿名函数,创建了一个新的函数作用域,相当于创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。此时若是想访问外部对象,将外部对象以参数形式传进去即可。

3、let

还是上面那个问题,我们看看下面的代码

        // let
        for (let i = 0; i < len; i++) {
            items[i].onclick = function () {
                console.log(i);
            }
        }

和我们第一个版本一样,只是把var声明的i换成了let的声明方式,但是结果已经没有任何问题了。 为什么仅仅改动了这一点,就解决了我们之前的问题呢? 其实这个问题的本质原因,还是var带来的作用域的问题,接下来,我们来看一看,let,到底是什么?

3.1 什么是let

let语句,声明一个块范围变量。 let是ES6中新增关键字。它的作用类似于var,用来声明变量,用法也类似,但是let是存在块级作用域的。

let variable1 = value1;

3.2 特性

1.使用 let 语句声明一个变量,该变量的范围限于声明它的块中。不能在外部访问该变量,可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值。

var  l = 10;
{//注意这里仅仅是一个块级作用域
    let l = 2;
    console.log(l);// 这里 l = 2.
    let m = 4;
    console.log(m);// 这里 m = 4.
}
console.log(l);// 这里 l = 10.

console.log(m);//报错

相反,对于var,最小级别是函数作用域的。 所以在for循环中,var声明的i是所在函数的作用域,而let则是for循环及循环体内的作用域,所以里面的语句可以访问到对应的i。 2.使用 let 声明的变量,在声明前无法使用,否则将会导致错误。(不存在变量提升了)

console.log(index);
let index;

3.如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined。

let index;
console.log(index);

3.3 解读for循环中的let

        for (let i = 0; i < len; i++) {
            items[i].onclick = function () {
                console.log(i);
            }
        }

对于var来说,形成的闭包始终获取到的都是循环完成后被改变的最终的i 而对于let,每一个i都是独立在当前块级作用域的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量。而JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

其实,所谓的for循环带来的闭包问题,其实就是变量作用域的问题,解决方式很多种,基本上可以用立即执行函数和let变量声明来解决,其次,具体情具体分析。

回到顶部