Bind "this" keyword in method to current class instance with a keyword

Topics: General, Language Specification
Nov 18, 2012 at 3:00 PM

I propose to make "bind" keyword for class methods. This way you can bind "this" keyword to current class instance.

class Foo {
    public bind someMethod(): void {
        // Here .this is always current Foo instance
    }
}

compiles to

var Foo = (function () {
    function Foo() {
        this.someMethod = this.someMethod.bind(this);
    }
    Foo.prototype.someMethod = function () {
    };
    return Foo;
})();
Coordinator
Nov 20, 2012 at 5:06 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Nov 21, 2012 at 2:34 PM
Edited Nov 21, 2012 at 2:37 PM

this is not required...

you can simply use a "delegate" or lambda expression to do what you want:

 

class Foo {

    private state: string;

    constructor() {

        $('#someLinkID').bind('click', (e: JQueryEventObject) => this.handleClick(e))
    }

    private handleClick(e: JQueryEventObject) {

        this.state = "Clicked!"
    }
}
Jan 7, 2013 at 2:50 PM
caroen wrote:

this is not required...

you can simply use a "delegate" or lambda expression to do what you want:

 

class Foo {

    private state: string;

    constructor() {

        $('#someLinkID').bind('click', (e: JQueryEventObject) => this.handleClick(e))
    }

    private handleClick(e: JQueryEventObject) {

        this.state = "Clicked!"
    }
} 

Explained my view here

Jan 29, 2013 at 5:25 PM

It works but the syntax is rather long.  Why not have a keyword like 'self' that refers to this? 

I tried finding a shortcut to this.  The limitation I am having is that normally in a native JS constructor I can set a member variable _this =this  and then I can simply reference _this from within object methods.  TypeScript forces you to use this.property to access a property of the current object but this is not the the current object.  It's kind of a catch 22.  

The fact that TypeScript limits or modifies the scope of vars seems to go against the "superset JavaScript" mantra.

 

 

 

 

 

Feb 14, 2013 at 6:33 AM
One suggestion for this feature is to follow the kotlin way to define extension methods.

In kotlin:
fun JQueryStatic.bind(eventName:String, handler: JQuery.(JQueryEventObject) -> Unit);

// using like above

$("...").bind("event", { e -> doSomethingWithJQueryElement(this); });
Something that in TS could have these definitions:

by using interfaces:
interface JQueryStatic {
  bind(eventName: string, handler: JQuery.(JQueryEventObject) => void);
   
  // or
   
  bind(eventName: string, handler: JQuery::(JQueryEventObject) => void); // remember C++

  // or
   
  bind(eventName: string, handler: JQuery#(JQueryEventObject) => void); // remember kotlin paths
}
by using extension methods (like kotlin):
function JQueryStatic.bind(eventName: string, handler: JQuery.(JQueryEventObject) => void);

// or 

function JQueryStatic :: bind(eventName: string, handler: JQuery :: (JQueryEventObject) => void);

// or 

function JQueryStatic#bind(eventName: string, handler: JQuery#(JQueryEventObject) => void);