473,320 Members | 2,088 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to do Prototype-based OO in JavaScript?

I've heard that JavaScript is a prototype-based language instead of a
class based one. I'm interested in learning the prototype-based
paradigm of OO programming, but I am unsure of the best way to use
JavaScript as a prototype-based language. I'm stuck between two ways
and both methods might be right (or wrong).

Method 1:

/* create an Animal "object" */
function Animal() {} ;

/* "copy" the animal object to a new object mouse */
var mouse = new Animal();

/* create a method to the animal */
Animal.prototype.speak = function() { alert('squeak!'); };
mouse.speak(); /* alerts squeak! */

Method 1 doesn't really feel like it's true prototype-based because I
need to instantiate it using 'new' instead of cloning an object like
Io or Self. So I created a second method that just uses JavaScript
objects, which to me, feels a bit more prototype-based.

Method 2:
/* create an Animal object */
var Animal = {}; // same as var Animal = new Object();

/* "copy" the animal object to a new object mouse */
var mouse = Animal;

/* create a method to the animal */
Animal.speak = function() { alert('squeak!'); };
mouse.speak(); /* alerts squeak! */

There's also a method three which basically combines both methods.
function Animal() {};
var mouse = new Animal();
mouse.speak = function() { alert('squeak!'); };
mouse.speak();

But if I use method 3, I wouldn't know why I created an empty Animal
function if I was going to dynamically add new methods to the objects
it instantiated. So based on the 3 methods above (or an entirely new
method) which simulates prototype-based programming in JavaScript?
Thanks.

May 29 '07 #1
7 1508
Hi,
Isn't prototype-based programming also called instance-based
programming?

May 29 '07 #2
On May 29, 11:53 am, jangc...@gmail.com wrote:
I've heard that JavaScript is a prototype-based language instead of a
class based one. I'm interested in learning the prototype-based
paradigm of OO programming, but I am unsure of the best way to use
JavaScript as a prototype-based language. I'm stuck between two ways
and both methods might be right (or wrong).

Method 1:

/* create an Animal "object" */
function Animal() {} ;

/* "copy" the animal object to a new object mouse */
var mouse = new Animal();

/* create a method to the animal */
Animal.prototype.speak = function() { alert('squeak!'); };
mouse.speak(); /* alerts squeak! */

Method 1 doesn't really feel like it's true prototype-based because I
need to instantiate it using 'new' instead of cloning an object like
Io or Self. So I created a second method that just uses JavaScript
objects, which to me, feels a bit more prototype-based.
The above makes all Animals squeak.
Method 2:
/* create an Animal object */
var Animal = {}; // same as var Animal = new Object();

/* "copy" the animal object to a new object mouse */
var mouse = Animal;

/* create a method to the animal */
Animal.speak = function() { alert('squeak!'); };
mouse.speak(); /* alerts squeak! */
So does method 2, but nastier:

var Animal={};
var Mouse=Animal;
var Cat=Animal;
Cat.Eats='mouses(sic)';
alert(Mouse.Eats); // ouch!

There's also a method three which basically combines both methods.
function Animal() {};
var mouse = new Animal();
mouse.speak = function() { alert('squeak!'); };
mouse.speak();
FWIW...

function Animal(){};
/* Don't know what type of animal I am so... */
Animal.prototype.speak=function(){alert('*grim silence*')};

function Mouse(){};
Mouse.prototype=new Animal();
/* I'm a generic mouse so... */
Mouse.prototype.speak=function(){alert('squeak!')} ;

function Cat(){};
Cat.prototype=new Animal();
/* Not a cat person, so they can keep quiet */

var foo=new Animal();
var tom=new Cat();
var jerry=new Mouse();
var mortimer=new Mouse();
mortimer.speak=function()
{
alert("I can talk! Where's the cheese?")
};

foo.speak();
tom.speak();
jerry.speak();
mortimer.speak();

----
Geoff

May 29 '07 #3
On May 29, 1:11 pm, Geoffrey Summerhayes <sumr...@gmail.comwrote:
So does method 2, but nastier:

var Animal={};
var Mouse=Animal;
var Cat=Animal;
Cat.Eats='mouses(sic)';
alert(Mouse.Eats); // ouch!
Yikes, ouch is right.

I found another method by more researching. It's using Crockford's
function for prototypical inheritance.

Object.prototype.clone = function() {
function TempClass() {};
TempClass.prototype = this;
return new TempClass();
}

Animal = {};
var Mouse = Animal.clone();
var Cat = Animal.clone();
Cat.eats = 'mouses';
alert(Mouse.eats); // Not ouch.

/* and using your example */
Animal.speak = function() { alert('*grim silence*'); };
var Mouse = Animal.clone();
Mouse.speak = function() { alert('squeak!'); };
var Cat = Animal.clone();
Cat.speak = function() { alert('hiss!'); };

var foo = Animal.clone();
var tom = Cat.clone();
var jerry = Mouse.clone();
var mortimer = Mouse.clone();
mortimer.speak = function() { alert("I can talk! Where's the
cheese?"); };

foo.speak();
tom.speak();
jerry.speak();
mortimer.speak();

I kind of like this method better. I guess I don't like that 'new'
keyword in JavaScript which makes me think that I'm not dealing with
objects like a true prototype-based language. It feels like I'm still
dealing with Classes.

May 29 '07 #4
On May 30, 1:53 am, jangc...@gmail.com wrote:
I've heard that JavaScript is a prototype-based language instead of a
class based one. I'm interested in learning the prototype-based
paradigm of OO programming, but I am unsure of the best way to use
JavaScript as a prototype-based language. I'm stuck between two ways
and both methods might be right (or wrong).
[...]
Method 2:
/* create an Animal object */
var Animal = {}; // same as var Animal = new Object();

/* "copy" the animal object to a new object mouse */
var mouse = Animal;
That doesn't "copy" the Animal object, it creates a second reference
to the same object. When the right hands side of an assignment is an
object, it's pseudo-code is "assign a reference to...".
--
Rob
May 29 '07 #5
On Tue, 29 May 2007 at 08:53:14, in comp.lang.javascript, wrote:
>I've heard that JavaScript is a prototype-based language instead of a
class based one. I'm interested in learning the prototype-based
paradigm of OO programming, but I am unsure of the best way to use
JavaScript as a prototype-based language. I'm stuck between two ways
and both methods might be right (or wrong).

Method 1:

/* create an Animal "object" */
function Animal() {} ;

/* "copy" the animal object to a new object mouse */
var mouse = new Animal();

/* create a method to the animal */
Animal.prototype.speak = function() { alert('squeak!'); };
mouse.speak(); /* alerts squeak! */

Method 1 doesn't really feel like it's true prototype-based because I
need to instantiate it using 'new' instead of cloning an object like
Io or Self. So I created a second method that just uses JavaScript
objects, which to me, feels a bit more prototype-based.
<snip>

Javascript is not like conventional prototype-based languages. You don't
create an object by cloning from a 'prototype' object.

Forget Io and Self; javascript is different!

John
--
John Harris
May 29 '07 #6
ja******@gmail.com wrote:
I've heard that JavaScript is a prototype-based language instead of a
class based one.
You heard right. Objects can inherit from objects.

var animal = {
speak: function () {
alert('Hello, world!');
}
};
var mouse = animal.beget();
mouse.speak();

See http://javascript.crockford.com/prototypal.html
May 30 '07 #7
On May 29, 7:28 pm, Douglas Crockford <nos...@sbcglobal.netwrote:
jangc...@gmail.com wrote:
I've heard that JavaScript is a prototype-based language instead of a
class based one.

You heard right. Objects can inherit from objects.

var animal = {
speak: function () {
alert('Hello, world!');
}
};
var mouse = animal.beget();
mouse.speak();

Seehttp://javascript.crockford.com/prototypal.html
With this beget system if you have many animals to produce and have to
name them all you wouldn't want to write like the following
(especially if there were more properties to set)

var mouse = animal.begat();
mouse.name = "Harold";
var cat = animal.begat();
cat.name = "Martha";
....

It would be much handier to have a function that automates this

function makeAnimal(name) {
var a = animal.begat();
a.name = name;
return a;
}
var mouse = makeAnimal("Harold");
var cat = makeAnimal("Martha");

and now here I am back at the same issue of having a constructor but
one that is is less efficient (download time, construction time) then
JavaScript's native constructor:

function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function(){...};

var mouse = new Animal("Harold");
var cat = new Animal("Martha");

What is the big gain from begat()?

Thanks,
Peter

May 30 '07 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Florian Loitsch | last post by:
hi, in section 10.1.8 (Arguments Object) it is stated that the "internal ] property of the arguments object is the orginal Object prototype object, the one that is the *initial* value of...
8
by: Robert | last post by:
Hi, I can use "with" like this: function MyObject(message) { this.message = message; } function _MyObject_speak() {
21
by: Rob Somers | last post by:
Hey people, I read a good thread on here regarding the reason why we use function prototypes, and it answered most of my questions, but I wanted to double check on a couple of things, as I am...
23
by: Allin Cottrell | last post by:
Thomas Heinz wrote (in re. gcc compilation of this erroneous program): $ cat test.c int f(int); int f(); int f() {return 0;} int main (void) { return 0; }
13
by: eman1000 | last post by:
I was recently looking at the prototype library (http://prototype.conio.net/) and I noticed the author used the following syntax: Object.extend(MyObj.prototype, { my_meth1: function(){},...
6
by: mmcloughlin | last post by:
I'm learning about objects and am trying to figure out how basic inheritance works. I've got into the habit of explicitly setting the prototype object with an object literal as it seems to make the...
5
by: Daz | last post by:
Hi everyone. My query is very straight forward (I think). What's the difference between someFunc.blah = function(){ ; } and
2
by: jaysome | last post by:
While looking at the source code for gcc today, I noticed that a prototype for main() was declared. From gcc.c: extern int main (int, const char **); int main (int argc, const char **argv) {...
5
by: ziobudda | last post by:
Hi, I want ask you if, for a web portal/application, is better prototype or Jquery? I don't want to innesc some type of flame, but after the announce that drupal use JQuery and that the new...
2
by: hzgt9b | last post by:
I know how to overwrite a function. Normally this is what I would do: function someFunction() { /* orig definition here */ } //later in the execution stream I would do... someFunction = function...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.