Easy explanation of prototypes

Page 1 of 1

8 Replies - 424 Views - Last Post: 02 August 2011 - 07:54 PM

#1 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 37
  • View blog
  • Posts: 599
  • Joined: 15-December 09

Easy explanation of prototypes

Posted 01 August 2011 - 10:01 PM

Prototypes are bothering me.

How can I output this with a prototype?
Cat scratches post.
Cat scratches the chair!

I know it's really simple, but that's a good start.

Maybe:
cat.does("scratches").right("post")
cat.does("scratches").wrong("the chair") //no exclamation point because wrong() makes it

Is This A Good Question/Topic? 0
  • +

Replies To: Easy explanation of prototypes

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,328
  • Joined: 15-February 11

Re: Easy explanation of prototypes

Posted 02 August 2011 - 07:25 AM

Prototypes basically allows you to add properties or functions to an existing object. To do so you'll have to use the prototype keyword.
myobject.prototype.newproperty = value
//or
myobject.prototype.newmethod = function(){
     //do whatever
}


This is a small example using a cat object
<!DOCTYPE html><html><head><script>
function cat(n){
    this.name = n
}

//notice prototype
cat.prototype.meow = function(){
    alert(this.name + ' said meow');
}

cat.prototype.scratch = function(){
    alert(this.name + ' scratched');
}

c = new cat('stanley');
c.meow();
c.scratch();
</script></head></html>

Was This Post Helpful? 1
  • +
  • -

#3 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: Easy explanation of prototypes

Posted 02 August 2011 - 08:00 AM

Alternative example:
<script type="text/javascript">

function Sentence(who,does) {
  this.who=who;
  this.does=does;
}

var cat = new Sentence("Cat ","scratches ");
Sentence.prototype.right = 'post. ';
Sentence.prototype.wrong = 'chair! ';

alert(cat.who+cat.does+cat.right);
alert(cat.who+cat.does+cat.wrong);

var dog = new Sentence("Dog ","sniffs ");

alert(dog.who+dog.does+dog.right);
alert(dog.who+dog.does+dog.wrong);

</script>

:bananaman:
Was This Post Helpful? 1
  • +
  • -

#4 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 37
  • View blog
  • Posts: 599
  • Joined: 15-December 09

Re: Easy explanation of prototypes

Posted 02 August 2011 - 11:56 AM

Cool guys.

In another thread I saw someone make a prototype on an object literal.
What about that?

Also, how can I chain prototypes for inheritance?

Like:
thing(argument).thing2(argument).things_do(argument);
<------inherits<----------------<-------------------
Or does that require an object literal.

This post has been edited by hiddenghost: 02 August 2011 - 11:59 AM

Was This Post Helpful? 0
  • +
  • -

#5 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 37
  • View blog
  • Posts: 599
  • Joined: 15-December 09

Re: Easy explanation of prototypes

Posted 02 August 2011 - 03:10 PM

Replying to posts: #2 codeprada #3 JMRKER
Thank you both. This helps me much.

Now I'm wondering just how deep we can go with prototypes.
Can I bust out 19 or 20 prototype functions for an object.

It be interesting to see if a bunch of prototype functions could be created with a loop.
var what;
Sentence.prototype.sniff1 = what; // a new thing
Sentence.prototype.sniff2 = what; // a new thing
Sentence.prototype.sniff...
Sentence.prototype.sniff500 = what; // a new thing


500 possible things to sniff, and 500 possible stores for user input of what's being sniffed. Not sure what it's for except maybe getting records for a "What's your dog sniff survey"
Was This Post Helpful? 0
  • +
  • -

#6 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,328
  • Joined: 15-February 11

Re: Easy explanation of prototypes

Posted 02 August 2011 - 05:33 PM

You really don't have to take that approach. Functions take parameters to prevent you from doing all that work.
Sentence.prototype.sniff = function(what){
     alert('sniffing ' + what);
}

Was This Post Helpful? 0
  • +
  • -

#7 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 37
  • View blog
  • Posts: 599
  • Joined: 15-December 09

Re: Easy explanation of prototypes

Posted 02 August 2011 - 05:41 PM

View Postcodeprada, on 02 August 2011 - 07:33 PM, said:

You really don't have to take that approach. Functions take parameters to prevent you from doing all that work.
Sentence.prototype.sniff = function(what){
     alert('sniffing ' + what);
}

In my example I have 5 hundred sniffs. Now is this gonna help me get 5 hundred sniffs?
Say I wanted sniffs in the DOM spit out as a list
Later I might want 500 meows.
Common question no? :)

This post has been edited by hiddenghost: 02 August 2011 - 05:42 PM

Was This Post Helpful? 0
  • +
  • -

#8 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,328
  • Joined: 15-February 11

Re: Easy explanation of prototypes

Posted 02 August 2011 - 06:00 PM

You don't need 500 prototypes for that. The Array object would work just fine.
<!DOCTYPE html><html><head><script>
function cat(name){
    this.name = name
}

var sniffs = new Array();
for(var i = 0; i < 500; i++)
{
    sniffs['sniff'+i] = 'Sniffed # ' + i;
}

cat.prototype.sniff = sniffs;

var c = new cat('Whiskers');
alert(c.name+' '+c.sniff.sniff4); //can be any number up to 500
</script></head></html>

Was This Post Helpful? 0
  • +
  • -

#9 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 37
  • View blog
  • Posts: 599
  • Joined: 15-December 09

Re: Easy explanation of prototypes

Posted 02 August 2011 - 07:54 PM

View Postcodeprada, on 02 August 2011 - 08:00 PM, said:

You don't need 500 prototypes for that. The Array object would work just fine.
<!DOCTYPE html><html><head><script>
function cat(name){
    this.name = name
}

var sniffs = new Array();
for(var i = 0; i < 500; i++)
{
    sniffs['sniff'+i] = 'Sniffed # ' + i;
}

cat.prototype.sniff = sniffs;

var c = new cat('Whiskers');
alert(c.name+' '+c.sniff.sniff4); //can be any number up to 500
</script></head></html>


What if I want to use this on more than one site?
The pet does library where pets live there lives out in a js virtual state.
Or populate a folder with 500 files that have the one object with it's prototypes with some different kinds of pets and all different types of actions.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1