Понимание того, почему я не могу ссылаться на this.property в Javascript «Класс»

Question

У меня есть следующие Protoype для интерактивного класса Video Player ...

// default constructor 
function BrightPlayer() { }; 

    // prototypes for basic properties 
    BrightPlayer.prototype.CurrentCourse = null; 
    BrightPlayer.prototype.CurrentTopic = null; 
    BrightPlayer.prototype.CurrentSubTopic = null; 
    BrightPlayer.prototype.CurrentTimestamp = null; 
    BrightPlayer.prototype.VideoSelector = null; 
    BrightPlayer.prototype.VideoObject = null; 

    BrightPlayer.prototype.Heartbeat = function() { 
     setInterval(this.ApplicationPulse, 1000); 
    }; 

    BrightPlayer.prototype.ApplicationPulse = function() { 
     // javascript errors occurs on the next line. 
     // VideoObject is undefined. 
     this.CurrentTimestamp = this.VideoObject.currentTime; 
     console.log('pulse....'); 
    }; 

    BrightPlayer.prototype.Init = function() { 
     // My thoughts were that the following line would initialize 
     // the VideoObject in this instance, and subsequent calls 
     // in the Application Pulse would have this reference, but it's not working 
     this.VideoObject = document.getElementById("brightplayer-video"); 
     this.Heartbeat(); 
    }; 

Класс конкретизируется и Init запускается с моей основной HTML страницы ,

<script> 
    var Aplayer = new BrightPlayer(); 
    Aplayer.Init(); 
</script> 

Однако, если добавить this.VideoObject = document.getElementById ("brightplayer-видео"); внутри функции ApplicationPulse она работает.

I.E.

BrightPlayer.prototype.ApplicationPulse = function() { 
      this.VideoObject = document.getElementById("brightplayer-video"); 
      this.CurrentTimestamp = this.VideoObject.currentTime; 
      console.log('pulse....'); 
     }; 

Это небрежно, хотя я не хочу, чтобы каждый элемент искал поиск элемента. Мне нужно что-то упустить при попытке связать классы Javascript с классами C#. Любая помощь, которую вы можете дать, будет очень признательна.

Answer 1

Проблема возникает из-за использования this.

setInterval определяется как функция браузера window объект. Контекст this при вызове от setInterval отличается тем, что равен window. Итак, все назначается на window. Свойство window.VideoObject не существует, и, следовательно, ваш код не работает.

this в javascript работает иначе, чем на C#. В javascript this связан как функция называется (игнорируя функции стрелок). Итак, в вашем случае функция вызывается из объекта window.

Итак, для решения вашей проблемы вам необходимо правильно привязать this. Существуют разные способы.

1. Сохранение ссылки на эту функцию в другом переменной self = this;
2. Используя bind функции. setInterval(this.ApplicationPulse.bind(this), 1000))

Answer 2

BrightPlayer.prototype.Heartbeat = function() { 
    setInterval(this.ApplicationPulse, 1000); 
}; 

Когда вы передаете this.ApplicationPulse к setInterval, он вызывается с другим контекстом. Вы хотите явно определить контекст, в котором ApplicationPulse будет выполняться путем связывания его this:

BrightPlayer.prototype.Heartbeat = function() { 
    setInterval(this.ApplicationPulse.bind(this), 1000); 
};