Tuesday, July 14, 2015

ECMAScript 5 Object's Property Setters and Getters

Property Getters and Setters Methods

JavaScript objects have data properties and accessor properties:

  • a data property is a name and a value
  • an accessor property is a method or a pair of methods, known as getter and a setter

How JavaScript programs use accessor properties

  • if a program queries an accessor property the getter method is invoked
  • if a program sets an accessor property the setter method is invoked

How to define an accessor properties with object literals

  • two function declarations where the function keyword is replaced by get or set
  • the function names are the same as the property name
// definition of a read-write accessor property named 'propName'
var object = {   
   get propName() { /* getter method body */ },
   set propName(value) { /* setter method body */ }
};

How can an accessor property be one or two methods?

  • if an accessor property only has the getter method the property is read-only
  • if an accessor property only has the setter method the property is write-only
  • if an accessor property has both methods the property is read-write

Example: definition of age property as a read-only accessor property

  • JavaScript invokes getter and setter as methods of the object on which they are defined. As a consequence, within getter and setter you have to use this to refer to data properties
var umaThurman = {
   // birthDate is a data property
   birthDate: "April 29, 1970",
 
   // age is a read-only accessor property
   get age() { 
      var today = new Date();
      var birth = new Date(this.birthDate); 
      var ageInMillisec = today.getTime() - birth.getTime();
      return Math.floor( ageInMillisec / (1000*60*60*24*365) ); 
   }
};

// query the accessor property
console.log(umaThurman.age); // 45

Accessor properties are inherited like data properties

Example: heir object inherits the property age

var umaThurman = {
   // birthDate is a data property
   birthDate: "April 29, 1970",
    
   // age is a read-only accessor property
   get age() { 
      var today = new Date();
      var birth = new Date(this.birthDate); 
      var ageInMillisec = today.getTime() - birth.getTime();
      return Math.floor( ageInMillisec / (1000*60*60*24*365) ); 
   }
};
  
// mayaThurmanHawke is an heir object 
var mayaThurmanHawke = Object.create(umaThurman);
mayaThurmanHawke.birthDate = "July 8, 1998";
    
// the heir object inherits the accessor property age    
console.log(mayaThurmanHawke.age); // 17

Example: accessor property to generate serial numbers

The object serial generates strictly increasing serial numbers.

  • the accessor property number implements the serial number and is read and written by the JavaScript program
  • the data property $number is private and holds the current number. It is only manipulated within getter and setter.
var serial = {
   // data property
   $number: 0,

   // the getter method returns the current $number and increment it
   get number() { return this.$number++; },

   // the setter method sets the $number data property 
   set number(n) {
      if (n >= this.$number) 
         this.$number = n;
      else
         console.log("number can only be set to values bigger than "+this.$number);   
   }
};

// get the number
console.log(serial.number); // 0
console.log(serial.number); // 1

// set the number
serial.number=50;
console.log(serial.number); // 50

// try to set the number but argument is wrong
serial.number=10; // "number can only be set to values bigger than 51"

No comments :

Post a Comment