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