Question

即使重新声明变量，第一个foo的数据如何保留？

详细说明，尽管该对象已重新声明，但第一个bar属性仍然增加。每个按钮都有自己独立的计数器：

var foo = {
    bar: 1,
    bindClick: function(){
        var that = this;
        $('#first').on('click', function(){
            console.log(that.bar++);
        });
    }
};

foo.bindClick();

var foo = {
    bar: 1,
    bindClick: function(){
        var that = this;
        $('#second').on('click', function(){
            console.log(that.bar++);
        });
    }
};

foo.bindClick();

http://jsfiddle.net/kdzjx2d3/

Answer 1

var that = this;

此行维护对原始对象的引用;你实例化的第一个。即使该变量名被重用于其他东西，因为该事件监听器和该闭包仍然存在，它仍然被引用到某个地方。

（不会提供更改建议，因为您似乎对推理感到好奇。如果您有特定的行为，请随意添加更多问题）

Answer 2

使用自执行功能来创建范围。引用的foo内部与外部foo不同，因此即使它们具有相同的名称也不会被覆盖

var foo = {
    bar: 1,
    bindClick: function(){
        var that = this;
        $('#first').on('click', function(){
            console.log(that.bar++);
        });
    }
};

foo.bindClick();

(function() {
    var foo = {
        bar: 1,
        bindClick: function() {
            var that = this;
            $('#second').on('click', function(){
                console.log(that.bar++);
            });
        }
    };

    foo.bindClick();
}())

Answer 3

取消第二个foo的var。重新定义并不是真的要擦拭＆＃39;第一个对象。从本质上讲，我认为Javascript并没有完全覆盖foo变量的值 - 它只会覆盖差异，即bindClick定义。 foo对象仍然指向bar的相同引用，因为该值未被对新foo的引用所取代bar财产。

var foo = {
    bar: 1,
    bindClick: function(){
        var that = this;
        $('#first').on('click', function(){
            console.log(that.bar++);
        });
    }
};

foo.bindClick();

foo = {
    bar: 1,
    bindClick: function(){
        var that = this;
        $('#second').on('click', function(){
            console.log(that.bar++);
        });
    }
};

foo.bindClick();

您是否尝试创建同一对象的两个实例？如果是这样，最好做一些事情：

var foo = function() {
    this.bar = 0;
    this.bindClick = function() {
        this.bar++;
    }
}

var first = new foo();
first.bindClick();

重新声明的变量中的持久数据

3 个答案: