Установить переменную в другом контексте

Question

У меня есть следующая функция

"use strict";
function Player
{
    this.width;
    this.height;
    this.framesA = 5;

    this.image = new Image();
    this.image.onload = function ()
    {
        width = this.width;
        height = this.height / framesA;
    }
    this.image.src = "Images/angel.png";
}

Как я могу заставить этот код работать?
Я хочу, чтобы ширина и высота в функции Player изменялись вместе с шириной и высотой изображения при вызове функции onload.

Мне нужно это для работы в строгом режиме (обязательно).

Если это будет достигнуто другим способом, не стесняйтесь учить.

РЕДАКТИРОВАТЬ: Я обновил код, чтобы отразить более реалистичную ситуацию (я не знал, что это будет так сложно)

РЕДАКТИРОВАТЬ 2: Еще одно обновление кода. Я не заметил, что написал об этом. К сожалению.

Заранее спасибо

Answer 1

Из ваших комментариев я понял, что вы хотите иметь доступ к ширине и высоте вне функции Player, и проблема в том, что вы не знаете, когда доступны ширина и высота.

Если это правильно, все становится немного сложнее.Поскольку вы не знаете, когда будет загружено изображение и не могут иметь ширину и высоту до его загрузки (если вы не укажете их в теге img на стороне сервера), вам необходимо использовать функцию, которая принимает обратный вызовчтобы получить доступ к ширине и высоте проигрывателя.

По сути, если ширина и высота еще не известны, функция просто помещает обратный вызов в очередь.Когда ширина и высота определены, все функции в очереди вызываются с шириной и высотой, передаваемой им в качестве аргументов.Если измерения уже известны, когда вызывается функция, она должна просто немедленно вызвать функцию обратного вызова с правильными аргументами.

Вот как я бы это сделал:

function Player() {
    'use strict';

    // Store this in a variable so the onload handler can see it.
    var that = this;
    var callbacks = [];

    this.frames = 5;

    this.getDimensions = function (callback) {
        // We don't have the dimensions yet, so put the callback in the queue.
        callbacks.push(callback);
    };

    this.image = new Image();
    this.image.onload = function () {
        var width = this.width;
        var height = this.height / that.frames;

        // Call each of the registered callbacks.
        var i;
        for (i = 0; i < callbacks.length; i += 1) {
            callbacks[i](width, height);
        }
        // Don't keep unnecessary references to the functions.
        callbacks = null;

        // We now know the dimensions, so we can replace the getDimensions
        // function with one that just calls the callback.
        that.getDimensions = function (callback) {
            callback(width, height);
        };
    };
    this.image.src = "Images/angel.png";
}

А воткак вы получите доступ к размерам:

var p = new Player();
p.getDimensions(function (width, height) {
    console.log("Player's width is " + width + " and height is " + height);
});

Answer 2

Просто установите переменные и выполните манипуляции с событием onload, и они останутся в области видимости.

"use strict";
function Player
{
    this.image = new Image();
    this.image.src = "Images/angel.png";
    this.image.onload = function ()
    {
        var width = this.width;
        var height = this.height;
        // Do your manipulations within the `onload` event.
    } 
}

Answer 3

Этот вариант проходит через JSLint без проблем и также хорошо работает.Так в чем же проблема?

function Player() {
    "use strict";
    var width, height;
    this.image = new Image();
    this.image.onload = function () {
        width = this.width;
        height = this.height;
    };
    this.image.src = "Images/angel.png";
}

Обратите внимание, что вы должны поставить «использовать строгий»;скорее внутри, чем снаружи.

Answer 4

Вот что Шиме Видас действительно означает

"use strict";
function Player {
    this.image = new Image();
    this.image.src = "Images/angel.png";
}

Player.prototype.getWidth = function() {
    return this.image.width;
}

или, если вам нравятся объекты на основе замыкания

function Player {
    this.image = new Image();
    this.image.src = "Images/angel.png";
    this.getWidth = function() {
      return this.image.width;
    }
}