Bind() vs arrow function

Topics: General
Jun 9, 2013 at 10:35 PM
Edited Jun 9, 2013 at 10:37 PM
I've started testing TypeScript and migrating a bit of code.

I'm used to using bind() instead of the 'arrow' function, see code here:
Image

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Would it be possible to add auto-completion when using bind(this)?

I'm still not a huge fan of the syntax () => {}
Jun 9, 2013 at 11:00 PM
Edited Jun 9, 2013 at 11:04 PM
More generally, could there be a way of specifying the type of this using a generic? I can’t really think of a good syntax for doing this, but I don’t really like the idea of giving bind special treatment. Maybe a little directive like in the “eventListener” function could be used at the top of a function:
class Foo { 
     constructor() {
          this.eventListener = function(event) { 
               <Foo>this;
               // code … 
          }.bind(this); 
     }
}
Not really ideal, I suppose, but it would get the job done.
Jun 10, 2013 at 12:06 AM
Thanks for the tip.

I think I'll use arrow functions, this helped convince me:
http://www.yuiblog.com/blog/2012/03/30/what-is-the-meaning-of-this/
  • Using the function keyword, readability is pretty good:
    function(evt) => {}
  • Turns out that bind() is much slower.
There's still some cases where bind is useful and would be a 'nice to have' feature if the compiler can detect bind() and set the scope.
But not at the cost of making the compiler slower and more complex.
Jun 10, 2013 at 1:41 AM
That wasn't a tip, just a feature proposal. :P I'm pretty sure it doesn't work that way right now.

But yeah, just use arrow functions, they're cooler. :)
Jun 10, 2013 at 1:20 PM
Edited Jun 10, 2013 at 1:21 PM
Ahh ok, the hint partly works, you can do:
class Foo { 
     constructor() {
          this.eventListener = function(event) { 
                var foo = <Foo>this;
                
               // code … 
          }.bind(this); 
     }
}
But not :
class Foo { 
     constructor() {
          this.eventListener = function(event) { 
               this = <Foo>this; // can't left assign this
               <Foo>this;

          }.bind(this); 
     }
}
Understanding bind() would be more elegant.
Jun 10, 2013 at 6:44 PM
Andrew,

An idea for that would be if the arrow function could accept a "this" parameter:
(e) => {}
turns into
(this : Foo, e) => {}
That means, if the first parameter was named "this", it would get the type from the parameter list. And Both would compile to
function(e) {}
And you could just remove the type of this by writing:
(this) => {}
That would be the same as:
() => {
   var that = <any> this;
}
That would make it impossible to define a parameter called "this" (I'm not even sure what happens today if you do), but I don't think this would be any sacrifice for anyone.

Also, this would be kinda similar to how extension methods work in C# which is a great feature, and since it doesn't cause any confusion there, shouldn't cause any here.