JavaScript constructor and its prototype main features

by Ilia Tretiakov

HTML

<h3>
What I have seen in a browser's console
</h3>

<div class="header">The JavaScript`s Object is an constructor</div>
The Object holds: function Object() { [native code] }
<br /><br />
<div class="header">Monkey patching. Bad practice: Extension of native prototypes</div>
someObj`s prototype come from Object constructor and deepest from Object
<br /><br />
<div class="header">Detached custom constructor and prototype</div>
lostCtorObj`s prototype come from Object constructor and deepest from Object
<br /><br />
<div class="header">Standard approach expected from a constructor</div>
firstExpectedObj`s prototype come from customConstructor constructor and deepest from Object
<br /><br />
<div class="header">Substitution of a prototype</div>
secondExpectedObj`s prototype come from customConstructor(Changed prototype) constructor and deepest from Object
<br /><br />
<div class="header">What to expect from objects created before the prototype substitution</div>
firstExpectedObj`s prototype come from customConstructor constructor and deepest from Object

CSS

.header { font-weight: bold; color: red; }

JavaScript

console.clear();

var consoleCss = 'font-weight: bold; color: red;';

console.log('%c The JavaScript`s Object is an constructor', consoleCss);
console.log('The Object holds: %s', Object);
console.log('');

console.log('%c Monkey patching. Bad practice: Extension of native prototypes', consoleCss);
// Bad practice: Extension of native prototypes.
// This technique is called monkey patching and breaks encapsulation.
Object.prototype.ctorName = 'Object';
Object.prototype.deepest = 'Object';
var someObj = {};
console.log('someObj`s prototype come from %s constructor and deepest from %s',
	someObj.ctorName,
  someObj.deepest);
console.log('');

console.log('%c Detached custom constructor and prototype', consoleCss);
// Let's create an object that is disconnected from its real ctor.
var detachedConstructor = function(){
	// The return statement will break connection with the prototype of "detachedConstructor" here.
  return {val: 'obj'};
}
var lostCtorObj = new detachedConstructor();
detachedConstructor.prototype.ctorName = 'detachedConstructor';
console.log('lostCtorObj`s prototype come from %s constructor and deepest from %s',
	lostCtorObj.ctorName,
  lostCtorObj.deepest);
console.log('');

console.log('%c Standard approach expected from a constructor', consoleCss);
// Standard approach expected from a constructor.
var customConstructor = function(){
    this.val = 'ctor';
}
// POCO - plain old constructored object :-)
var firstExpectedObj = new customConstructor();
customConstructor.prototype.ctorName = 'customConstructor';
console.log('firstExpectedObj`s prototype come from %s constructor and deepest from %s',
	firstExpectedObj.ctorName,
  firstExpectedObj.deepest);
console.log('');

console.log('%c Substitution of a prototype', consoleCss);
// Substitution of a prototype for future objects feature.
customConstructor.prototype = {};
var secondExpectedObj = new customConstructor();
customConstructor.prototype.ctorName = 'customConstructor(Changed...