Note that there are some explanatory texts on larger screens.

plurals
  1. POObject Oriented questions in Javascript
    primarykey
    data
    text
    <p>I've been using javascript for a while, but have never learned the language past the basics. I am reading John Resig's "Pro Javascript Techniques" - I'm coming up with some questions, but I'm not finding the answers to them in the book or on google, etc.</p> <p>John gives this example in his book:<br /> <strong>Function #1</strong></p> <pre><code>function User( name, age ){ this.name = name; this.age = age; } // Add a new function to the object prototype User.prototype.getName = function(){ return this.name; }; User.prototype.getAge = function(){ return this.age; }; var user = new User( "Bob", 44 ); console.log("User: " + user.getName() + ", Age: " + user.getAge()); </code></pre> <p>I'm still learning about the <em>prototype</em> property, so I tried writing something similar:<br /> <strong>Function #2</strong></p> <pre><code>function User (name, age ) { this.name = name; this.age = age; this.getName = function() { return this.name; }; this.getAge = function() { return this.age; }; } var user = new User( "Bob", 44 ); console.log("User: " + user.getName() + ", Age: " + user.getAge()); </code></pre> <p>It doesn't use the <em>prototype</em> property to create the getName and getAge functions, but the output is the same as John's example.</p> <p>I took it one step further, and created this:<br /> <strong>Function #3</strong></p> <pre><code>var User = { name: "", age: 0, setName: function(name) { this.name = name; }, setAge: function(age) { this.age = age; }, getName: function() { return this.name; }, getAge: function() { return this.age; } }; User.setName("Bob"); User.setAge(44); console.log("User: " + User.getName() + ", Age: " + User.getAge()); </code></pre> <p>Again - it looks different than John's example (and I had to add setter methods), but the output is the same.</p> <p><strong>Question #1</strong> - what is the difference between the 3 functions? What is the advantage of the prototype property, and is Function #2 doing anything incorrectly, because it seems more straight forward to code #2 instead of #1 (although I'm sure #1 is doing it better seeing as John created it).</p> <p><strong>Question #2</strong> - How could I modify function #3 to not use the setName and setAge methods, but still keep the {...} shorthand? Can the {...} shorthand have constructors?</p> <p>Thanks in advance for helping me learn!</p> <p><strong>EDIT</strong> I think my 2nd question was a little confusing. I meant how could I use the {...} shorthand to create a User object, but then after I create the object, say something like:</p> <pre><code>var user = new User("Bob", 44); </code></pre> <p>Just like in Function #1 - or is that not possible?</p> <p><strong>EDIT #2</strong> Wow! Thanks everyone for the awesome answers. That really makes it a lot more clear to me. So if I understand correctly, the difference between #1 and #2 aren't too much. If I only ever create one "User" object - they probably aren't different at all. But if my program creates many User objects, #1 would most likely be more efficient and use less memory since all objects will share the same functions.</p> <p>I really appreciate all of the great answers - Thanks!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload