search

Home  >  Q&A  >  body text

javascript - 两种函数写法的区别

看到一个答案(原答案链接)说下面两种写法的意义截然不同。比较困惑这两种写法到底有什么不同,第一种写法看起来复杂一些,添加一个中间函数c的意义是什么?

第一种写法:

function a(){

    var b = {};

    function c(){
        return b;
    }

    return c;
}

第二种写法:

function c(b){
    return b;
}
伊谢尔伦伊谢尔伦2903 days ago480

reply all(3)I'll reply

  • PHP中文网

    PHP中文网2017-04-10 15:16:14

    这个其实就是闭包的运用了。可以看看我刚总结的文章:闭包

    你可以说他们没区别,因为它们实现的效果都相同;
    你也可以说它们有区别,而且却别很大!因为它们实现的过程看起来会专业一些,用的好则提高代码质量和性能。具体来看下吧:

    function a(){
    
        var b = {};
    
        function c(){
            return b;
        }
    
        return c;
    }
    

    这种方式其实就是运用闭包实现的封装的形式,b成为了局部变量,减少了全局变量的污染,如果变量多的话,性能也是有提升的;如果你要修改b只能通过c方法,如果里面有其他重要数据,从而保证了数据的安全性!

    但是这种方式也存在很大弊端,就是会引起内存泄漏:

    var d = a();
    

    这样的话,只要我不手动清除d的引用,则变量b会一直占据内存空间,直至浏览器关闭,这就引起了内存泄露了。当然如果你后面的代码不需要用到d了:

     d = null;
    

    这样就解决内存泄露问题了。

    至于第二种写法的,没有太大的问题,主要是封装性不够,就比如你要写一个轮播插件,那你可能就要在其他地方定义很多的方法和属性了。不方便管理维护,同时也增加了很多其他作用域内的变量。

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 15:16:14

    第一种创建了一个闭包,即函数c可以访问其被声明时所处的上下文a中的变量b,同时在函数a外,无法访问到b,起到了私有变量的作用

    比如:

    function factory() {
      var items = [1,2,3,4,5], i = 0;
      return function() {
          return items[i++];
      }
    }
    
    var next = factory();
    console.log(next());  // 1
    console.log(next());  // 2
    
    // 这里无法直接获取items
    

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 15:16:14

    我再补充个有意思的:

    function foo(){
    
    var n = 0;
        return function(){
            n = n + 1;
            return n * n; 
        }
    }
    
    var next = foo();
    for(var i = 0;i<10;i++){
        console.log(next());
    }
    
    // 1
    // 4
    // 9
    // 16
    // 25
    // 36
    // 49
    // 64
    // 81
    // 100
    

    用闭包实现柯里化

    reply
    0
  • Cancelreply