473,394 Members | 1,180 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,394 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 1513
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: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

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.