Skip to main content

Mutator methods in Javascript

A Mutator method is used to control changes to a variable, which is formerly known as getter and setter methods. Several server side languages supports Mutator methods. Lets see how to achieve the same in JavaScript. There are some restrictions to achieve it in obsolete browsers. Lets see the different ways to implement mutator methods in JavaScript,

Method 1: Exposing our own getter and setter methods
function User(){
 this._name = '';
 this.getName = function(){
  return 'Hey ' + this._name;
 }
 this.setName = function(name){
  this._name = name
 }
}

var u1 = new User();
u1.setName('Ajai')
console.log(u1.getName()) //Hey Ajai


Method 2: Using ES5 Syntax (supported in all ES5 ready browsers)
//with Prototype
function User(){
 this._name = '';
}

User.prototype = {
 get name(){
  return 'Hey ' + this._name;
 },
 set name(name){
  this._name = name;
 }
}

var u1 = new User();
u1.name = "Ajai"
console.log(u1.name) //Hey Ajai

//without Prototype
var User ={
 _name: '',
 get name(){
  return 'Hey ' + this._name;
 },
 set name(name){
  this._name = name;
 }
}

User.name = "Ajai"
console.log(User.name) //Hey Ajai

var u1 = Object.create(User);
u1.name = "Ajai";
console.log(u1.name) //Hey Ajai


Method 3: Using Object.defineProperty & Object.defineProperties
Object.defineProperty is supported from IE8+ browsers. Sadly Object.defineProperty  in IE8 only accepts DOM Object.
//with Object.defineProperty
var User = {
 _name: ''
}
Object.defineProperty(User, 'name', {
  get: function() {
    return 'Hey ' + this._name;
  },
  set: function(name){
 this._name = name;
  }
});

User.name = 'Ajai';
console.log(User.name); //Hey Ajai

//or

var u1 = Object.create(User);
u1.name = "Ajai";
console.log(u1.name);


Object.defineProperties  is only supported in IE9+ browsers
var User = {
 _name: '',
 _age: 0
}
Object.defineProperties(User, {
  name: {
   get: function() {
  return 'Hey ' + this._name;
   },
   set: function(name){
  this._name = name;
   }
  },
  age: {
   get: function() {
  return 'Im ' + this._age;
   },
   set: function(age){
  this._age = age;
   }
  }
});

User.name = 'Ajai';
User.age = '27';
console.log(User.name); //Hey Ajai
console.log(User.age); // Im 27

In IE8 you can create a fake DOM Element to achieve the same, 
var User = document.createElement('anytag');
document.body.appendChild(User);
User._name = "";
Object.defineProperty(User, 'name', {
  get: function() {
    return 'Hey ' + this._name;
  },
  set: function(name){
 this._name = name;
  }
});

User.name = 'Ajai';
console.log(User.name); //Hey Ajai 


Non standard way :

This is deprecated from web standard. Please avoid this syntax in real-time applications.
var User = {
 _name: ''
};

User.__defineGetter__('name', function(){
 return 'Hey ' + this._name;
});
User.__defineSetter__('name', function(name){
 this._name = name;
});

User.name = 'Ajai';
console.log(User.name); //Hey Ajai


Popular posts from this blog

2D Reflection

#include <stdio.h> #include <stdlib.h> #include<graphics.h> #include<conio.h> #include<math.h> void draw2d(int,int [],int [],int,int); void main() { int gd=DETECT,gm; int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,fs; initgraph(&gd,&gm,""); printf("No of sides : "); scanf("%d",&fs); printf("Co-ordinates : "); for(i=0;i<fs;i++) { printf("(x%d,y%d)",i,i); scanf("%d%d",&x[i],&y[i]); } draw2d(fs,x,y,tx,ty); printf("translation (x,y) : "); scanf("%d%d",&tx,&ty); while(1) { clrscr(); cleardevice(); printf("1. X Reflection\n\n2. Y Reflection\n\n3. Exit"); draw2d(fs,x,y,0,0); switch(getche()) { case '1': for(i=0;i<fs;i++) { x1[i]=(tx+((x[i]-tx)*cos(M_PI))-((y[i]-ty)*sin(M_PI))); y1[i]=y[i]; } break; case '2': for(i=0;i<fs;i++) { x1[i]=x[i]; y1[i]=(tx+((y[i]-ty)*cos(M_PI))+((x[i]-tx)*sin(M_PI))); } break; case '3': close…

Simple Animation Using C

Here i have used fillpoly function to draw the object body and used fillellipse function to draw tier.
animation is done by looping through the objects x & y position until user hits a key. Keypress event is achived  by using kbhit function. Smoothness of animation is controlled by delay function.

Change the delay values to change the animation speed

Source:

#include<stdio.h> #include<conio.h> #include<graphics.h> #include<dos.h> void main() { int gd=DETECT,gm,i=-300,j; int poly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; int tpoly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; initgraph(&gd,&gm,""); getch(); while(!kbhit()) { for(j=0;j<16;j+=2) { poly[j]=tpoly[j]+i; } fillpoly(8,poly); setfillstyle(5,7); bar(275+i,60,295+i,85); setfillstyle(5,8); fillellipse(140+i,140,20,20); fillellipse(280+i,140,20,20); setfillstyle(1,0); fillellipse(140+i,140,10,10); fillellipse(280+i,140,10,10); setcolor(…

Personal Diary - A Mini Project Written in Turbo C With Graphical Interface

A Simple Personal Diary written in Turbo C with Graphical User Interface

Features,
Birthday ReminderNotesAddress Book The main part of the project is UI

'GUI.h' header file includes texbox, message-box and more custom graphical functions 
' Dairy.h' header file includes functionality of Personal Dairy
' Dairyload.c' includes loadingscreen, login screen, installation check etc
'Dairy.c' - execution stats here