Javascript 对象：这两个值有何不同？答案

【问题标题】：Javascript objects: how are these two values different?Javascript 对象：这两个值有何不同？
【发布时间】：2013-12-01 10:04:00
【问题描述】：

我对 OOP 还是很陌生，我无法辨别为什么我会为两个控制台日志获得不同的值。第一个日志给了我正确的高度值，第二个通过对象属性访问该值的日志告诉我高度为 0。我也可以说，如果我在 imageLoader.images[this.sprite] 和 player1.height 上运行控制台日志当this.height = imageLoader.images[this.sprite]（所以基本上我从每个值中删除了 .height 属性）时，第一个日志正确命名精灵，即使它已被动态更改，而第二个日志再次不正确，只命名对象的精灵在创建时分配（来自 imageName 参数）。

作为一点背景，构造函数正在从对象 imageLoader 中的对象 images 中提取图像，每个实际图像都包含在一个以图像的名称。我想通过每个新事物的高度属性访问每个图像的高度。

function Thing(imageName) {
    this.sprite = imageName;
    this.height = imageLoader.images[this.sprite].height;
}

var player1 = new Thing ("face_right");

console.log(imageLoader.images[player1.sprite].height);
console.log(player1.height);

希望这有点清楚。感谢您的观看。

【问题讨论】：

对，实例化和日志之间一定有什么东西。请描述一下。

标签： javascript oop

【解决方案1】：

您没有显示任何会导致精灵更改的代码，但您似乎在说您希望 player1.height 自动更新以反映当前精灵的高度，精灵可以动态更改?如果是这样，它将无法按照您当前的方式工作，因为您设置的 this.height 属性将只是一个原始数字值 - 它不是对其他对象属性的引用。当精灵更新时，您需要添加代码来更改 Thing 实例的 .height 属性。

或者不使用.height 属性，而是使用.height() 方法 - 或者将其称为.getHeight()，如下所示：

function Thing(imageName) {
    this.sprite = imageName;
    this.getHeight = function() {
        return imageLoader.images[this.sprite].height;
    }
}

var player1 = new Thing ("face_right");
console.log(player1.getHeight());

【讨论】：