在JavaScript类中混合箭头功能是否有任何弊端？

Question

If you aren't familiar the EMCA6 Draft will be adding arrow function syntax . The main differences being:

• Arrow functions have lexical this (so no need to call Function.prototype.bind or create a closure)
• Shorter syntax () => "foo" vs function(){ return "foo";}
• Arrow functions lack a .prototype. So they cannot be used as constructors, cannot be called with new, and are meant to be lightweight.

With that being said, lets take a look at the following trivial example:

var Animal = function(sound) {
    this.sound = sound;
    //arrow notation has lexical this, so this makeNoise must be defined in the constructor
    Animal.prototype.makeNoise = () => this.sound;
};

let dog = new Animal("woof!");
dog.makeNoise(); //woof!

Here, I'm creating a simple class that just happens to use a arrow function as one of its methods rather than a normal function. I know this is setting the Animal.prototype.makeNoise every time we initialize an Animal, but does the above have any other drawbacks compared to the normal:

var Animal = function(sound) {
    this.sound = sound;
};
Animal.prototype.makeNoise = function() { return this.sound; };

let dog = new Animal("woof!");
dog.makeNoise(); //woof!

I'm curious to see if there any lurking dangers to doing this, as I'm sure people will be tempted to use the new shortened syntax anywhere they can get away with it. Thanks in advance.

Answer 1

I'd suggest against doing this, partly for the reason Pointy gave in his comment: you're creating a new arrow function object for every instance of Animal, which is bad for performance and terrible for memory management. It's actually even worse than just duplicating function objects: since it also creates a new closure around that function, the garbage collector will not be able to free any of your constructor's local variables as long as the animal object is still in memory.

But also because ECMAScript 6 also introduces a much better syntax for that exact purpose:

class Animal {
   constructor(sound) {
       this.sound = sound;
   }
   makeNoise() {
       return this.sound;
   }
}