Javascript prototypal inheritance and object creat

Question

I cant understand the differences between the normal object and inheritance creation process and the whole prototype concept. Let's say I have this code:

function Person(name, age,location){
    this.name = name;
    this.age = age;
    this.location = location;
    this.greet = function(){
        return console.log(this.name + " says hi from "+this.location);
    }
}
    Person.prototype = {
        protoGreet: function(){
            console.log(this.name + " says 'that greeting was sent using a prototype'")
        }
    }

var alex = new Person("Alex",29,"earth");
var john = Object.create(Person);
//now I can set john's location john.location = "wherever";

1. Whats the difference between greet and protoGreet methods. They both act completely the same.
2. What is the difference between alex and john. One was created using the new keyword and the other one thru the prototype property of Person "class".
3. I guess there's no right way because both are correct, but when should I prefer one method over the other?

Answer 1

Difference between prototype functions and object itself functions:
greet function: This function (all functions are objects) is inside of the instance object so each instance has its own greet function, as you can see in the picture.

protoGreet function: Located inside an independent object in the memory (the literal object in the picture) and is not owned by any instances of Person. But each instance of the Person has a hidden link (reference) to that object (this link is called __proto__). So this object is shared among all instances of the Person

What do I care how many instances of greet are there?

Memory optimization is an essence for all applications and actually there is no exceptions for web applications. So when a single shared object is adequate for your purpose, using separate object for each instance could violate this rule. But as performance point of view the first way (i.e greet function) can be faster than the second one (i.e protoGreet function) because a certain process called prototype chain lookup does not take place. Keep in mind that in this trade-off memory is the winner.

For your other questions, Seems you don't know what exactly is done by new keyword. So let me point you out to a side note.

Note: These steps is going to be done when you invoke a function with new keyword. Suppose we have the following function:

function Person (name, age) {
    this.name = name;
    this.age = age;
}

• Create an empty literal object i.e {} (Note that the hidden __proto__ link of this object refers to the object represented by Person.prototype)
• Invoke the function and substitute all this keywords with this emply literal object (In more technical words, this refers to that empty literal object).
• The specified properties and methods will be added to that newly created object. (In this case name and age properties).
• Finally that object implicitly will be returned from the function.

Now lets come back to your question, What's differences between Object.create(Person.prototype) and new Person() ?

Case new Person() was discussed earlier above. But Object.create(Person.prototype) creates an empty object and links its __proto__ to the first input argument object (In this case Person.prototype) and return that newly created object as output.

Okay, so far I hope that this notes clarify your problems, But if my answer still doesn't make sense let me know where's your problem.