javaScript中的对象，原型和辅助结构

Question

This is a kind of question very debated, but I think the reason is the lack of good documentation and good books on the subject.

When I study a language I do a lot of digging even if some of my tests are absurd, but I think the only way to understand things is doing all kinds of experiments.

I'm beginning with JavaScript and as much I code as more I'm confused.

Let's view the code (forget the no-senses by now and consider only the outputs):

function Vehicle()
{
    this.color = 'Blue'
}

var car = new Vehicle()

console.log('Vehicle.constructor: ', Vehicle.constructor)
console.log('car.constructor: ', car.constructor)

console.log('Vehicle.prototype: ', Vehicle.prototype)
console.log('car.prototype: ', car.prototype)

console.log('Vehicle.constructor.prototype: ', Vehicle.constructor.prototype)
console.log('car.constructor.prototype: ', car.constructor.prototype)

console.log('Vehicle.prototype.constructor: ', Vehicle.prototype.constructor)
console.log('car.prototype.constructor: ', car.prototype.constructor)



Output:

Vehicle.constructor: Function()
car.constructor: Vehicle()

Vehicle.prototype: Vehicle {}  // curly braces here
car.prototype: undefined

Vehicle.constructor.prototype: function()
car.constructor.prototype: Vehicle {}      // curly braces here

Vehicle.prototype.constructor: Vehicle()
TypeError: car.prototype is undefined

My conclusions:

Vehicle.prototype == car.constructor.prototype == Vehicle {} // curly braces here
Vehicle.prototype.constructor == car.constructor == Vehicle() // parenthesis here

Vehicle.constructor == Function() // uppercase 'F'
Vehicle.constructor.prototype == function() // lowercase 'f'

car.prototype == undefined // undefined but not reported as error
car.prototype.constructor // Type error. Here 'car.prototype' is reported as an error

Now let's consider the similar code:

var car = {color: 'Blue'}

console.log('car.constructor: ', car.constructor)
console.log('car.prototype: ', car.prototype)
console.log('car.constructor.prototype: ', car.constructor.prototype)
console.log('car.prototype.constructor: ', car.prototype.constructor)


Output: 

car.constructor: Object()
car.prototype: undefined
car.constructor.prototype: Object {}  // curly braces here
TypeError: car.prototype is undefined

As we can see, here 'car.prototype' is only undefined, but 'car.prototype.constructor' is undefined and also 'TypeError'

The code above is tested in Firebug. I don't know this is Firebug's fault or JavaScript fault.

All of this puzzled me.

If this is OOP in JavaScript I think this is more ODP - Object (Dis)oriented Programming

EDIT

1) Why car.prototype is undefined when car.prototype.constructor is TypeError
2) Why both functions and objects have constructors and prototypes (see code above)?
3) What the meaning of this:

Vehicle.constructor.prototype: function()
Vehicle.prototype.constructor: Vehicle()
car.constructor.prototype: Vehicle {}

Answer 1

Any time you declare an object using object literal notation

var newObject = {foo: 'bar'};

You are creating an object that inherits from 'Object()' and has no prototype of it's own.

Notice when you call 'car.constructor' it returns 'Object()' . This is because that is the constructor JS uses in object literal notation.

When you call 'car.prototype' it is undefined because object literals have no prototype of their own.

When you call 'car.constructor.prototype' it returns an empty object since that is the essentially the value of 'Object()' . It just creates objects.

in order for your objects to have their own prototypes you must establish a constructor and use

'new myObject()' to declare your objects.

I hope I've helped answer your question. Here are a few links that have more info:

Adding Prototype to JavaScript Object Literal

http://doctrina.org/Javascript-Objects-Prototypes.html

http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

Answer 2

You should remember forever: Every function in JavaScript is actually a Function object, as Function inherited from Object, any function is Object too. So, keeping in mind this sentence, look at this:

(function f(){}) instanceof Function;        // true
(function f(){}) instanceof Object;          // true, as Function is an instance of Object
({}) instanceof Object;                      // true
({}) instanceof Function;                    // false!

Function.prototype instanceof Object;        // true
Function instanceof Object;                  // true, as all objects in JS are inherited     from Object
Object instanceof Function;                  // true, as Object is a constructor function, therefor:
Function instanceof Function;                // true
Object instanceof Object;                    // true, but:
Date instanceof Date;                        // false

Function.prototype.constructor === Function; // true
Function.constructor === Function;           // true     

typeof Object === 'function';                // true, as Object is a constructor function

So, different braces indicate that prototype is always an object (curly braces), if it is defined, and constructor is always a function. That's all.