What happens when you add another method as a property of a function in Javascript?
I agree that functions are objects in JS. When using a function as a constructor, we can add properties to the create object by adding those properties to the function's prototype property. 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 is difficult for me to understand is the comment. I was just trying to figure out what was going on and this particular part that I don't understand. I mean, if I had to write a function and do something like this defining a function, what would be the syntax? 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 DOMWindow. How to achieve the above in function definition.
I am new to JS. I apologize for any ignorance on my part.
source to share
Those that are analogous to static methods in class objects. That is, the method can only be accessed from the constructor, not from the instance itself.
JQuery.get () is a good example of this. You cannot do
$('.someclass').get(myUrl);
You must use
$.get(myUrl);
However, if you need to access a static method from an instance, you have two options
var cat = new Cat('catName');
cat.constructor.display();
Cat.display();
Not that your constructor property for Cat is broken, when you set up inheritance, you have to fix Cat.prototype.constructor to point to Cat, see my jsFiddle above. Also, you don't call the base constructor (Mammal) from within the Cat constructor. For guidance on the minimum requirements for inheritance see http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html
A good example of when static properties are useful is when an object has to keep track of how many times it has been created, you cannot do it at the instance level;
function Tracker() {
this.constructor.count++;
}
Tracker.count = 0;
Tracker.getCount = function() {
return Tracker.count;
}
source to share
The question is not entirely 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 a function is called along with a keyword , it is a constructor and points to the object that is being constructed ( ). new
this
new Test('hello, world!')
When a function is called as a method of an object (for example obj.getTitle()
), points to that object. this
When the function is called normally ( Test('hello, world!')
), it points to the global object ( Window ). this
Does it help? :)
source to share
For clarity, I changed my Cat class to Animal.
Anything added to the Animal prototype will be applied to any new Animal instances. 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 tied directly to Animal won't be, and can be accessed directly:
Animal.display(); // 'this' points to 'Animal'
source to share