Function/method new
This is basically a copy/paste from the excellant
answer on stackoverflow to the question:
What is the new keyword in JavaScript?
<!DOCTYPE html>
<html>
<head>
<!-- TODO zweiter Teil von http://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript -->
<title>Javascript OO, What does 'new' do</title>
<!--
http://stackoverflow.com/a/3658673/180275
new does exactly three things:
- - - - - - - - - - - - - - -
1 It creates a new object. The type of this object is simply
object.
2 It sets this new object's internal, inaccessible, [[prototype]]
property to be the constructor function's external, accessible,
prototype object.
3 It executes the constructor function, using the newly created
object whenever 'this' is mentioned. ('this' is an alias
for the new object).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
See also
http://joost.zeekat.nl/constructors-considered-mildly-confusing.html
-->
<script type='text/javascript'>
// Must be initialized in/after onLoad.
var out;
function print_out(text) {
out.innerHTML += '<br>' + text + '<br>-------------------------';
}
ObjMaker = function() {
// If this function is called as a constructor (new ObjMaker), then
// the created objects.[[prototype]] is set to the current value
// of ObjMaker.prototype.
print_out('Constructor, ObjMaker.prototype.b=' + ObjMaker.prototype.b);
this.a = 'first';
};
// ObjMaker is just a function, there's nothing special about it that
// makes it a constructor.
ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that
// we can alter. I just added a property called 'b' to it like
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function init() {
out = document.getElementById('out');
print_out('calling var obj1 = new ObjMaker()');
var obj1 = new ObjMaker();
// Three things just happened
//
// 1: A new, empty object was created called obj1.
// At first obj1 was the same as {}
//
// 2: The [[prototype]] property of obj1 was set to a copy of the
// prototype property ObjMaker.
//
// 3: The ObjMaker function was executed, with obj1 in place of this.
// so obj1.a was set to 'first'
print_out('obj1.a = ' + obj1.a);
// returns 'first'
print_out('obj1.b = ' + obj1.b);
// obj1 doesn't have a property called 'b', so JavaScript checks
// it's [[prototype]]. It's [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'
print_out("changing ObjMaker's prototype");
// ObjMaker.prototype = new Object();
ObjMaker.prototype = {};
ObjMaker.prototype.b = 'prototype changed';
var obj2 = new ObjMaker();
print_out('obj1.b = ' + obj1.b);
print_out('obj2.a = ' + obj2.a);
print_out('obj2.b = ' + obj2.b);
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</script>
</head>
<body onLoad='init()'>
<div id='out'>
<b>Out</b>:
</div>
</body>
</html>
Constructor
<!DOCTYPE html>
<html>
<head>
<title>Javascript OO, Example 1, constructor</title>
<script type='text/javascript'>
// Must be initialized in/after onLoad.
var out;
function print_out(text) {
out.innerHTML += '<br>' + text;
}
function someObject(some_value) {
print_out('Constructor of someObject');
this.attribute_1 = some_value;
this.attribute_2 = some_value * 2;
}
function init() {
out = document.getElementById('out');
print_out('init');
var object_1 = new someObject(1);
var object_2 = new someObject(10);
print_out('object_1.attribute_1: ' + object_1.attribute_1);
print_out('object_1.attribute_2: ' + object_1.attribute_2);
print_out('object_2.attribute_1: ' + object_2.attribute_1);
print_out('object_2.attribute_2: ' + object_2.attribute_2);
}
</script>
</head>
<body onLoad='init()'>
<div id='out'>
<b>Out</b>:
</div>
</body>
</html>
Methods
<!DOCTYPE html>
<html>
<head>
<title>Javascript OO, Example 2, Methods</title>
<script type='text/javascript'>
// Must be initialized in/after onLoad.
var out;
function print_out(text) {
out.innerHTML += '<br>' + text;
}
function someObject(some_value) {
print_out('Constructor of someObject');
this.attribute_1 = some_value;
this.attribute_2 = some_value * 2;
}
// Define a method for 'someObject':
someObject.prototype.print = function(text) {
print_out(text + ', attribute_1=' + this.attribute_1 + ', attribute_2=' + this.attribute_2);
}
function init() {
out = document.getElementById('out');
print_out('init');
var object_1 = new someObject(1);
var object_2 = new someObject(10);
object_1.print('Object 1');
object_2.print('Object 2');
}
</script>
</head>
<body onLoad='init()'>
<div id='out'>
<b>Out</b>:
</div>
</body>
</html>
Inheritance
<!DOCTYPE html>
<html>
<head>
<title>Javascript OO, Example 3, Inheritance</title>
<script type='text/javascript'>
// Must be initialized in/after onLoad.
var out;
function print_out(text) {
out.innerHTML += '<br>' + text;
}
// Define the Base class:
function BaseClass(text) {
print_out('Constructor of BaseClass, text=' + text);
this.text = text;
}
BaseClass.prototype.identify = function() {
print_out ('My text is ' + this.text);
}
// Derive from the Base class
// DerviedOne:
function DerivedOne(text) {
print_out('Constructor of DerivedOne, text=' + text);
// call(X) sets the 'this' in the called method
// to X. So, BaseClass.this will be DerivedOne.this:
BaseClass.call(this, text);
}
DerivedOne.prototype = new BaseClass('null');
DerivedOne.prototype.constructor = DerivedOne;
// Define a method for 'someObject':
someObject.prototype.print = function(text) {
print_out(text + ', attribute_1=' + this.attribute_1 + ', attribute_2=' + this.attribute_2);
}
function init() {
out = document.getElementById('out');
var der_1 = new DerivedOne('Derived One');
// var der_1 = new BaseClass('Derived One');
print_out('der_1.text: '+der_1.text);
der_1.identify();
print_out('x');
}
</script>
</head>
<body onLoad='init()'>
<div id='out'>
<b>Out</b>:
</div>
</body>
</html>