Javascript 闭包，函数总是指向数组中的最后一个对象

Question

大家好，我有以下代码

POINT = function () {
    that = {};
    that.x = 0; that.y = 0;

    that.setPoint = function (x, y) {
        that.x = x;
        that.y = y;
    };

    that.toString = function () {
        return that.x + ',' + that.y + ' ';
    };    

    return that;
};

PEN = function () {
    var that = {};
    var points = [];
    var buffer_size = 5, head = -1, length = 0;

    // Init buffer
    for (var i = 0; i < buffer_size; i++) {
        points.push(POINT());
    }

    that.addPoint = function (x, y) {
        head = (head + 1) % buffer_size;
        points[head].setPoint(x, y);
        if (length < buffer_size) {length++;}
    };

    that.toString = function (path) {
        var d = '';
        for (var i = 0; i < length; i++) {
            var index = (head - i) < 0 ? buffer_size + (head - i) : (head - i);
            d += points[index].toString();
        }
        return d;
    };

    return that;
};

// Initialization
var i = 0, pen = PEN();

for (var i = 0; i < 10; i++) {
    pen.addPoint(i + 1, i + 1);
}

alert(pen.toString()); // RESULT 10,10 10,10 10,10 10,10 10,10

points 数组填充了正确的pen 对象，但是函数setPoint 总是指向最后一个pen points 数组中的对象。

注意:我想让 x 和 y 坐标可以直接访问，因此我没有声明 x 和 y 使用 var 作为“本地”变量。

示例的 fiddle 可以在这里找到:http://jsfiddle.net/DNVjy/2/

Answer 1

你应该把你的 vars 放到一个 var :-)

现在您正在窗口对象上定义函数和局部“that”。现在的代码不需要“that”。

试试这个:

function POINT() {

    this.x = 0; this.y = 0;

    this.setPoint = function (x, y) {
        this.x = x;
        this.y = y;
    };

    this.toString = function () {
        return this.x + ',' + this.y + ' ';
    };    

    return this;
};

function PEN() {
    var points = [];
    var buffer_size = 5, head = -1, length = 0;

    // Init buffer
    for (var i = 0; i < buffer_size; i++) {
        points.push(new POINT());
    }

    this.addPoint = function (x, y) {
        head = (head + 1) % buffer_size;
        points[head].setPoint(x, y);
        if (length < buffer_size) {length++;}
    };

    this.toString = function (path) {
        var d = '';
        for (var i = 0; i < length; i++) {
            var index = (head - i) < 0 ? buffer_size + (head - i) : (head - i);
            d += points[index].toString();
        }
        return d;
    };

    return this;
};

你现在像这样声明一支笔:

var pen = new PEN();

(还要注意 PEN“类”中的 new POINT() 关键字)。