为什么可以'；我不能在javascript中访问对象的属性吗？

我正在用javascript构建自己的照片库，部分是为了体验，部分是为了项目。现在，我遇到了一些关于对象的问题

---

创建图像对象时，会将其推送到Gallery对象中的数组中。在注释

//Constraint to width

（要点中的第55行）周围，我试图从对象中获取

width

和

height

属性。如果我在console.log中记录变量

img

，我可以看到对象的属性和功能。但是，如果I

console.log（img.height），我没有定义。我做错了什么

整个文件如下。这也是为了便于阅读

var Image = function(img, gallery){
    // init with an image in jquery form
    this.src = img.attr('src');

    this.setDimensions = function(){
        var temp_height, temp_width;
        $this = this;
        $this.image = $('<img />').attr('src', this.src).load(function(){
            $this.height = this.height;
            $this.width = this.width;
        });
    };

    // init functions
    this.setDimensions();
    gallery.images.push(this);


}; // Image

var Gallery = function(){
    this.width = $(window).width();
    this.height = $(window).height();
    this.images = [];

    this.createElements = function(){
        $('body').append('<div id="the_gallery"></div>');
        $('#the_gallery').css({width: this.width, height: this.height});
    };

    this.open = function(){
        this.createElements();

        var img = this.images[0];

        // see if the image is bigger than the window
        if( this.width >= img.width && this.height >= img.height) {
            console.log('image < window');
            // just show the image, centered
        }

        else {
            console.log('image > window');
            var temp_width, temp_height;
            // constrain to height
            if( img.width < img.height ) {
                console.log('image width < image height');
                temp_height = this.height;
                temp_width = (temp_height/img.height) * img.width;

                img.css({height:temp_height, width:temp_width});

            }

            // constrain to width
            else {
                console.log('image width > image height');
                temp_width = this.width;
                temp_height = (temp_width/img.width) * img.height;
                img.image.css({height:temp_height, width:temp_width});
            }

        }

        img.image.appendTo($('#the_gallery'));

    }; // open

    this.close = function(){
        $('#the_gallery').remove();
    }; // close
}; // Gallery

$(document).ready(function(){
    $('#gallery img').click(function(){
        launchGallery($(this));
    }); // click

    var gallery = new Gallery(),
        test = new Image($('#gallery img:first'), gallery);

    gallery.open();
}); // doc ready

var Image=函数（img，画廊）{
//使用jquery格式的图像初始化
this.src=img.attr（'src'）；
this.setDimensions=函数（）{
变量温度高度、温度宽度；
$this=这个；
$this.image=$（''）；
$（'theu gallery'）.css（{width:this.width，height:this.height}）；
};
this.open=函数（）{
这是createElements（）；
var img=this.images[0]；
//查看图像是否比窗口大
如果（this.width>=img.width&&this.height>=img.height）{
console.log（'imagewindow'）；
变量温度宽度、温度高度；
//约束到高度
if（img.宽度图像高度'）；
temp_width=此宽度；
温度高度=（温度宽度/模宽）*模高；
css（{height:temp\u height，width:temp\u width}）；
}
}
img.image.appendTo（$（'the#u gallery'）；
}；//打开
this.close=函数（）{
$（“#the#u gallery”）.remove（）；
}；//关闭
}; // 画廊
$（文档）.ready（函数（）{
$（“#图库img”）。单击（函数（）{
launchGallery（$（本））；
})；//单击
var gallery=new gallery（），
测试=新图像（$（“#图库img:first”），图库；
画廊开放（；
}); // 医生准备好了吗
对此我不确定：但值得一试。
而不是“$（'#the_gallery'）.css（{width:this.width，height:this.height}）；”

也许可以试试这个：

“$（'the#u gallery'）.css（'width'，this.width+'px'）.css（'height'，this.height+'px'）；”
我投票赞成结束，但这里有一些帮助：

调用
new Image
时，当
load
事件触发时，您将重新加载它并设置
width
和
height
。这是在剩下的代码运行之后——当您到达第55行时，图像可能还没有加载

一个简单的解决方案是直接从
img.width（）
获取宽度/高度，并始终在
window.onload
上运行插件。如果您想支持动态加载的图像，您必须熟悉该逻辑，并在构建库之前等待所有内容加载完毕

另外，避免泄漏全局变量，因为在
$this=this
（第7行）中缺少
var
。
该部分工作正常。它是向下的，带有img.width和img.heights，这样我可以问一些更好的问题，为什么向下投票和投票要结束？“如果我console.log变量img，我可以看到对象的属性和功能。但是，如果我console.log（img.height）；”@pst，这是一个计时/异步问题，实际上正在发生。我也很困惑。这可能与您当前的问题无关，但您应该重命名您的对象<代码>图像

是内置的主机对象（DOM 0）；覆盖它（您正在执行的操作）可能会导致其他脚本中断。@hookedonwinter，该语句再次成立。第一个地址是可靠的诊断基础，可以写一个有用的标题。我没有投票，但我也不会投票。啊，没有考虑时间问题。控制台提示问题在别处（），但是，我肯定会更新它。我正在重新加载它，因为图像最初显示为缩略图-通过css而不是其他图像-因此

.width（）

仅显示100px。FF中的抽查显示这肯定是一个时间问题。谢谢@Hookedon Winter这里有一个快速重写，记住了这个问题：