首页 >web前端 >js教程 >JavaScript闭包的解析(附代码)

JavaScript闭包的解析(附代码)

不言
不言转载
2019-03-05 14:09:411930浏览

本篇文章给大家带来的内容是关于JavaScript闭包的解析(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。了解闭包前首先需要了解变量作用域

变量作用域:全局变量和局部变量
1、全局变量
直接定义在全局作用域的变量

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

而函数可以直接读取全局变量

2、局部变量
直接定义在函数内部的变量(在ES6之前JS是没有块级作用域的。)

function getName(){
  var name='Fakin';
}
alert(name)//undefined

闭包
搞清楚了这两个东西后咱们在来看下闭包是什么回事!

问题1:闭包是个啥玩意,上面说了一堆,我看不懂啊?
答:闭包个人理解就是能读取其他函数内部变量的函数

问题2:闭包怎么用
答:在一个函数的内部在创建一个函数,在这个函数中引用上一函数的变量,最后讲这个函数返回即可,是不是很绕,下面给例子

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000

如上例子中 f2就是闭包函数,在f1中返回函数f2,最后把f1赋值给result,result一共运行了两次,结果也得出了咱们想要的,也就证明了,在闭包中f2引用了f1的变量‘n’而‘n’没有因为f1执行完毕后然后在内存中销毁,大家应该知道,在JS中如果一个变量在函数执行完后没有被其他地方给引用的话,是就自动销毁的。

使用闭包需要注意的地方

1:由于闭包会使得函数中的变量都被保存在内存中,内存使用很大,会造成渲染卡顿等等,浏览器运行慢,在IE浏览器中还会造成内存泄露等问题
2:由于在闭包中子函数引用父函数的变量,子函数会修改父函数变量,请不要随意修改父函数变量的值

思考题

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

为什么f1 f2 f3都返回的是同一个值,而不是我们想要的呢?那怎么能不能闭包来解决呢?
其实也很简单,咱们闭包多两行代码就行

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自执行函数中把i传入相当于这个自执行函数的参数绑定了i,
       //当每次循环的时候不管变量怎么更改,这个函数的参数不会更改,所以返回咱们想要的结果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

以上是JavaScript闭包的解析(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文转载于:csdn.net。如有侵权,请联系admin@php.cn删除