JavaScript for ABAP Programmers Chapter 6 - Inheritance

1. JavaScript for ABAP Programmers
Referential Inheritance
Chris Whealy / The RIG

2. ABAP JavaScript
Strongly typed Weakly typed
Syntax similar to COBOL Syntax derived from Java
Block Scope Lexical Scope
No equivalent concept Functions are 1st class citizens
OO using class based inheritance OO using referential inheritance
Imperative programming Imperative or Functional programming

3. Object Orientation and Inheritance

4. © 2013 SAP AG. All rights reserved. 4
Object Orientation and Inheritance
Object orientation is a programming concept based on the idea of code reuse through inheritance;
however, there are two ways of implementing inheritance.

5. © 2013 SAP AG. All rights reserved. 5
Object Orientation and Inheritance
Object orientation is a programming concept based on the idea of code reuse through inheritance;
however, there are two ways of implementing inheritance.
Person
Class
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Class based
First, a special data
type must be created
called a “class”

6. © 2013 SAP AG. All rights reserved. 6
Object Orientation and Inheritance
Object orientation is a programming concept based on the idea of code reuse through inheritance;
however, there are two ways of implementing inheritance.
Person
Class
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person1
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person2
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person3
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Type references
Class based
Then, multiple instances of that
class can be created through a
process called instantiation

7. © 2013 SAP AG. All rights reserved. 7
Object Orientation and Inheritance
Object orientation is a programming concept based on the idea of code reuse through inheritance;
however, there are two ways of implementing inheritance.
Person
Class
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person1
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person2
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person3
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Type references
Class based
Person
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Referential
Any existing
object can act as
a “prototype”

8. © 2013 SAP AG. All rights reserved. 8
Object Orientation and Inheritance
Object orientation is a programming concept based on the idea of code reuse through inheritance;
however, there are two ways of implementing inheritance.
Person
Class
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person1
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person2
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person3
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Type references
Class based
Person
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Neddie
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Eccles
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Bluebo<le
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Object references
Referential
All objects point to a
prototype object by means
of a reference chain

9. © 2013 SAP AG. All rights reserved. 9
Class-based Inheritance vs. Referential Inheritance 1/2
There is a key conceptual difference between class-based inheritance and referential (or prototypical)
inheritance.
Person
Class
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person1
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person2
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person3
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Type references
Class based
Class-based inheritance (used in Java or ABAP) specifies that unless a class is
defined as static, all object instances must be created through a process called
instantiation. During instantiation, the class acts as a template by which the
object instance is defined.

10. © 2013 SAP AG. All rights reserved. 10
Class-based Inheritance vs. Referential Inheritance 1/2
There is a key conceptual difference between class-based inheritance and referential (or prototypical)
inheritance.
Person
Class
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person1
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person2
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Person3
Instance
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Type references
Class based
Class-based inheritance (used in Java or ABAP) specifies that unless a class is
defined as static, all object instances must be created through a process called
instantiation. During instantiation, the class acts as a template by which the
object instance is defined.
Key feature of class-based inheritance
Once an object instance has been created, that instance exists as an
independent entity from its parent class.
After instantiation, any changes made to the parent class have no effect on
existing child instances.

11. © 2013 SAP AG. All rights reserved. 11
Person
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Neddie
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Eccles
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Bluebo<le
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Object references
Referential
Class-based Inheritance vs. Referential Inheritance 2/2
Referential (or prototypical) inheritance has no concept of creating an
object instance from a class. New objects are simply created with a
reference to some other object that acts as a “prototype”.
There is a key conceptual difference between class-based inheritance and referential (or prototypical)
inheritance.

12. © 2013 SAP AG. All rights reserved. 12
Person
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Neddie
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Eccles
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Bluebo<le
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Object references
Referential
Class-based Inheritance vs. Referential Inheritance 2/2
Referential (or prototypical) inheritance has no concept of creating an
object instance from a class. New objects are simply created with a
reference to some other object that acts as a “prototype”.
The link from an object to its prototype is known as a “prototype chain”.
A prototype chain is a chain of objects used to implement both code reuse
through inheritance and shared properties.
There is a key conceptual difference between class-based inheritance and referential (or prototypical)
inheritance.

13. © 2013 SAP AG. All rights reserved. 13
Person
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Neddie
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Eccles
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Bluebo<le
Proper,es
firstName
lastName
hobbyList
Methods
getHobby
setHobby
Object references
Referential
Class-based Inheritance vs. Referential Inheritance 2/2
Referential (or prototypical) inheritance has no concept of creating an
object instance from a class. New objects are simply created with a
reference to some other object that acts as a “prototype”.
The link from an object to its prototype is known as a “prototype chain”.
A prototype chain is a chain of objects used to implement both code reuse
through inheritance and shared properties.
Key feature of referential inheritance
Any changes made to the prototype object are immediately visible to all
referencing objects.
There is a key conceptual difference between class-based inheritance and referential (or prototypical)
inheritance.

14. Understanding the Prototype Chain

15. © 2013 SAP AG. All rights reserved. 15
Understanding the Prototype Chain 1/2
//
Create
an
object
var
myObj
=
{
firstName
:
'Harry',
lastName
:
'Hawk'
}
All JavaScript objects have a default property called __proto__ that is used to define the next object in the
prototype chain.*
myObj
Properties
u firstName
u lastName
u __proto__
* __proto__ is not an official property name defined in the ECMAScript specification, but apart from Internet Explorer, all modern browsers implement this property.

16. © 2013 SAP AG. All rights reserved. 16
Understanding the Prototype Chain 1/2
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
//
Create
an
object
var
myObj
=
{
firstName
:
'Harry',
lastName
:
'Hawk'
}
myObj.__proto__;
//
à
Object.prototype
//
All
the
methods
of
Object.prototype
are
now
//
available
to
myObj
myObj.valueOf();
All JavaScript objects have a default property called __proto__ that is used to define the next object in the
prototype chain.*
Whenever you create a JavaScript object, by default __proto__ will point to Object.prototype.
myObj
Properties
u firstName
u lastName
u __proto__
* __proto__ is not an official property name defined in the ECMAScript specification, but apart from Internet Explorer, all modern browsers implement this property.

17. © 2013 SAP AG. All rights reserved. 17
Understanding the Prototype Chain 1/2
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
//
Create
an
object
var
myObj
=
{
firstName
:
'Harry',
lastName
:
'Hawk'
}
myObj.__proto__;
//
à
Object.prototype
//
All
the
methods
of
Object.prototype
are
now
//
available
to
myObj
myObj.valueOf();
All JavaScript objects have a default property called __proto__ that is used to define the next object in the
prototype chain.*
Whenever you create a JavaScript object, by default __proto__ will point to Object.prototype.
myObj
Properties
Object.prototype is itself a JavaScript object,
but its __proto__ property is always set to null
to indicate the end of the prototype chain
u firstName
u lastName
u __proto__
* __proto__ is not an official property name defined in the ECMAScript specification, but apart from Internet Explorer, all modern browsers implement this property.

18. © 2013 SAP AG. All rights reserved. 18
Understanding the Prototype Chain 2/2
//
Create
a
function
var
myFunc
=
function()
{
this.firstName
=
'Harry',
this.lastName
=
'Hawk'
}
myFunc.__proto__;
//
à
Function.prototype
Function.prototype
Methods
Similarly, all Function objects inherit their basic properties from Function.prototype.
myFunc
Properties
u apply()
u bind()
u call()
u isGenerator()
u toString()
u firstName
u lastName
u __proto__

19. © 2013 SAP AG. All rights reserved. 19
Understanding the Prototype Chain 2/2
//
Create
a
function
var
myFunc
=
function()
{
this.firstName
=
'Harry',
this.lastName
=
'Hawk'
}
myFunc.__proto__;
//
à
Function.prototype
Function.prototype
Methods
Similarly, all Function objects inherit their basic properties from Function.prototype.
Since Function.prototype is also an object, it inherits from Object.prototype
myFunc
Properties
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
u firstName
u lastName
u __proto__

20. © 2013 SAP AG. All rights reserved. 20
myObj
Properties
u firstName
u lastName
u __proto__
Understanding the Prototype Chain: Property Shadowing
A child object can override any property inherited from its prototype simply by redefining it. This is known as
“property shadowing”.
//
Create
an
object
that
overrides
a
//
standard
method
in
Object.prototype
var
myObj
=
{
firstName
:
'Harry',
lastName
:
'Hawk',
}
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__

21. © 2013 SAP AG. All rights reserved. 21
myObj
Properties
u firstName
u lastName
u __proto__
Methods
Understanding the Prototype Chain: Property Shadowing
A child object can override any property inherited from its prototype simply by redefining it. This is known as
“property shadowing”.
For instance, this technique is often used to customise the behaviour of the toString() method.
//
Create
an
object
that
overrides
a
//
standard
method
in
Object.prototype
var
myObj
=
{
firstName
:
'Harry',
lastName
:
'Hawk',
toString
:
function()
{
return
"My
name
is
"
+
this.firstName
+
"
"
+
this.lastName;
}
}
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
u toString()

22. © 2013 SAP AG. All rights reserved. 22
myObj
Properties
u firstName
u lastName
u __proto__
Methods
Understanding the Prototype Chain: Property Shadowing
A child object can override any property inherited from its prototype simply by redefining it. This is known as
“property shadowing”.
For instance, this technique is often used to customise the behaviour of the toString() method.
//
Create
an
object
that
overrides
a
//
standard
method
in
Object.prototype
var
myObj
=
{
firstName
:
'Harry',
lastName
:
'Hawk',
toString
:
function()
{
return
"My
name
is
"
+
this.firstName
+
"
"
+
this.lastName;
}
}
Property shadowing is a temporary, local effect within the referencing object and changes neither the prototype
object nor any other object that references the prototype.
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
u toString()

23. © 2013 SAP AG. All rights reserved. 23
Understanding the Prototype Chain: Extending a Prototype
For any object used as a prototype, all referencing objects will immediately inherit any new functionality added to
that prototype. E.G. the standard JavaScript String object has no rot13() method, but one can easily be added
by extending the String.prototype object.
//
Extend
the
standard
String
prototype
to
include
a
rot13()
method
String.prototype.rot13
=
function()
{
var
from
=
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var
to
=
"NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm";
function
rot13Char(c)
{
return
(from.indexOf(c)
>
-­‐1)
?
to.charAt(from.indexOf(c))
:
c;
}
return
this.split('').map(rot13Char).join('');
}
String.prototype
Methods
u charAt()
u charCodeAt()
u concat()
u endsWith()
u fromCharCode()
u indexOf()
u lastIndexOf()
u localCompare()
...snip…
Properties
u length
u name
u __proto__

24. © 2013 SAP AG. All rights reserved. 24
Understanding the Prototype Chain: Extending a Prototype
For any object used as a prototype, all referencing objects will immediately inherit any new functionality added to
that prototype. E.G. the standard JavaScript String object has no rot13() method, but one can easily be added
by extending the String.prototype object.
//
Extend
the
standard
String
prototype
to
include
a
rot13()
method
String.prototype.rot13
=
function()
{
var
from
=
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var
to
=
"NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm";
function
rot13Char(c)
{
return
(from.indexOf(c)
>
-­‐1)
?
to.charAt(from.indexOf(c))
:
c;
}
return
this.split('').map(rot13Char).join('');
}
String.prototype
Methods
u charAt()
u charCodeAt()
u concat()
u endsWith()
u fromCharCode()
u indexOf()
u lastIndexOf()
u localCompare()
...snip...
u rot13()
Properties
u length
u name
u __proto__

25. © 2013 SAP AG. All rights reserved. 25
Understanding the Prototype Chain: Extending a Prototype
For any object used as a prototype, all referencing objects will immediately inherit any new functionality added to
that prototype. E.G. the standard JavaScript String object has no rot13() method, but one can easily be added
by extending the String.prototype object.
//
Extend
the
standard
String
prototype
to
include
a
rot13()
method
String.prototype.rot13
=
function()
{
var
from
=
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var
to
=
"NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm";
function
rot13Char(c)
{
return
(from.indexOf(c)
>
-­‐1)
?
to.charAt(from.indexOf(c))
:
c;
}
return
this.split('').map(rot13Char).join('');
}
//
Now
all
string
objects
immediately
inherit
a
rot13()
method
var
someStr
=
"Hi
there!";
someStr.rot13();
//
à
"Uv
gurer!"
String.prototype
Methods
u charAt()
u charCodeAt()
u concat()
u endsWith()
u fromCharCode()
u indexOf()
u lastIndexOf()
u localCompare()
...snip...
u rot13()
Properties
u length
u name
u __proto__

26. Defining Your Own Prototypes

27. © 2013 SAP AG. All rights reserved. 27
Defining Your Own Prototype Objects: 1/2
Here's an example of a function that returns a person object with three properties: firstName, lastName and
dateOfBirth.
Notice that the returned object “closes over” the variables declared in the scope of the anonymous outer function.
//
This
function
creates
a
person
object
var
person
=
function(fName,
lName,
dob)
{
var
firstName
=
fName
||
"";
var
lastName
=
lName
||
"";
var
dateOfBirth
=
dob;
return
{
firstName
:
firstName,
lastName
:
lastName,
dateOfBirth:
dob;
}
};

28. © 2013 SAP AG. All rights reserved. 28
Defining Your Own Prototype Objects: 1/2
The problem here is that each time the person function is called, the variables firstName, lastName
and dateOfBirth will be redefined. Since these properties are common to all person objects, it would
be more efficient to move their definition into a single object that can be shared by all person objects.
//
This
function
creates
a
person
object
var
person
=
function(fName,
lName,
dob)
{
var
firstName
=
fName
||
"";
var
lastName
=
lName
||
"";
var
dateOfBirth
=
dob;
return
{
firstName
:
firstName,
lastName
:
lastName,
dateOfBirth:
dob;
}
};
var
goon1
=
person("Neddie","Seagoon",
new
Date(1943,3,1));
var
goon2
=
person("Hercules","Grytpipe-­‐Thynne",
new
Date(1921,6,17));
var
goon3
=
person("Dennis","Bloodnok",
new
Date(1905,10,21));

29. © 2013 SAP AG. All rights reserved. 29
Defining Your Own Prototype Objects: 2/2
//
Create
a
Person
function
(notice
the
first
letter
of
the
name
has
been
captialized!)
var
Person
=
function(fName,
lName,
DoB)
{
this.firstName
=
fName
||
"";
this.lastName
=
lName
||
"";
this.dateOfBirth
=
DoB;
};
Now we'll make some subtle changes:
1. For functions that make use of a prototype, the convention is to capitalize the first letter of the
function name. Notice also - the return statement is not used. Don’t add one yourself!

30. © 2013 SAP AG. All rights reserved. 30
Defining Your Own Prototype Objects: 2/2
//
Create
a
Person
function
(notice
the
first
letter
of
the
name
has
been
captialized!)
var
Person
=
function(fName,
lName,
DoB)
{
this.firstName
=
fName
||
"";
this.lastName
=
lName
||
"";
this.dateOfBirth
=
DoB;
};
Now we'll make some subtle changes:
2. Use this instead of var because the execution context of this object will now be defined by the
object is assigned as the prototype, not the execution context of the calling function.

31. © 2013 SAP AG. All rights reserved. 31
Defining Your Own Prototype Objects: 2/2
//
Create
a
Person
function
(notice
the
first
letter
of
the
name
has
been
captialized!)
var
Person
=
function(fName,
lName,
DoB)
{
this.firstName
=
fName
||
"";
this.lastName
=
lName
||
"";
this.dateOfBirth
=
DoB;
};
//
Give
the
Person
function
a
prototype
property.
This
object
holds
the
default
properties
for
all
persons
Person.prototype
=
{
firstName
:
"",
lastName
:
"",
dateOfBirth:
null
};
Now we'll make some subtle changes:
3. Now assign an object to the prototype property of our Person function. This object now defines
the properties common to all invocations of the Person function.

32. © 2013 SAP AG. All rights reserved. 32
Defining Your Own Prototype Objects: 2/2
//
Create
a
Person
function
(notice
the
first
letter
of
the
name
has
been
captialized!)
var
Person
=
function(fName,
lName,
DoB)
{
this.firstName
=
fName
||
"";
this.lastName
=
lName
||
"";
this.dateOfBirth
=
DoB;
};
//
Give
the
Person
function
a
prototype
property.
This
object
holds
the
default
properties
for
all
persons
Person.prototype
=
{
firstName
:
"",
lastName
:
"",
dateOfBirth:
null
};
var
goon1
=
new
Person("Neddie","Seagoon",
new
Date(1943,3,1));
var
goon2
=
new
Person("Hercules","Grytpipe-­‐Thynne",
new
Date(1921,6,17));
var
goon3
=
new
Person("Dennis","Bloodnok",
new
Date(1905,10,21));
Now we'll make some subtle changes:
4. Finally, the Person function is called using the new keyword.

33. © 2013 SAP AG. All rights reserved. 33
JavaScript Constructor Functions
Any function invoked using the new keyword is known as a Constructor Function, and this causes the
function to be invoked in a different way:
1. If the constructor function has a prototype property, then it inherits all the properties defined in
this object.
If the constructor function does not have a prototype property, then it will inherit from
Object.prototype

34. © 2013 SAP AG. All rights reserved. 34
JavaScript Constructor Functions
Any function invoked using the new keyword is known as a Constructor Function, and this causes the
function to be invoked in a different way:
1. If the constructor function has a prototype property, then it inherits all the properties defined in
this object.
If the constructor function does not have a prototype property, then it will inherit from
Object.prototype
2. The execution context of the constructor function is bound to this. This is what allows the
constructor function to refer to properties defined in the prototype object via this.

35. © 2013 SAP AG. All rights reserved. 35
JavaScript Constructor Functions
Any function invoked using the new keyword is known as a Constructor Function, and this causes the
function to be invoked in a different way:
1. If the constructor function has a prototype property, then it inherits all the properties defined in
this object.
If the constructor function does not have a prototype property, then it will inherit from
Object.prototype
2. The execution context of the constructor function is bound to this. This is what allows the
constructor function to refer to properties defined in the prototype object via this.
3. If the return statement is not used, then the return value of the constructor function is always a
reference to the this object identified in step 2

36. © 2013 SAP AG. All rights reserved. 36
The new Operator and the Prototype Chain
In general, if function <ObjName> is invoked using the new operator, then the result is the creation of an object that
automatically inherits from <ObjName>.prototype.
If <ObjName>.prototype does not exist, then the object inherits from Object.prototype

37. © 2013 SAP AG. All rights reserved. 37
The new Operator and the Prototype Chain
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Built-in object
In general, if function <ObjName> is invoked using the new operator, then the result is the creation of an object that
automatically inherits from <ObjName>.prototype.
If <ObjName>.prototype does not exist, then the object inherits from Object.prototype

38. © 2013 SAP AG. All rights reserved. 38
Person.prototype
The new Operator and the Prototype Chain
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Prototype Object
Person.prototype
=
{
firstName
:
"",
lastName
:
"",
dateOfBirth
:
null
}
Properties
u firstName
u lastName
u dateOfBirth
u __proto__
In general, if function <ObjName> is invoked using the new operator, then the result is the creation of an object that
automatically inherits from <ObjName>.prototype.
If <ObjName>.prototype does not exist, then the object inherits from Object.prototype

39. © 2013 SAP AG. All rights reserved. 39
Person.prototype
someGuy
The new Operator and the Prototype Chain
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Object created by the constructor function when
invoked using the new operator
var
someGuy
=
new
Person("Harry",
"Hawk",
new
Date(76,08,03));
Properties
u firstName
u lastName
u dateOfBirth
u __proto__
Properties
u __proto__
In general, if function <ObjName> is invoked using the new operator, then the result is the creation of an object that
automatically inherits from <ObjName>.prototype.
If <ObjName>.prototype does not exist, then the object inherits from Object.prototype

40. © 2013 SAP AG. All rights reserved. 40
Person
Constructor Functions and the Prototype Chain 1/3
A potential source of confusion in JavaScript inheritance lies the fact that a constructor function is itself a
function object. Therefore, like any other object, has its own inheritance chain via its __proto__ property.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Since the constructor function is a regular
function object, it too has an inheritance chain
function
Person(fName,
lName,
DoB)
{
this.firstName
=
fName
||
"";
this.lastName
=
lName
||
"";
this.dateOfBirth
=
DoB;
}
Properties
u __proto__

41. © 2013 SAP AG. All rights reserved. 41
Person
Constructor Functions and the Prototype Chain 2/3
In addition to __proto__, all constructor functions have a second default property called prototype.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Properties
u __proto__
u prototype

42. © 2013 SAP AG. All rights reserved. 42
Person
Constructor Functions and the Prototype Chain 2/3
In addition to __proto__, all constructor functions have a second default property called prototype.
If a constructor function is invoked using the new operator, then the prototype property holds a reference to
the object prototype.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Properties
u __proto__
u prototype
Person.prototype
Properties
u firstName
u lastName
u dateOfBirth
u __proto__

43. © 2013 SAP AG. All rights reserved. 43
Person
Constructor Functions and the Prototype Chain 2/3
In addition to __proto__, all constructor functions have a second default property called prototype.
If a constructor function is invoked using the new operator, then the prototype property holds a reference to
the object prototype.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Properties
u __proto__
u prototype
Person.prototype
Properties
u firstName
u lastName
u dateOfBirth
u __proto__
So in the case of our Person constructor function,
by virtue of the fact that Person is just a regular
function object, its __proto__ property points to
Function.prototype.
However, as a constructor function, its job is to
create an instance of a new Person object, which in
turn, must inherit from its own prototype; therefore,
the prototype property points to
Person.prototype.

44. © 2013 SAP AG. All rights reserved. 44
Person
Constructor Functions and the Prototype Chain 3/3
To complete the picture here, we can finally add the object created when the new operator is used to invoke the
Person constructor function.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Properties
u __proto__
u prototype
Person.prototype
Properties
u firstName
u lastName
u dateOfBirth
u __proto__

45. © 2013 SAP AG. All rights reserved. 45
Person
Constructor Functions and the Prototype Chain 3/3
To complete the picture here, we can finally add the object created when the new operator is used to invoke the
Person constructor function.
Multiple objects of type Person can now be created that will all inherit from Person.prototype.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Properties
u __proto__
u prototype
Person.prototype
Properties
u firstName
u lastName
u dateOfBirth
u __proto__
someGuy
Properties
u __proto__
var
someGuy
=
new
Person(<a_guy_called_Harry>);

46. © 2013 SAP AG. All rights reserved. 46
Person
Constructor Functions and the Prototype Chain 3/3
To complete the picture here, we can finally add the object created when the new operator is used to invoke the
Person constructor function.
Multiple objects of type Person can now be created that will all inherit from Person.prototype.
Function.prototype
Methods
null
Object.prototype
Methods
u constructor()
u hasOwnProperty()
u isPrototypeOf()
u propertyIsEnumerable()
u toLocaleString()
u toString()
u toSource()
u unwatch()
u valueOf()
u watch()
Properties
u __proto__
Properties
u __proto__
u apply()
u bind()
u call()
u isGenerator()
u toString()
Properties
u __proto__
u prototype
Person.prototype
Properties
u firstName
u lastName
u dateOfBirth
u __proto__
someGuy
Properties
u __proto__
var
someGuy
=
new
Person(<a_guy_called_Harry>);
charlie
Properties
u __proto__
var
charlie
=
new
Person(<a_girl_called_Ally>);
etc…

47. © 2013 SAP AG. All rights reserved. 47
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of
other software vendors.
Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of
Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System
z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7,
POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize,
XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli,
Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the United States and other countries.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe
Systems Incorporated in the United States and other countries.
Oracle and Java are registered trademarks of Oracle and its affiliates.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems Inc.
HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C®, World Wide Web
Consortium, Massachusetts Institute of Technology.
Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri,
and Xcode are trademarks or registered trademarks of Apple Inc.
IOS is a registered trademark of Cisco Systems Inc.
RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry
Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered
trademarks of Research in Motion Limited.
© 2014 SAP AG. All rights reserved.
Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads,
Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice,
Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc.
INTERMEC is a registered trademark of Intermec Technologies Corporation.
Wi-Fi is a registered trademark of Wi-Fi Alliance.
Bluetooth is a registered trademark of Bluetooth SIG Inc.
Motorola is a registered trademark of Motorola Trademark Holdings LLC.
Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork,
SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects
is an SAP company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services
mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc.
Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG
in Germany and other countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of their respective companies. Data
contained in this document serves informational purposes only. National product specifications may vary.
The information in this document is proprietary to SAP. No part of this document may be reproduced, copied,
or transmitted in any form or for any purpose without the express prior written permission of SAP AG.

48. © 2013 SAP AG. All rights reserved. 48
© 2014 SAP AG. Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in
welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG nicht gestattet.
In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.
Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten
auch anderer Softwarehersteller enthalten.
Microsoft, Windows, Excel, Outlook, und PowerPoint sind eingetragene Marken der Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System
z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7,
POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize,
XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli,
Informix und Smarter Planet sind Marken oder eingetragene Marken der IBM Corporation.
Linux ist eine eingetragene Marke von Linus Torvalds in den USA und anderen Ländern.
Adobe, das Adobe-Logo, Acrobat, PostScript und Reader sind Marken oder eingetragene Marken von
Adobe Systems Incorporated in den USA und/oder anderen Ländern.
Oracle und Java sind eingetragene Marken von Oracle und/oder ihrer Tochtergesellschaften.
UNIX, X/Open, OSF/1 und Motif sind eingetragene Marken der Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame und MultiWin sind Marken oder
eingetragene Marken von Citrix Systems, Inc.
HTML, XML, XHTML und W3C sind Marken oder eingetragene Marken des W3C®, World Wide Web
Consortium, Massachusetts Institute of Technology.
Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri
und Xcode sind Marken oder eingetragene Marken der Apple Inc.
IOS ist eine eingetragene Marke von Cisco Systems Inc.
RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry
Storm, BlackBerry Storm2, BlackBerry PlayBook und BlackBerry App World sind Marken oder eingetragene
Marken von Research in Motion Limited.
Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads,
Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice,
Google Mail, Gmail, YouTube, Dalvik und Android sind Marken oder eingetragene Marken von Google Inc.
INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation.
Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance.
Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc.
Motorola ist eine eingetragene Marke von Motorola Trademark Holdings, LLC.
Computop ist eine eingetragene Marke der Computop Wirtschaftsinformatik GmbH.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork,
SAP HANA und weitere im Text erwähnte SAP-Produkte und -Dienstleistungen sowie die entsprechenden
Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und anderen Ländern.
Business Objects und das Business-Objects-Logo, BusinessObjects, Crystal Reports, Crystal Decisions,
Web Intelligence, Xcelsius und andere im Text erwähnte Business-Objects-Produkte und -Dienstleistungen
sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Business Objects Software Ltd.
Business Objects ist ein Unternehmen der SAP AG.
Sybase und Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere und weitere im Text erwähnte Sybase-
Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der
Sybase Inc. Sybase ist ein Unternehmen der SAP AG.
Crossgate, m@gic EDDY, B2B 360°, B2B 360° Services sind eingetragene Marken der Crossgate AG in
Deutschland und anderen Ländern. Crossgate ist ein Unternehmen der SAP AG.
Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen. Die Angaben im
Text sind unverbindlich und dienen lediglich zu Informationszwecken. Produkte können länderspezifische
Unterschiede aufweisen.
Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfältigung dieser
Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit
ausdrücklicher schriftlicher Genehmigung durch SAP AG gestattet.