Javascript 对象方法不可访问/未定义

Question

首先，我知道有数百万个这样的问题。但我无法帮助我。

我在加载所有图像后调用 draw 方法。如您所见，当我尝试访问 draw 方法中的变量 (loadedImages, this) 时，我得到了未定义的结果。

为什么会这样，我怎样才能得到这些变量？

var canvas = $('#area')[0],
    context = canvas.getContext('2d');

function Character() {
    return {
        images: ["hair.png", "head.png", "mouth.png"],
        loadedImages: {},
        init: function() {
            this.loadImages();
        },
        loadImages: function() {
            var loaded = 0,
                imagesLength = this.images.length,
                draw = this.draw;

            for(var i = 0; i <= imagesLength - 1; i++) {
                var image = new Image(),
                    bodyPart = this.images[i];

                image.onload = function() {
                    loaded++;

                    if(loaded == imagesLength) {
                        draw();
                    }
                };

                image.src = 'characters/Canser/' + bodyPart;

                this.loadedImages[bodyPart.split(".")[0]] = image;
            }
        },
        draw: function() {
            console.log(this); // undefined???
        }
    };
}

var canser = new Character();

canser.init();

Answer 1

将这个存储在那个中并使用 that.draw()

var canvas = $('#area')[0], 上下文 = canvas.getContext('2d');

function Character() {
    return {
        images: ["hair.png", "head.png", "mouth.png"],
        loadedImages: {},
        init: function() {
            this.loadImages();
        },
        loadImages: function() {
            var loaded = 0,
                that = this,
                imagesLength = this.images.length,
                draw = this.draw;

            for(var i = 0; i <= imagesLength - 1; i++) {
                var image = new Image(),
                    bodyPart = this.images[i];

                image.onload = function() {
                    loaded++;

                    if(loaded == imagesLength) {
                        that.draw();
                    }
                };

                image.src = 'characters/Canser/' + bodyPart;

                this.loadedImages[bodyPart.split(".")[0]] = image;
            }
        },
        draw: function() {
            console.log(this); // undefined???
        }
    };
}

Javascript 对象方法不可访问/未定义

Javascript Object Method Inaccessible / Undefined

javascript

object

undefined