0

我想达到什么目标？

我有一个名为 Looper 的课程。我想给每个对象一个名字和一个自己的活套。

我期望的结果

Created Looper Object...
one
Created Looper Object...
two
one - 1
two - 1
one - 2
two - 2
one - 3
two - 3
one - 4
two - 4
one - 5
two - 5
.......

我的代码

使用此代码，我希望它可以工作.. 

var Looper = (function (window, document, $) {

    this.i = 1;

    var Looper = function () {
        console.log('Created Looper Object...');
    }

    var getName = function () {
        return this.name;
    }

    var setName = function (newName) {
        this.name = newName;
    }

    var loop = function () {
        console.log(getName() + ' - ' + this.i);
        this.i = this.i + 1;
    }

    var startLoop = function () {
        window.setInterval(loop, 1000);
    }

    Looper.prototype = {
        getName: getName,
        setName: setName,
        start: startLoop
    }

    return Looper;
})(window, document, jQuery);

var one = new Looper();
one.setName('one');
console.log(one.getName());
one.start();

var two = new Looper();
two.setName('two');
console.log(two.getName());
two.start();

jsFiddle 示例

我的结果

但它并没有...... 

Created Looper Object...
one
Created Looper Object...
two
result - 1
result - 2
result - 3
result - 4
result - 5
.......

有人能告诉我为什么没有吗？

我的问题是可以this.name为每个对象设置。

但我不能this.i为每个对象设置。他们互相超越i。看起来this.i是静态的？！？！？

当我使用console.log(two.getName());它时也有效。但在循环内this.name是result？

4

1 回答 1

2

您需要this.i = 1;在构造函数内部创建属性：

var Looper = function () {
    this.i = 1;
    console.log('Created Looper Object...');
}

在您当前的代码中，this关键字指的是全局对象 ( window)，因此您实际上是在创建一个全局变量（这是某种“静态”，是的）。

类似的事情发生在调用 from 的函数中setInterval，this再次设置为全局对象（这就是它找到数字的原因）。您需要在实例上显式调用您的loop方法Looper，例如通过

var startLoop = function () {
    var that = this;
    window.setInterval(function() {
       loop.call(that); // "that" refers to the Looper object, while "this" does not
       // if "loop" were a method on the Looper, it's equivalent to
       // that.loop()
    }, 1000);
}

或通过bind

var startLoop = function () {
    window.setInterval(loop.bind(this), 1000);
}

此外，在loop函数内部，您需要getName作为当前 Looper 对象的方法调用：

this.getName()

似乎增加了一点混乱，您的所有函数/方法不仅可以在对象的（继承的）属性上访问，而且还可以作为模块中的局部变量访问。请注意，JavaScript 没有类，并且this不像在 Java 中那样工作——您总是需要明确区分变量和属性。您的模块应该看起来更像这样：

var Looper = (function() {

    function Looper() {
        this.i = 1;
        this.name = null;
        console.log('Created Looper Object:', this);
    }

    Looper.prototype.getName = function() {
        return this.name;
    };
    Looper.prototype.setName = function(newName) {
        this.name = newName;
    };
    Looper.prototype.start = function() {
        var that = this;
        window.setInterval(function() {
            console.log(that.getName() + ' - ' + that.i);
            that.i++;
        }, 1000);
    };

    return Looper;
});
于 2013-04-11T14:49:48.967 回答