Javascript 对象值没有得到正确的值

Question

我正在编写一个类(class)项目(我们必须使用 HTML5 canvas 构建一个 Frogger 游戏)并且我有一堆对象可以帮助我处理碰撞检测、移动等不同的事情。

下面的对象就是其中之一。每个 View 都包含一个 Frame 对象，该对象包含一个函数调用 hitTest，用于检查其框架是否与传入的框架发生碰撞。出于某种原因，this.lr 保留了它在游戏开始时最初设置的值，我不明白为什么它没有根据不断变化的原点进行更新。

function Frame(origin, size) {
    this.origin = utility.checkPoint(origin);
    this.size = utility.checkSize(size);
    var self = this;

    this.lr = (function () {
        return utility.checkPoint(new Point(self.origin.x + self.size.width, self.origin.y + self.size.height));
    }());

    this.tr = (function () {
        return utility.checkPoint(new Point(self.origin.x + self.size.width, self.origin.y));
    }());

    this.ll = (function () {
        return utility.checkPoint(new Point(self.origin.x, self.origin.y + self.size.height));
    }());

    /* Returns true if the two frames share any common pixels */

    this.hitTest = function (frame) {
        var isInXBounds = function (p) {
            return (p.x >= self.origin.x && p.x <= self.tr.x);
        };

        var isInYBounds = function (p) {
            return (p.y >= self.origin.y && p.y <= self.lr.y);
        };

        var isContained = function (p) {
            return (isInXBounds(p) && isInYBounds(p));
        };

        return isContained(frame.origin) || isContained(frame.tr) || isContained(frame.lr) || isContained(frame.ll);
    };
}

Answer 1

这就是我编写您的 Frame 类的方式:

Frame.prototype.lr = function () {
    var x = this.origin.x + this.size.width;
    var y = this.origin.y + this.size.height;
    return utility.checkPoint(new Point(x, y));
};

Frame.prototype.tr = function () {
    var x = this.origin.x + this.size.width;
    return utility.checkPoint(new Point(x, this.origin.y));
};

Frame.prototype.ll = function () {
    var y = this.origin.y + this.size.height;
    return utility.checkPoint(new Point(this.origin.x, y));
};

Frame.prototype.isContained = function (point) {
    var isInXBounds = point.x >= this.origin.x && point.x <= this.tr().x;
    var isInYBounds = point.y >= this.origin.y && point.y <= this.lr().y;
    return isInXBounds && isInYBounds;
};

Frame.prototype.hitTest = function (frame) {
    return this.isContained(frame.origin) || this.isContained(frame.tr) ||
           this.isContained(frame.lr) || this.isContained(frame.ll);
};

function Frame(origin, size) {
    this.origin = utility.checkPoint(origin);
    this.size = utility.checkSize(size);
}

对于具有古典背景的人来说，原型(prototype)继承可能会让人望而生畏。这是原型(prototype)继承的简单解释:https://stackoverflow.com/a/8096017/783743

有很多库可以帮助传统程序员使用 JavaScript。例如我自己的augment图书馆。以下是使用 augment 编写上述类的方法:

var Frame = Object.augment(function () {
    this.constructor = function (origin, size) {
        this.origin = utility.checkPoint(origin);
        this.size = utility.checkSize(size);
    }

    this.lr = function () {
        var x = this.origin.x + this.size.width;
        var y = this.origin.y + this.size.height;
        return utility.checkPoint(new Point(x, y));
    };

    this.tr = function () {
        var x = this.origin.x + this.size.width;
        return utility.checkPoint(new Point(x, this.origin.y));
    };

    this.ll = function () {
        var y = this.origin.y + this.size.height;
        return utility.checkPoint(new Point(this.origin.x, y));
    };

    this.isContained = function (point) {
        var isInXBounds = point.x >= this.origin.x && point.x <= this.tr().x;
        var isInYBounds = point.y >= this.origin.y && point.y <= this.lr().y;
        return isInXBounds && isInYBounds;
    };

    this.hitTest = function (frame) {
        return this.isContained(frame.origin) || this.isContained(frame.tr) ||
               this.isContained(frame.lr) || this.isContained(frame.ll);
    };
});

此外，由于您想知道真正的闭包是什么，我建议您阅读以下答案:https://stackoverflow.com/a/12931785/783743