What happens when you add another method as property to a function in Javascript?

Go To StackoverFlow.com

3

I agree that Functions are objects in JS. When using a Function as a constructor we can add properties to the object create by adding these properties to the prototype property on the function. This is what I tried:

var Mammal = function(name) {
    this.name = name;
};

var Cat = function(name) {
    this.saying = 'meow';
};

Cat.prototype = new Mammal();

Cat.prototype.display = function() {
    console.log('I display Cats');
};

//This is what I find hard to digest
Cat.display = function() {
    console.log('I display cats but at the top level');
};

What I find hard to grasp is the commented portion. I was just trying to picture what goes where and this particular part I don't understand. I mean if I had to write a function and do something like this while defining the function what would be the syntax like? If I try something like the following:

function demo() {
    this.saying = function() {
        console.log('I display cats but at the top level');
    };
};

The variable this here refers to the DOMWindow. How do I achieve the above thing within a function definition.

I am a total newbie to JS. I apologize for any ignorance on my part.

2012-04-04 17:10
by shaunshd
What do you think that line of code should do exactly, vs what it does - Paul Phillips 2012-04-04 17:19
If I use a function A as a constructor and on the same function I add a method B as a property. Then there should be someway for the objects created using the function A as constructor to access the property B - shaunshd 2012-04-04 17:29
Cat.display is a priviledged method whereas Cat.prototype.display is a method of the prototype of the function Cat.Each time you create a new Cat ,it will have a Cat.prototype.display. But not a Cat.display unless you specifiy Cat.display in the contructor function of Cat. Dont worry , the more you will write some javascript the more you will understand the differences. Functions are pointers in javascript ,objects and arrays too. Prototypes are instanciated by cloning ,prototypes allows instances to share the same pointers.Priviledges methods are created everytime you create a new Cat though - mpm 2012-04-04 17:37
If its a privileged method than its as good as: 'this.display = function B() {}' inside the function A. And any objects created using A as constructor should have access to B. But that doesn't happen. objects created using A as constructor can't invoke B - shaunshd 2012-04-04 17:58


1

Those are analogous to static methods in class based objects. That is, the method can only be accessed from the constructor, not from the instance itself.

A good example of this ìs jQuery.get() You can't do

$('.someclass').get(myUrl);

You have to use

$.get(myUrl);

However, if you do need to access the static method from an instance, you have two options

var cat = new Cat('catName');
cat.constructor.display();
Cat.display();

http://jsfiddle.net/c39bW/

Not that your constructor property for Cat is broken, when you setup inheritance, you should fix the Cat.prototype.constructor to point back to Cat, see my jsFiddle above. Also, you're not calling the base constructor (Mammal) from Cat's constructor. For a tutorial on the minimal requirements for inheritance, see http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html

A good example as to when static properties are useful is when an object needs to keep track of how many times it has been instantiated, you can't do that at an instance level;

function Tracker() {
   this.constructor.count++;
}

Tracker.count = 0;

Tracker.getCount = function() {
     return Tracker.count;
}
2012-04-04 17:44
by Juan Mendes


1

The question is not absolutely clear...

But, consider the following code:

function Test(title) { // object constructor (class)
    this.title = title;
}

Test.prototype.getTitle = function () { return this.title }; // shared (inherited) getter method
Test.version = 1; // static property (no need to instantiate an object)

var obj = new Test('hello, world!'); // an instance of the 'Test' class
console.log(obj.constructor.version); // reference to a static property of the class

When function is called along with the new keyword it is a constructor and this points to the object being constructed (new Test('hello, world!')).

When function is called as an object method (e.g., obj.getTitle()), this points to that object.

When function is called normally (Test('hello, world!')), this points to the global object (Window).

Does this help? :)

2012-04-04 17:40
by John Doe


0

For clarity, I've changed your Cat class to Animal.

Anything added to Animal's prototype will be applied to any new instances of Animal. When called, the keyword this will refer to the instance.

var cat = new Animal();
cat.display(); // calls Animal.prototype.display(), 'this' points to 'cat'

Anything attached directly to Animal will not be, and can only be accessed directly:

Animal.display(); // 'this' points to 'Animal'
2012-04-04 17:38
by Robert Messerle
Ads