This is probably not the pattern that is being proposed though outputs the
expected result

    ```class RequestManager {
      constructor() {
        this.successMessage = "Xhr successful.";
        RequestManager.THIS = this;
      }

      makeRequest() {
        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", this.responseHandler);
        oReq.open("GET", "");
        oReq.send();
      }

      responseHandler(e) {
        console.log(e, this); // `e`: event, `this`: XMLHttpRequest instance
        console.log(RequestManager.THIS.successMessage);
      }

    }

    var reqManager = new RequestManager();

    reqManager.makeRequest();```

On Sat, Mar 9, 2019 at 11:42 AM john larson <johnlarsondev1 at gmail.com>
wrote:

> *Summary of the problem:*
>
> “this” keyword in Javascript is context dependent. And this is one of the
> culprits of most subtle and latent errors in Javascript. Moreover, use of
> “this” cannot be avoided if we are using classes and trying to reference
> instance properties.
>
> When “this” is used in callback functions or in functions given
> to forEach as argument, IDEs rightfully cannot raise any design-time
> errors, giving developers the false sense of security, but we get run-time
> errors because “this” is undefined.
>
> There seem to be two work-arounds:
>
> 1.      Using arrow functions
>
> 2.      Using .bind(this) syntax
>
> Just assuming we forgot to use an arrow function or a .bind(), the IDE
> will not be able to raise an error and we will encounter the error in
> run-time.
>
>
>
> *What I propose:*
>
> I am proposing a new keyword that will be the alternative of "this" and
> will always point to the instance of the class. The name of the new keyword
> can be chosen with consensus from the community such that it would
> minimize/eliminate collision in existing codebases.
>
>
>
> Here is a sample js code:
>
>
>
> class RequestManager{
>
>
>
>     constructor(){
>
>         this.successMessage = "Xhr successful.";
>
>     }
>
>
>
>
>
>     makeRequest() {
>
>         var oReq = new XMLHttpRequest();
>
>         oReq.addEventListener("load", this.responseHandler);
>
>         oReq.open("GET", "www.google.com");
>
>         oReq.send();
>
>     }
>
>
>
>     responseHandler() {
>
>         window.alert(this.successMessage);
>
>     }
>
> }
>
>
>
> var reqManager = new RequestManager();
>
> reqManager.makeRequest();
>
>
>
> This piece of code will alert “undefined” because “this” is undefined in
> the callback function in strict mode.
>
> Now let’s assume a new keyword is used insetead of “this” that will always
> point to the class instance.
>
> As per its implementation, as described on
> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes:
>
> *“JavaScript classes, introduced in ECMAScript 2015, are primarily
> syntactical sugar over JavaScript's existing prototype-based inheritance.
> The class syntax does not introduce a new object-oriented inheritance model
> to JavaScript.”*
>
> So with the new keyword introduced, behind the scenes, previous class
> could be interpreted as a piece of code along the lines of:
>
>
>
> var RequestManager = function () {
>
>     var self = this;
>
>     self.successMessage = "Xhr successful";
>
>
>
>     self.makeRequest = function () {
>
>         var oReq = new XMLHttpRequest();
>
>         oReq.addEventListener("load", responseHandler);
>
>         oReq.open("GET", "www.google.com");
>
>         oReq.send();
>
>     };
>
>
>
>     var responseHandler = function () {
>
>         window.alert(self.successMessage);
>
>     };
>
> };
>
> var reqManager = new RequestManager();
>
>
>
> reqManager.makeRequest();
>
>
>
> I believe this way, we would not have to resort to work-arounds for such a
> fundamental construct of the language and this would ease developers’ lives
> as someone forgetting to have used an arrow function or the .bind(this)
> syntax will not be a problem anymore.
>
>
>
> Best Regards,
>
> John
>
>
> <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=icon> Virus-free.
> www.avast.com
> <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=link>
> <#m_-8001099771182452640_m_-1339185979708762546_DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190310/861edb18/attachment-0001.html>

This is probably not the pattern that is being proposed though outputs the
expected result

    class RequestManager {
      constructor() {
        this.successMessage = "Xhr successful.";
        RequestManager.THIS = this;
      }

      makeRequest() {
        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", this.responseHandler);
        oReq.open("GET", "");
        oReq.send();
      }

      responseHandler(e) {
        console.log(e, this); // `e`: event, `this`: XMLHttpRequest instance
        console.log(RequestManager.THIS.successMessage);
      }

    }

    var reqManager = new RequestManager();

    reqManager.makeRequest();