为什么我不能在 javascript 中访问对象的属性？

Question

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

当一个 Image 对象被创建时，它被推送到 Gallery 对象中的一个数组中。围绕评论// constrain to width（要点中的第55 行），我试图从对象中获取width 和height 属性。如果我 console.log 变量img，我可以看到对象的属性和功能。但是，如果我console.log(img.height);，我会不确定。我做错了什么？

整个文件如下。也是here in a gist，方便阅读。

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

Answer 1

我投票赞成关闭，但这里有一些帮助：

当您调用new Image 时，您重新加载它并在load 事件触发时设置width 和height。那是 在 其余代码运行之后 - 当您到达第 55 行时，图像可能尚未加载。

一个简单的解决方案是直接从img.width() 获取宽度/高度，并始终在window.onload 上运行插件。如果您想支持动态加载的图像，您必须重新了解该逻辑，并等到所有内容都加载完毕后再构建图库。

另外，避免泄漏全局变量，您在 $this = this 中缺少 var（第 7 行）。

Answer 2

对此我不确定：但值得一试。 而不是“$('#the_gallery').css({width: this.width, height: this.height});”

不妨试试这个：

"$('#the_gallery').css('width', this.width +'px').css('height', this.height +'px');"