Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26471 > unrolled thread

Why use prototype in this example

Back to article view | Back to comp.lang.javascript

Contents

  Why use prototype in this example "Tony Johansson" <johansson.andersson@telia.com> - 2015-01-06 23:29 +0100
    Re: Why use prototype in this example "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-01-06 23:53 +0100
    Re: Why use prototype in this example Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-07 04:25 +0100

#26471 — Why use prototype in this example

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 

[toc] | [next] | [standalone]

#26472

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

[toc] | [prev] | [next] | [standalone]

#26477

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_chain>

(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-4.3.24>
[3] <http://ecma-international.org/ecma-262/5.1/#sec-13.2.2>
[4] <http://PointedEars.de/wsvn/JSX/trunk/array.js>
 
> 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.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web