how to use prototype to avoid copying of functions in javascript?

Question

I had written this code to simulate OOP inheritance and calling baseclass in javascript and it works:

function Animal(name,age)
  {
    this._name = name; 
    this.setName = function (name) { this._name = name }
    this.getName = function() { return this._name }
  }

  function Cat(name,age)
  {
    Animal.call(this,name,age); // call baseclass constructor
    this.getName = function() { return Cat.prototype.getName.call(this)+", a cat" }
  }
  Cat.prototype = new Animal(); // will create the baseclass structure

  /// *****  actual execution  *****
  var puss = new Cat("Puss",3);
  var cheshire = new Cat("Cheshire",10);
  // do some actions
  console.log ( puss.getName() );
  // change cat's name
  puss.setName("Puss in boots");
  alert ( "new name -->"+puss.getName() );

problem is that, for each instance of "new Cat()" the "getName" and "setName" functions are replicated. I have read a lot of articles on prototyping but none addressed the issue of calling the baseclass function.

This is how JavaScript works! Every newly created object has all properties copied from the prototype. This is normal behaviour, not a problem. What exactly do you want? — freakish
– freakish, Commented Apr 21, 2012 at 14:52

chuckj · Accepted Answer · 2012-04-21 15:55:44Z

1

You should assign the methods to the prototype of the function, for example,

function Animal(name, age) {
    this._name = name;
    this._age = age;
}
Animal.prototype.getName = function () { return this._name; }
Animal.prototype.setName = function (value) { this._name = value; }

function Cat(name, age) {
    Animal.call(this, name, age);
}
Cat.prototype = new Animal();
Cat.prototype.getName = function () { 
    return Animal.prototype.getName.call(this) + ", a cat"; 
}

answered Apr 21, 2012 at 15:55

chuckj

29.8k7 gold badges57 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nir O. Over a year ago

is there a simple way to prevent the 'constructor' of Animal from running twice?

chuckj Over a year ago

I don't understand what you mean. How is it running twice?

ZER0 Over a year ago

@NirO. Yes, there is. In ES5 you can use Object.create (in the browsers that doesn't support it you can use the shim written in the link). So you will have: Cat.prototype = Object.create(Animal.prototype);

Nir O. Over a year ago

@chuckj the first time being Cat.prototype = new Animal(); and the second: var c = new Cat("puss",1);

chuckj Over a year ago

@NirO As ZER0 indicated you can avoid new Animal() by using Object.create() or some polyfill of it (see ZER0's link). You just need an object that has the same prototype as an instance created by Animal().

Silviu-Marian · Accepted Answer · 2012-04-21 15:02:14Z

0

Are you looking for __proto__ which stores prototype data? https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/Proto

If you do a console.log(puss.__proto__.getName) you'll get what seems to be the "baseclass" function but I'm not sure how cross-browser is this.

answered Apr 21, 2012 at 15:02

Silviu-Marian

10.9k7 gold badges55 silver badges76 bronze badges

2 Comments

Felix Kling Over a year ago

__proto__ is not accessible in all browsers and should be avoided.

user1106925 Over a year ago

@FelixKling: Until/unless standardized... "Added section B.3.1 with specifies __proto__ feature."

score 0 · Accepted Answer · 2012-04-21 15:09:20Z

0

From http://phrogz.net/js/classes/OOPinJS2.html

Javascript does not have any sort of 'super' property, which would point to its parent class. Instead, you use the call() method of a Function object, which allows you to run a function using a different object as context for it. If you needed to pass parameters to this function, they would go after the 'this'.

In your case it works the same for functions as "methods", so you can do:

Animal.prototype.setName.call(this, name);

edited Apr 21, 2012 at 15:09

answered Apr 21, 2012 at 15:01

user4903

2 Comments

Nir O. Over a year ago

gives TypeError: Animal.prototype.getName is undefined

user4903 Over a year ago

Sorry, I changed it slightly after I posted. Part of the problem is going to be with your setName and getName methods you defined in the Animal function. Those needs to be prototypes as well. I encourage you to look at the link I provided, as he covers all of this.

Collectives™ on Stack Overflow

how to use prototype to avoid copying of functions in javascript?

3 Answers 3

5 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related