JavaScript Inherited Properties Default Value

Question

Consider having below code

function Employee() {
    this.id = "";
    this.name = "";
    this.gender = "";
}

function Programmer() {
    this.expertise = "";
}

Programmer.prototype = new Employee();

And then I want to inherit the Programmer further to JScriptProgrammer with default value of "expertise" set to "JavaScript".

Question: What is the diference between

function JScriptProgrammer() {
    this.expertise = "JavaScript";
}

JScriptProgrammer.prototype = new Programmer();

and

function JScriptProgrammer() {
}

JScriptProgrammer.prototype = new Programmer();
JScriptProgrammer.prototype.expertise = "JavaScript";

It's the same difference as between defining properties on the prototype vs. on every instance. Duplicate of [Use of 'prototype' vs. 'this' in Javascript?](http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript) Whether you use a `new Programmer` instance for the prototype or not (a plain object) doesn't make any difference. — Bergi, Oct 04 '13 at 12:06
Also, [don't use `new` for inheritance](http://stackoverflow.com/questions/12592913/what-is-the-reason-to-use-the-new-keyword-here). — Bergi, Oct 04 '13 at 12:10

score 1 · Accepted Answer · edited May 23 '17 at 12:03

You can use prototype for default values of an object and it does save memory. If you don't surely shadow the property later (assign a new value for it on the instance) then all instances share the same pointer to the value.

If however you are surely going to assign a value to it then better define it in the constructor body as this.myval

Here is the tricky part of assigning default values to prototype; you have to re assign a new value to it to make an instance specific change. Object values can be manipulated by invoking functions on them or re assigning properties. When you do that then the default value for all instances change:

var Person=function(){};
Person.prototype.teeth=[0,1,2,3];
Person.prototype.legs={left:1,right:1};

var ben=new Person();
var betty=new Person();
ben.teeth.splice(2,1);//ben looses a tooth
//when ben looses a tooth like that betty looses it too
console.log(betty.teeth);//[1,2,3] poor betty
//now poor betty has an accident
betty.legs.right=0;
//looks like ben looses it too
console.log(ben.legs);//{left:1,right:0}
//I don't feel sorry for ben though because
//he knocked out betty's tooth

It is better not to initiate a new instance for inheritance, you can use Object.create or a helper function to set up inheritance without creating an instance. All about inheritance, prototype, overriding and calling super here:https://stackoverflow.com/a/16063711/1641941

Awesome! So it's bad to use prototype to define default value for property as it will become a shared member for all instance of the object. Thanks!! Really appreciate the answer! :) — ch0eb1t, Oct 04 '13 at 11:40
@ch0eb1t You're welcome. In google closure libraries all primitive values are defined on the prototype. So string, number and boolean are fine. Objects can be used but you can never manipulate them, always re assign to change it's value. When your code is shared by other programmers then they may not know that and get unexpected results so for Object members that need to be instance specific I would not specify them on the prototype. — HMR, Oct 04 '13 at 12:11

score 0 · Answer 2 · answered Oct 04 '13 at 06:19

0

the difference

function JScriptProgrammer() {
this.expertise = "JavaScript";
}
JScriptProgrammer.prototype = new Programmer();

Means when you are using JScriptProgrammer() the expertise value are already been set to "JavaScript"

but when you use

function JScriptProgrammer() 
{
}
JScriptProgrammer.prototype = new Programmer();
JScriptProgrammer.prototype.expertise = "JavaScript";

Means you set expertise value after using JScriptProgrammer()

answered Oct 04 '13 at 06:19

goravine

266
3
11

I don't think this is a valid answer. See http://jsbin.com/OQEBaHu/1/edit the log output "JavaScript" instead of "Not JavaScript". If using prototype will set the value later after construtor call, the log ouput in the example must have been "Not JavaScript" rather than "JavaScript" – ch0eb1t Oct 04 '13 at 07:35

score 0 · Answer 3 · edited May 23 '17 at 10:25

They are the same. Second version saves memory, meaning all the children use the same instance of the function/variable.

See following example which shows why this might be required

function JScriptProgrammer() {
   var tmp = "Hello";

   //accessing private variables
   this.sayHello = function() {
      alert(tmp + " "+ this.expertise + "er");
   }
}

JScriptProgrammer.prototype = new Programmer();
JScriptProgrammer.prototype.expertise = "JavaScript";

More reading

score -1 · Answer 4 · edited May 23 '17 at 10:32

In resumen:

prototype is use to inherit of existing object. For example. If you want to add a new method to Array object you can do this

Array.prototype.MyNewMethod = function()
{
alert("im bellow to array object")
}

Which means that you can to this

var array = [1,2,3];
array.MyNewMethod();//prints im bellow to array object

(read this post for more reference)

Which means that your code is doing this:

        function JScriptProgrammer() {
        }
        function Programmer(){
        this.name = "hello world";
       }
        JScriptProgrammer.prototype = new Programmer();// inhering from Programmers object(or lets say class)
        JScriptProgrammer.prototype.expertise = "JavaScript"; // assigning a value to expertise property that belows to JScriptProgrammer class



console.log(new JScriptProgrammer())//JScriptProgrammer {name: "hello world", expertise: "JavaScript"} notice that property name that bellow to Programmer
 object now is in JScriptProgrammer object as well.

here test http://jsbin.com/IgOFimi/1/edit

I don't know what this is supposed to answer but the code doesn't really demonstrate anything at all. — Nicole, Oct 04 '13 at 05:01
@Misters: I'm sorry but what I ask is the difference of assigning default value of an object. using both this.expertise and prototype.expertise does the job just fine. All I want to know is the difference between those two. Clearly there must be a case where using this is more preferred, or when using prototype is more preferred. — ch0eb1t, Oct 04 '13 at 05:37

JavaScript Inherited Properties Default Value

4 Answers4

Linked