Как написать этот простой код в реактивном режиме?

Здесь является одним из хороших источников this в JavaScript.

Вот сводка:

• global this In a браузер, в глобальной области, this является объектом window

  Если вы используете use strict;, в котором case this будет undefined

  Если вы вызываете функцию с new, this будет новым контекстом, он не будет ссылаться на глобальный this.

  • прототип этого

  Функции, которые вы создаете, становятся объектами функции. Они автоматически получают специальное свойство prototype, которое вы можете присвоить значениям. Когда вы создаете экземпляр, вызывая функцию с помощью new, вы получаете доступ к значениям, присвоенным свойству prototype. Вы получаете доступ к этим значениям с помощью this.

  function Thing() {
    console.log(this.foo);
  }
  
  Thing.prototype.foo = "bar";
  
  var thing = new Thing(); //logs "bar"
  console.log(thing.foo);  //logs "bar"
  

  Обычно ошибка заключается в назначении массивов или объектов на prototype. Если вы хотите, чтобы экземпляры каждого имели свои собственные массивы, создайте их в функции, а не в прототипе.

  function Thing() {
      this.things = [];
  }
  
  var thing1 = new Thing();
  var thing2 = new Thing();
  thing1.things.push("foo");
  console.log(thing1.things); //logs ["foo"]
  console.log(thing2.things); //logs []
  

  • object this

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

  var obj = {
      foo: "bar",
      logFoo: function () {
          console.log(this.foo);
      }
  };
  
  obj.logFoo(); //logs "bar"
  

  • DOM event this

  В обработчике событий HTML DOM this всегда ссылается на элемент DOM, событие было присоединено к

  function Listener() {
      document.getElementById("foo").addEventListener("click",
         this.handleClick);
  }
  Listener.prototype.handleClick = function (event) {
      console.log(this); //logs "
  "
  }
  
  var listener = new Listener();
  document.getElementById("foo").click();
  

  Если вы не bind контекст

  function Listener() {
      document.getElementById("foo").addEventListener("click", 
          this.handleClick.bind(this));
  }
  Listener.prototype.handleClick = function (event) {
      console.log(this); //logs Listener {handleClick: function}
  }
  
  var listener = new Listener();
  document.getElementById("foo").click();
  

  • HTML, этот

  Внутри атрибутов HTML, в которые вы можете поместить JavaScript, this является ссылкой на элемент.

  • eval this

  Вы можете использовать eval для доступа к this.

  function Thing () {
  }
  Thing.prototype.foo = "bar";
  Thing.prototype.logFoo = function () {
      eval("console.log(this.foo)"); //logs "bar"
  }
  
  var thing = new Thing();
  thing.logFoo();
  

  • с помощью этого

  Вы можете использовать with, чтобы добавить this в текущую область действия, чтобы читать и записывать значения на this, явно не ссылаясь на this.

  function Thing () {
  }
  Thing.prototype.foo = "bar";
  Thing.prototype.logFoo = function () {
      with (this) {
          console.log(foo);
          foo = "foo";
      }
  }
  
  var thing = new Thing();
  thing.logFoo(); // logs "bar"
  console.log(thing.foo); // logs "foo"
  

  • jQuery this

  jQuery во многих местах имеет this ссылается на элемент DOM.