Proposal For A New Alternative Keyword To “this” For Classes

john larson johnlarsondev1 at gmail.com
Sat Mar 9 11:41:59 UTC 2019


*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>
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190309/83c4a995/attachment-0001.html>


More information about the es-discuss mailing list