Q:

Understanding Prototype concept in JavaScript

I am trying to understand prototype in JavaScript.
Both Example 1 and Example 2 mentioned below give same output.
EXAMPLE 1 [displays 'f1 l1']
function parent(fname, lname) {
        this.firstName = fname;
        this.lastName = lname;
        this.fun1 = function () {
            return this.firstName + " " + this.lastName;
        };
    };

function child() {};
child.prototype = new parent('f1', 'l1');

var objChild = new child();
alert(objChild.fun1()); // alert displays 'f1 l1'

EXAMPLE 2 [also displays 'f1 l1']
function parent(fname, lname) {
        this.firstName = fname;
        this.lastName = lname;           
    };

parent.prototype.fun1 = function () {
        return this.firstName + " " + this.lastName;
    }; 

function child() {};
child.prototype = new parent('f1', 'l1');

var objChild = new child();
alert(objChild.fun1()); // alert displays 'f1 l1'

The only difference between EXAMPLE 1 and  EXAMPLE 2 is the way fun1() function is defined.
My question is,  when either way of defining the fun1() gives same output , what is the difference between the two.( I understand that my understanding of prototype is not clear ). 
Please clarify

A:

Your first example puts "fun1" on every parent instance. The second puts it on the parent prototype.
When you call objChild.fun1() in the first example, the JavaScript runtime will find the function on the "child" prototype object. In the second example, it won't find it there, but it will find it when it proceeds to check the "parent" prototype object.
That's not the best-practice way to establish an inheritance chain, by the way; there are some (admittedly confusing) details that that approach doesn't address. The relatively new Object.create() function is a better choice, and you can find information about it (and a "polyfill" for older browsers) on the MDN site. (If it's not clear, I mean setting child.protoype to a newly-instantiated "parent" object.)

