2. JavaScript object basics
●
●
In JavaScript an object is an (unordered)
collection of name-value pairs
Please note that in JavaScript values can be
functions!
4. Built-in object creation
●
Objects are created using constructors in new
expressions
–
●
●
Alternative syntax is the object literal
Objects without constructors can be used
immediately. For instance: x = Math.PI;
Wrapper objects are created automatically
when needed
JavaScript built-in objects fiddle
5. Custom object creation
Custom objects can be created using a
●
●
… regular JavaScript function that returns an
object reference
… constructor function invoked in the context
of a new expression
Please note;
–
A constructor is a regular JavaScript function!
–
In case no prototype functionality is used all properties and methods will be
created on the object instance
JavaScript custom objects fiddle
6. Constructor function & prototype
●
Using both the constructor function and
prototype it's possible to define
–
–
●
●
object state at the instance level and
object behavior at the level of the shared prototype
When reading JavaScript properties the entire
prototype chain is searched in case a property
cannot be located on an object instance
Individual object instances can override
inherited behavior
JavaScript constructor function and prototype fiddle
schema on next slide!
8. JavaScript inheritance
●
Combination inheritance
–
is the most common way to implement inheritance
in JavaScript
–
has two components
●
●
Prototype chaining for the implementation of (shared)
base class behavior
Constructor stealing for the initialization of base class
properties on derived object instances
JavaScript combination inheritance fiddle
schema on next slide!
10. Prototypal inheritance
●
In prototypal inheritance
–
–
●
a new object instance inherits directly from
another object instance
there is no need to implement constructor
functions
In ECMAScript (fifth edition) prototypal
inheritance is implemented as follows:
var die_3 = Object.create(die_1);
JavaScript prototypal inheritance fiddle
schema on next slide!
//Declaration object references
var obj_inst_1, obj_inst_2;
//Use the Object constructor in conjunction with the new operator to
//instantiate a new object and assign the reference to obj_inst_1
obj_inst_1 = new Object();
//In JavaScript object properties and methods can be added on the fly
obj_inst_1.prop = "Added on the fly";
obj_inst_1.func = function() {return this.prop + "!";};
toFiddleResult(obj_inst_1.func());
//Object literal, an alternative way to instantiate Javascript objects
obj_inst_2 = {
prop: "Added as part of the object literal",
func: function() {return this.prop + "!";}
};
toFiddleResult(obj_inst_2.func());
//There is no need to instantiate objects without constructors, i.e.
//the global object, Math & JSON
var global = this; //In top level code this refers to the global object
toFiddleResult("Is 42 a finite number? " + global.isFinite(42));
toFiddleResult("The number u03c0 = " + Math.PI);
//Primitive wrapper objects are created automatically when needed
var str = "u00a9 Hans de Rooij";
toFiddleResult(str.substring(2, 6) + " wrote this code");
//Function for displaying code results in the JSFiddle results pane
function toFiddleResult(str) {
//Reference to document node containing fiddle results
var result_div = document.getElementById("fiddle_result");
//Fiddle results are listed in pre tags
var add_pre = document.createElement("pre");
add_pre.appendChild(document.createTextNode(str));
result_div.appendChild(add_pre);
}
