Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Defining prototype methods inside the constructor

Today, I saw a JavaScript pattern I have never seen in my whole life. I cannot tell the purpose of using this pattern. It seems wrong to me, but I want to be a little conservative. It might be some awesome pattern I never saw before.

function Dog() {
    Dog.prototype.bark = function () {
        alert('woof!');
    }

    this.bark = function () {
        Dog.prototype.bark();
    }

    this.bark();
}

First, I'm not a fan for making methods (as privileged members) inside the constructor for no reason. It would cause creating functions every time when an instance is created. Second, in this code snippet, it also calls the prototype name "Dog", instead of "this". This makes me super confused.

Anyone knows what good about it?

Thanks! Grace

like image 592
Grace Shao Avatar asked Aug 19 '11 00:08

Grace Shao


2 Answers

Sorry for the VERY late reply, but if you really want to add the prototypes within the constructor AND not have it recreated whenever a new instance is created, you could do this:

function Dog() {
    if (!Dog.prototype.bark) {
        Dog.prototype = function() {
            console.log('woof');
        }
    }

    this.bark();
}

I still probably wouldn't use this method, but I have some across instances where this method was a option when dealing with 3rd party frameworks (the dodgy kind).

like image 190
DrunkenBeetle Avatar answered Sep 19 '22 23:09

DrunkenBeetle


This is a very bad idea, for a great number of reasons. A few of which are:

  1. Adding methods to the prototype in the constructor will cause the prototype method to be replaced for all instances, everytime you instantiate a new Dog.
  2. Calling Dog.prototype.bark() means that this will be Dog.prototype and not your instance of Dog, which can cause serious issues.
  3. this.bark = function () { Dog.prototype.bark(); } is some serious WTF. Because this.bark will already evaluate to the prototype method making this unnecessary. And calling it like this actually destroys the natural this value, as mentioned in #2.

Here is what is should be:

function Dog() {
  this.makeSound();
};

Dog.prototype.bark = function() {
  alert('woof');
};

Dog.prototype.makeSound = function() {
  this.bark();
};

Or alternatively, without the prototype at all:

function Dog() {
  this.bark = function() {
    alert('woof');
  };

  this.makeSound = function() {
    this.bark();
  };

  this.makeSound();
};

I would not trust this snippet of yours at all.

like image 35
Alex Wayne Avatar answered Sep 16 '22 23:09

Alex Wayne