JavaScript for ABAP Programmers - 6/7 Inheritance

1,419 views

Published on

JavaScript for ABAP Programmers
Chapter 6 - Inheritance

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,419
On SlideShare
0
From Embeds
0
Number of Embeds
408
Actions
Shares
0
Downloads
89
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript for ABAP Programmers - 6/7 Inheritance

  1. 1. JavaScript for ABAP Programmers Referential Inheritance Chris Whealy / The RIG
  2. 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. 3. Object Orientation and Inheritance
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Understanding the Prototype Chain
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Defining Your Own Prototypes
  27. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×