javascript for abap programmers - 6/7 inheritance

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 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”







Person1 Instance Proper,es









Type references

Class based

Then, multiple instances of that class can be created through a

process called instantiation
















Type references

Class based Person

Proper,es firstName lastName hobbyList


Referential Any existing

object can act as a “prototype”
















Type references

Class based Person

Proper,es firstName lastName hobbyList


Neddie Proper,es



Eccles Proper,es



Bluebo<le Proper,es



Object references

Referential

All objects point to a prototype object by means

of a reference chain


Class-based Inheritance vs. Referential Inheritance 1/2

There is a key conceptual difference between class-based inheritance and referential (or prototypical) inheritance.













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.
















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.


Person Proper,es



Neddie Proper,es



Eccles Proper,es



Bluebo<le Proper,es



Object references

Referential


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”.



Person Proper,es



Neddie Proper,es



Eccles Proper,es



Bluebo<le Proper,es



Object references

Referential



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.



Person Proper,es



Neddie Proper,es



Eccles Proper,es



Bluebo<le Proper,es



Object references

Referential



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.


Understanding the Prototype Chain


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.



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





null Object.prototype


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__




// 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()




// 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





u  apply() u  bind() u  call() u  isGenerator() u  toString()



myObj


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', }





myObj


Methods


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; } }




u  toString()


myObj


Methods


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.




u  toString()


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__




// 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()





// 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()


Defining Your Own Prototypes


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; } };



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));



// 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!



// 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.



// 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.



// 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.


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.





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


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






Built-in object



Person.prototype





Prototype Object

Person.prototype = { firstName : "", lastName : "", dateOfBirth : null }

Properties u  firstName u  lastName u  dateOfBirth u  __proto__



Person.prototype someGuy





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  __proto__



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






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__


Person


In addition to __proto__, all constructor functions have a second default property called prototype.

Function.prototype

Methods






Properties

u  __proto__ u  prototype


Person


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






Properties


Person.prototype



Person


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






Properties


Person.prototype


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.


Person


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






Properties


Person.prototype



Person


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






Properties


Person.prototype


someGuy

Properties

u  __proto__

var someGuy = new Person(<a_guy_called_Harry>);


Person


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






Properties


Person.prototype


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…


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.


© 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.

javascript for abap programmers - 6/7 inheritance

Technology

prototype object

u rot13 properties u

inheritance object orientation

snip properties u length

inheritance oo

existing object

prototype chain

sap ag