2

我有以下功能 

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

我怎样才能使这个代码工作？
我希望在调用 onload 函数时将 Player 函数中的宽度和高度与图像的宽度和高度一起初始化。

我需要这个在严格模式下工作（必须）。

如果这应该以另一种方式完成，请随意教。

编辑：我更新了代码以反映更现实的情况（我不知道这会如此复杂）

编辑 2：代码的另一个更新。我没有注意到我写了 var insted 这个。对不起。

提前致谢

4

4 回答 4

2

我从您的评论中收集到的是您希望能够从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);
});
于 2012-01-12T21:11:25.823 回答
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.
    } 
}
于 2012-01-12T19:54:33.113 回答
0

这就是Š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;
    }
}
于 2012-01-12T20:19:43.387 回答
0

此变体通过 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";
}

请注意，您应该放置“使用严格”；内部功能而不是外部。

于 2012-01-12T20:50:16.513 回答