title: 'this' scope with ES6 and Knockout
body: <p>I'm having an issue with the 'this' scope when using ES6.</p>
  
  <p>Here´s a link to my <a href="https://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=class%20Point%20%7B%0D%0A%20%20%20%20constructor()%20%7B%0D%0A%20%20%20%20%20%20%20%20this.myArray%20%3D%20ko.observableArray(%5B1%2C2%2C3%2C4%5D)%3B%0D%0A%20%20%20%20%20%20%20%20this.removeFromArrayWithArrowFunction%20%3D%20value%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20this.myArray.remove(value)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20removeFromArray(value)%20%7B%0D%0A%20%20%20%20%20%20this.myArray.remove(value)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D" rel="nofollow">original and transpiled code</a> with BabelJS.</p>
  
  <p>When calling a function to remove an item from an array the scope of 'this' is undefined.</p>
  
  <p>How can I make this to make this without redefining this (<em>let self = this</em>)? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
  
  var _createClass = (function() {
    function defineProperties(target, props) {
      for (var i = 0; i &lt; props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }
    return function(Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  })();
  
  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }
  
  var Point = (function() {
    function Point() {
      var _this = this;
  
      _classCallCheck(this, Point);
  
      this.myArray = ko.observableArray([1, 2, 3, 4]);
      this.removeFromArrayWithArrowFunction = function(value) {
        _this.myArray.remove(value);
      };
    }
  
    _createClass(Point, [{
      key: "removeFromArray",
      value: function removeFromArray(value) {
        this.myArray.remove(value);
      }
    }]);
  
    return Point;
  })();
  
  ko.applyBindings(new Point());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span data-bind="text: ko.toJSON(myArray)"&gt;&lt;/span&gt;
  &lt;h2&gt;Issues with this scoping when using a regular Function&lt;/h2&gt;
  &lt;ul data-bind="foreach: myArray"&gt;
    &lt;li&gt;
      &lt;a href="#" data-bind="text: $data, click: $parent.removeFromArray"&gt;&lt;/a&gt;
  
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2&gt;Works as expected using an arrow function&lt;/h2&gt;
  &lt;ul data-bind="foreach: myArray"&gt;
    &lt;li&gt;
      &lt;a href="#" data-bind="text: $data, click: $parent.removeFromArrayWithArrowFunction"&gt;&lt;/a&gt;
  
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>