JavaScript for ABAP Programmers Referential Inheritance Chris Whealy / The RIG
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
Object Orientation and Inheritance
© 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.
© 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”
© 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
© 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”
© 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
© 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.
© 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.
© 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.
© 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.
© 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.
Understanding the Prototype Chain
© 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.
© 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.
© 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.
© 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__
© 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__
© 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__
© 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()
© 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()
© 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__
© 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__
© 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__
Defining Your Own Prototypes
© 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; } };
© 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));
© 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!
© 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.
© 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.
© 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.
© 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
© 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.
© 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
© 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
© 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
© 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
© 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
© 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__
© 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
© 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__
© 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.
© 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__
© 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>);
© 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…
© 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.
© 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.