Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Tinkering with prototypes

 
Ranch Hand
Posts: 254
1
MySQL Database Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm trying to wrap my head around JavaScript prototype and had some questions. Are both the code snippets below mean the same thing?





If we declare Foo.prototype.method = function() {//some code} I think this makes Foo method available on every Bar object. Am I right about this? Also I will definitely appreciate learning about any good resource on prototypes.
 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
They are not exactly the same, even though in some circumstances they will act similarly.
 
whippersnapper
Posts: 1843
5
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well, the first one sets the prototype of any object created using function Bar as a constructor to the prototype of Foo. The second sets the prototype of any object created using function Bar as a constructor to a new object using function Foo as the constructor.

For this kind of investigation, I think it helps to create actual objects with actual properties. My examples below use the for...in loop, because it walks the prototype chain (it doesn't just iterate own properties).

Also, refresh the browser between examples 1, 1b, and 2, so there's no residue from the previous example.



Output:

1, foo
fooOwnField
fooPrototypeField
1, bar
barOwnField
fooPrototypeField

So foo is pretty much as expected, right? But what happened to bar? "bar" got fooPrototypeField because Bar's prototype got set to Foo's prototype, so that matches expectation. It didn't get fooOwnField because nothing calls Foo as a constructor here. So bar has barOwnField but not barPrototypeField. What happened to barPrototypeField? Oh, we clobbered it ourselves. In line (a) we add the property barPrototypeField to Bar's prototype but then in line (b) we replace Bar's prototype completely.

Let's reorder things:



Output:
1b, foo
fooOwnField
fooPrototypeField
barPrototypeField
1b, bar
barOwnField
fooPrototypeField
barPrototypeField

OK, so bar makes sense, right. It now has its own property and its prototype's property and Foo's prototype property. What about foo? It has its own property and its prototype's property but it also has Bar's prototype property.

Let's show this. (This time don't refresh the browser.)


1b, more foo
fooOwnField
fooPrototypeField
barPrototypeField
keepAugmenting
evenMore
1b, more bar
barOwnField
fooPrototypeField
barPrototypeField
keepAugmenting
evenMore

So, consider what this code does:

Bar.prototype = Foo.prototype;

There is a single object serving as both the prototype of Bar and Foo. Any objects created with either Bar or Foo as their constructor will share that single object.

This may or may not be what you want, design-wise.

*****



2, foo
fooOwnField
fooPrototypeField
2, bar
barOwnField
fooOwnField
barPrototypeField
fooPrototypeField
2, bar's prototype
fooOwnField
barPrototypeField
fooPrototypeField

So foo is pretty much what we expect. And bar too, right? Note that in this example two objects are created with Foo as the constructor --- one at large (a). And the other (b) that serves as the prototype for any and all objects create with Bar as the constructor. Note that these two different objects can have different values for their fooOwnField, but they will share fooPrototypeField.

To see this, we need to start assigning values. Continue without refreshing browser.



2, foo
fooOwnField: not shared with anything
fooPrototypeField: so shared. wow.
2, bar
barOwnField: bar not shared
fooOwnField: shared among all bars
barPrototypeField: also shared among all bars
fooPrototypeField: so shared. wow.
2, rebar
barOwnField: rebar not shared
fooOwnField: shared among all bars
barPrototypeField: also shared among all bars
fooPrototypeField: so shared. wow.
Got it?
 
Tongue wrestling. It's not what you think. And here, take this tiny ad. You'll need it.
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic