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

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.

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

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

EDIT: Я обновил код, чтобы отразить более реалистичную ситуацию (я не знаю, что это будет настолько сложным)

EDIT 2: Другого обновления кода. Я не заметил, что я написал var insted этого. Сожалею.

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

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

Вот что на самом деле означает Šime Vidas

"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; 
    } 
} 

Answer 4

Этот вариант проходит через 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"; 
} 

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