javascript「this」關鍵字不是指正確的東西

var ball = { 
    x: 20, 
    y: 500, 
    vx: 100, 
    vy: 100, 
    width: 13, 
    height: 13, 
    draw: function() { 
     var img = new Image(); 
     img.src = 'images/ball.png'; 
     img.onload = function(){ 
      ctx.drawImage(img, this.x, this.y); 
     }; 
    },

我想要drawImage（）代碼行引用ball.x和ball.y.我不想使用ball.x和ball.y，而是使用「this」關鍵字，這樣我就可以將球對象轉換爲一個函數，該函數是一個質量構造函數/原型，如果我最終想要（可以使ball1，ball2 ，ball3等）。我認爲「這個」不再是指球，因爲它在嵌套函數中？沒有將ball.x和ball.y硬編碼到drawImage參數的方法嗎？javascript「this」關鍵字不是指正確的東西

來源

2013-07-21 user2602079

也許定義屬性'自我：this'和替換'this'在你的onload功能'self'？ – jonhopkins

@jonhopkins在對象文字中指定'self：this'不起作用。不過，他可以在'draw'函數中使用'var self = this;'。 – basilikum

逗號和缺少'};'最後會導致語法錯誤。 – pstanton

是的，基本上你需要使用一個closure。你所需要做的就是通過它們的父代來引用這些變量，而不是通過使用這個，這實際上是指函數中的img元素。因此，只要改變你的代碼，以

ctx.drawImage(img, ball.x, ball.y);

甚至

ctx.drawImage(this, ball.x, ball.y);

來源

2013-07-21 22:00:21 seanmk

這是關於JavaScript棘手的事情之一：this是動態的。簡單地說，解決的辦法是把你想要的this在一個變量，而你擁有了它，並使用該變量來引用它：

var ball = { 
    // ... 
    draw: function() { 
     // ... 
     var myself = this; 
     image.onload = function() { 
      // use myself rather than this 
     }; 
    } 
};

另一種解決方法是修復的this值。即使用bind完成：

var ball = { 
    // ... 
    draw: function() { 
     // ... 
     image.onload = function() { 
      // ... 
     }.bind(this); 
    } 
};

這將的this的onload函數內部的值綁定到不管它是什麼時候draw被調用。後一種解決方案在舊版瀏覽器上無法使用，但它很容易被掃描。

來源

2013-07-21 22:01:40 icktoofay

我用你的第一種方法，它的工作。謝謝！ – user2602079

var ball = function(){ 
    this.x= 20; 
    this.y=500; 
    this.vx= 100; 
    this.vy= 100; 
    this.width= 13; 
    this.height= 13; 
} 

ball.prototype = { 
    draw: function() { 
     var img = new Image(); 
     img.src = 'images/ball.png'; 
     var balref = this; 
     img.onload = function(){ 
      ctx.drawImage(img, balref .x, balref.y); 
     } 
} 

var myball = new ball(); 
myball.draw();

注：未測試

來源

2013-07-21 22:01:48 Desu

javascript「this」關鍵字不是指正確的東西

回答

相關問題