why prototype is undefined

Question

I known this has been asked hundreds of times, however, I can't seem to grasp the concept of prototype

Here's my sample script

var config = {
  writable: true,
  enumerable: true,
  configurable: true
};

var defineProperty = function(obj, name, value) {
  config.value = value;
  Object.defineProperty(obj, name, config);
}


var man= Object.create(null);
defineProperty(man, 'sex', "male");

var person = Object.create(man);
person.greet = function (person) {
    return this.name + ': Why, hello there, ' + person + '.'
}
var p=Object.getPrototypeOf(person);
alert(p.sex);//shows male
person.prototype.age=13;//why there is a error said the prototype is undefined? I thought it supposed be man object...

var child=function(){}
child.prototype.color="red";//why this line doesn't show error? both child and person are an object . 

alert(child.prototype.color);//shows red

var ch=Object.getPrototypeOf(child);

alert(ch.color);//why it is undefined? it is supposed red.

Hope you can give me some helps... thanks.

Updated:

Thanks your guys kindly help, Based on Elclanrs's answer, Below is what I learned.

Function is the one of the build-in objects in javascript. the 3 format creation function object are equal.

var function_name = new Function(arg1, arg2, ..., argN, function_body)
function function_name(arg1, arg2, ..., argN)
{
...
}
var function_name=function(arg1, arg2, ..., argN)
{
...
}

So, that is why create a prototype chain we have to create a function and then call it with the new keyword .

Function.prototype is the reference to All the Function object prototype.

Cheers

Answer 1

The prototype property only exists on functions, and person is not a function. It's an object.

Here's what's happening:

var man = Object.create(null);         // man (object) -> null
man.sex = "male";

var person = Object.create(man);       // person (object) -> man (object) -> null
person.greet = function () { ... };

var p = Object.getPrototypeOf(person); // man (object) -> null
alert(p.sex);                          // p is the same object as man

person.prototype.age = 13;             // person doesn't have a prototype

var child = function () {};            // child (function) -> Function.prototype
                                       // -> Object.prototype -> null
child.prototype.color = "red";         // child has a prototype

var ch = Object.getPrototypeOf(child); // Function.prototype

alert(ch.color);                       // ch is not the same as color.prototype
                                       // ch is Function.prototype

For more information I suggest you read this answer: https://stackoverflow.com/a/8096017/783743

Edit: To explain what's happening in as few words as possible:

1. Everything in JavaScript is an object except primitive values (booleans, numbers and strings), and null and undefined.

2. All objects have a property called [[proto]] which is not accessible to the programmer. However most engines make this property accessible as __proto__.

3. When you create an object like var o = { a: false, b: "something", ... } then o.__proto__ is Object.prototype.

4. When you create an object like var o = Object.create(something) then o.__proto__ is something.

5. When you create an object like var o = new f(a, b, ...) then o.__proto__ is f.prototype.

6. When JavaScript can't find a property on o it searches for the property on o.__proto__ and then o.__proto__.__proto__ etc until it either finds the property or the proto chain ends in null (in which case the property is undefined).

7. Finally, Object.getPrototypeOf(o) returns o.__proto__ and not o.prototype - __proto__ exists on all objects including functions but prototype only exists on functions.