美文网首页
javascript闭包的理解

javascript闭包的理解

作者: ironman_ | 来源:发表于2017-10-19 21:05 被阅读0次

    感觉就跟java里的,非static的内部类会持有一个外部类的引用一样。
    当在一个方法1中定义一个方法2并返回这个方法2,在方法1外部调用方法2的时候,这个方法1就是一个闭包,方法2可以引用方法1内定义的变量。

    举例子:
    未使用闭包:

    function sayHello(name) {
      var text = 'Hello ' + name;
      var say = function() { console.log(text); }
      say();
    }
    sayHello('Joe');
    

    使用闭包

    function sayHello2(name) {
      var text = 'Hello ' + name; // Local variable
      var say = function() { console.log(text); }
      return say;
    }
    var say2 = sayHello2('Bob');
    say2(); // logs "Hello Bob"
    

    sayHello2是一个闭包

    闭包是引用,而不是原值的拷贝:

    function say667() {
      // Local variable that ends up within closure
      var num = 42;
      var say = function() { console.log(num); }
      num++;
      return say;
    }
    var sayNumber = say667();
    sayNumber(); // logs 43
    
    var gLogNumber, gIncreaseNumber, gSetNumber;
    function setupSomeGlobals() {
      // Local variable that ends up within closure
      var num = 42;
      // Store some references to functions as global variables
      gLogNumber = function() { console.log(num); }
      gIncreaseNumber = function() { num++; }
      gSetNumber = function(x) { num = x; }
    }
    
    setupSomeGlobals();
    gIncreaseNumber();
    gLogNumber(); // 43
    gSetNumber(5);
    gLogNumber(); // 5
    
    var oldLog = gLogNumber;
    
    setupSomeGlobals();
    gLogNumber(); // 42
    
    oldLog() // 5
    

    每次运行都会创建新的闭包

    在循环中使用闭包要格外小心,因为没有局部变量的说法,所以会改变引用(不能像java那样使一个变量变成final)

    function buildList(list) {
        var result = [];
        for (var i = 0; i < list.length; i++) {
            var item = 'item' + i;
            result.push( function() {console.log(item + ' ' + list[i])} );
        }
        return result;
    }
    
    function testList() {
        var fnlist = buildList([1,2,3]);
        // Using j only to help prevent confusion -- could use i.
        for (var j = 0; j < fnlist.length; j++) {
            fnlist[j]();
        }
    }
    
     testList() //logs "item2 undefined" 3 times
    

    变量在整个方法内有效,跟定义的顺序无关。

    function sayAlice() {
        var say = function() { console.log(alice); }
        // Local variable that ends up within closure
        var alice = 'Hello Alice';
        return say;
    }
    sayAlice()();// logs "Hello Alice"
    

    以上原文链接:
    https://stackoverflow.com/questions/111102/how-do-javascript-closures-work

    在看两个例子:

    var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
      };
      alert(object.getNameFunc()());
    
    var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };
        }
      };
      alert(object.getNameFunc()());
    

    以上原文链接:
    http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

    相关文章

      网友评论

          本文标题:javascript闭包的理解

          本文链接:https://www.haomeiwen.com/subject/bsajuxtx.html