Asp Forum - Why use prototype in this example

Tony Johansson

1/6/2015 10:30:00 PM

Here I have two examples. The difference between these is that in example 1
I create sayHello as a prototype while in
exemple 2 I add sayHello as a function in the class Person

I mean in both example 1 and 2 I create an instance of Person.
I can't see any point to use a prototype compared to add methods to the
class?

Start example 1 med prototype
***********************
var Person = function (firstName) {
this.firstName = firstName;
};

Person.prototype.sayHello = function() {
console.log("Hello, I'm " + this.firstName);
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");

// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"
End example 1
************

Start example 2 utan prototype
***********************
var Person = function (firstName) {
this.firstName = firstName;

this.sayHello = function () {
alert("Hello, I'm " + this.firstName);
};
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");

// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"

//Tony

2 Answers

Christoph M. Becker

1/6/2015 10:54:00 PM

Tony Johansson wrote:

> Here I have two examples. The difference between these is that in
> example 1 I create sayHello as a prototype while in
> exemple 2 I add sayHello as a function in the class Person
>
> I mean in both example 1 and 2 I create an instance of Person.
> I can't see any point to use a prototype compared to add methods to the
> class?

Thomas 'Pointed Ears' Lahn already gave a good answer in
<news:1590597.KOVAYohEvS@PointedEars.de>:

| Inherited methods can be reused. In this example, one advantage is
| that only one Function instance is created, which saves memory as
| compared to the instance method approach. It also saves runtime
| because the creation of that object only happens once. (There are
| also disadvantages.)

--
Christoph M. Becker

Thomas 'PointedEars' Lahn

1/7/2015 3:25:00 AM

Tony Johansson wrote:

> Here I have two examples. The difference between these is that in example
> 1 I create sayHello as a prototype while in
> exemple 2 I add sayHello as a function in the class Person

There is no class because there are no classes. [1] At most, there is a
user-defined object type then.

> I mean in both example 1 and 2 I create an instance of Person.
> I can't see any point to use a prototype compared to add methods to the
> class?

You are _not_ adding methods to a class because there is no class. The
standardâ??s(!) terminology â??instance of Fâ? (or for short, â??F instanceâ?) with
prototype-based inheritance should not be misunderstood so that F would be a
class (as in class-based inheritance). It is still only a symbol for a
reference to an object (usually, a Function instance [2]). (The internal
[[Class]] property is a separate issue.)

When a function F is called as a constructor, â??thisâ? in that function
execution context refers to the newly constructed object, an â??F instanceâ?.
[3] Therefore, when you augment the object referred to by â?thisâ? in an
objectâ??s constructor, you are augmenting that object, and only it. (Because
it is possible that way that objects constructed with the same constructor
call are fundamentally different from one another, and need not share even
the same prototype chain, it makes no sense to talk of a "class" instead of
a constructor here â?? the fact aside that there is the *additional* concept
of a class in certain implementations.)

This is also why in many cases it is a good idea to define prototype
methods, prototype properties in general, while in others it is better to
define methods in the constructor, separate for each instance: prototype
properties are shared among all instances through the prototype chain; on
the other hand, instance methods defined and assigned in the constructor can
close over, therefore provide access to, symbols of the constructorâ??s
function execution context that can serve as "private" properties, and the
respective access methods as "privileged" ones. (This is most useful with
setters and getters, see jsx.array.BigArray in JSX:array.js for an example.
[4])

________
[1] <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype...

(JFTR: I do not agree with the statements about extension of native
prototypes. The logic used there is flawed because if you extend native
prototypes, or allow or expect others to do that when using your code
together with theirs, you have to take the same precautions with
compatibility features as with new ones. Also, because in newer
implementations you can make user-defined properties non-enumerable, and
there is a built-in method for creating objects with empty prototype chain,
such extensions are not so much of an issue anymore. As always, use with
care.)

[2] <http://ecma-international.org/ecma-262/5.1/#sec-...
[3] <http://ecma-international.org/ecma-262/5.1/#sec-...
[4] <http://PointedEars.de/wsvn/JSX/trunk/ar...

> Start example 1 med prototype
> ***********************
> var Person = function (firstName) {
> this.firstName = firstName;
> };

It is not necessary to use a function expression to define a constructor;
you can use a function declaration:

function Person (firstName)
{
this.firstName = firstName;
}

ISTM a function expression is only useful if the constructor *definition*
needs to use a previously assigned value.

> Person.prototype.sayHello = function() {
> console.log("Hello, I'm " + this.firstName);
> };
>
> var person1 = new Person("Alice");
> var person2 = new Person("Bob");
>
> // call the Person sayHello method.
^ prototype

> person1.sayHello(); // logs "Hello, I'm Alice"
> person2.sayHello(); // logs "Hello, I'm Bob"

person1 != person2
person1.sayHello == person2.sayHello

> [â?¦]
> var Person = function (firstName) {
> this.firstName = firstName;
>
> this.sayHello = function () {
> alert("Hello, I'm " + this.firstName);
^^^^^ window.alert

> };
> };
>
> var person1 = new Person("Alice");
> var person2 = new Person("Bob");
>
> // call the Person sayHello method.
^ instancesâ?? ^ s

> person1.sayHello(); // logs "Hello, I'm Alice"
> person2.sayHello(); // logs "Hello, I'm Bob"

person1 != person2
person1.sayHello != person2.sayHello

HTH

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

comp.lang.javascript

Why use prototype in this example

Tony Johansson

Christoph M. Becker

Thomas 'PointedEars' Lahn

x Login to ForumsZone