2016-10-15 5 views
1
var Context = { 
    canvas: null, 
    context: null, 
    create: function(canvas_tag_id, size){ 
     this.canvas = document.getElementById(canvas_tag_id); 
     this.canvas.width = size[0]; 
     this.canvas.height = size[1]; 
     this.context = this.canvas.getContext('2d'); 
     return this.context; 
    }, 
    fps:1/30 
}; 

$(function(){ 

// Initialize 
Context.create('canvas', [798, 652]); 

var s_size = [Context.canvas.width, Context.canvas.height]; // screen size 

function Player(){ 
    this.rect = [0, s_size[1]-40, 20, 40]; 
    this.color = 'blue'; 

    this.create = function(){ 
     // function for creating player object 

     Context.context.beginPath(); 
     Context.context.fillStyle = this.color; 
     Context.context.rect(
      this.rect[0], this.rect[1], this.rect[2], this.rect[3]); 
     Context.context.fill(); 
    }; 

    this.control = function(){ 
     // player movement control function 

     if (event.which == 39 || event.keyCode == 39){ 
      alert(this.rect); 
     } 
    }; 

    this.update = function(){ 
     this.rect[0] += 1; 
    } 
} 

// player instance creation 

var archie = new Player(); 

// game loop functions 

function events(){ 
    // Keydown events 

    function keydown(){ 
     window.addEventListener('keydown', archie.control); 
    } 

    keydown(); 
} 

function update(){ 
    archie.update(); 
} 

function render(){ 
    Context.context.clearRect(0, 0, canvas.width, canvas.height); 

    archie.create(); 
} 

function game(){ 
    events(); 
    update(); 
    render(); 
} 

setInterval(game, Context.fps); 
}); 

Как вы можете видеть, что проблема заключается не в организациях коды, но обработчик событий, так как метод обновления класса воспроизведения проигрывателя работает нормально, даже если он создан после того, как обработчик события. Что конкретно представляет собой проблема и как ее решить?Javascript конструктора свойство становится неопределенным после того, как событие называется

+0

Что такое конструктор? когда он выглядит так, как ожидалось, и когда он «неопределен»? – joews

+0

конструктор игрока, и он не выглядит так, как ожидалось, и он не определен, когда событие вызывается в этом случае, когда я пытаюсь переместить игрока вправо. –

ответ

0

Внутри обработчика событий, this всегда элемент обработчик событий был связан с, а не конструктор функции передается в.

Чтобы написать код намного короче, вы делаете

var Player = function() { 

    this.rect = "something"; 

    this.control = function(){ 
     if (event.which == 39 || event.keyCode == 39){ 
      alert(this.rect); // NOPE ... this is the element 
     } 
    }; 
} 

var archie = new Player(); // create instance 

window.addEventListener('keydown', archie.control); // some function in the instance 

Если вы просто должны иметь объект в качестве значения this используйте BIND

window.addEventListener('keydown', archie.control.bind(archie)); 

Также обратите внимание, что ваш обработчик события callb извед пропускает event аргумент, и опираясь на мировой event, которая не поддерживается во всех браузерах (Firefox), так что вы должны делать

this.control = function(event) {... 
+0

Спасибо, я думаю, теперь понимаю. В основном функции событий также используют ключевое слово «this», поэтому конструктор и он мешают друг другу. Это означает, что решение должно иметь событие вне конструктора. –

0

Другое решение, которое я часто использую для хранения this значение в другой переменной ех. self и использовать эту копию в любом месте, так что это может быть:

var Player = function() { 

    var self = this; 

    self.rect = "something"; 

    self.control = function(event){ 
     if (event.which == 39 || event.keyCode == 39){ 
      alert(self.rect); 
     } 
    }; 
} 

Это даст вам гарантии использования, что вы хотите, потому что this основан на контексте выполнения метода.