0

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 {}

user3244003
  • 1
  • 1
  • I'm having a hard time understanding your question. What exactly are you asking? We can answer questions like "what's the difference between a prototype and a constructor" or "why does x.y give undefined when x.y.z gives TypeError", but you're not asking anything specific. Seems to me like the best thing for you would be to find a good article on JavaScript's functions, prototypes and constructors and understand the relations between them. You can try [this](http://www.codeproject.com/Articles/687093/Understanding-JavaScript-Object-Creation-Patterns), although there are countless others. – Avish Jan 28 '14 at 11:19
  • Basically I don't understand how prototypes and construtors differ and why can we have both associated with objects and functions, and also the meaning of object.prototype.constructor (or the inverse) – user3244003 Jan 28 '14 at 11:28

2 Answers2

0

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/

Community
  • 1
  • 1
Rorschach120
  • 1,200
  • 1
  • 11
  • 18
0

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.

Aniketos
  • 659
  • 6
  • 8