Javascript Object - Accessors, Constructor and Prototype (Examples)

https://webdevfix.com/accessors-constructor-and-prototype-of-javascript-object

Tech:

Javascript

Since:

2 years ago

Views:

In Javascript Object is a entity that can hold properties and methods. Basically, it is a collection of key-value pairs. Here is a reference for the accessors, constructor and prototype of Javascript Object.

Object

In Javascript, an object is a collection of key-value pairs. The key is the name of the property and the value is the value of the property. The value can be a primitive value or another object.

var obj1 = {
  111 : "aaa",
  222 : "bbb",
  333 : "ccc",
  444 : function() {
      return this.111 + this.222;
  }
};


// Booleans can be objects (if defined with the new keyword)
// Numbers can be objects (if defined with the new keyword)
// Strings can be objects (if defined with the new keyword)
// Dates are always objects
// Maths are always objects
// Regular expressions are always objects
// Arrays are always objects
// Functions are always objects
// Objects are always objects

Accessors

The accessors are the properties that can be defined with the get and set keywords. The get keyword is used to define the getter which is a function that can be used to get the value of the property. The set keyword is used to define the setter which is a function that can be used to set the value of the property.

// GETTER
var obj = {
  111 : "aaa",
  222 : "bbb",
  333 : "ccc",
  get TEST() {
    return this.111;
  }
};

obj.TEST // aaa


// SETTER
var obj = {
  111 : "aaa",
  222 : "bbb",
  333 : "ccc",
  set TEST(val) {
    this.111 = val;
  }
};

var x = "xxx";
obj.TEST = x;

Constructor

The constructor is a function that is used to create an object. It is useful when you want to create a new object with the same properties as the object you want to create.

function obj_constr(val_1, val_2) {
  this.111 = val_1;
  this.222 = val_2;
  this.TEST = function() {
    return this.111+this.222;
  }
}

var x = obj_constr('aaa','bbb');
//  x = {
//   111 : "aaa",
//   222 : "bbb",
//   TEST : function() {
//     return this.111+this.222;
//   }
//  }

// BUILT IN CONSTRUCTORS
var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

// RECOMMENDED
var x1 = {};            // new object
var x2 = "";            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = /()/           // new regexp object
var x7 = function(){};  // new function object

Prototype

The prototype is a property of the constructor function that is used to define the prototype of the object. It is used to define the properties and methods of the object.

function obj_constr(val_1, val_2) {
  this.111 = val_1;
  this.222 = val_2;
  this.TEST = function() {
    return this.111+this.222;
  }
}
var x = obj_constr('aaa','bbb');
var y = obj_constr('aaa','bbb');

obj_constr.prototype.333 = "ccc";
obj_constr.prototype.TEST2 = function() {
  return this.111+this.222;
};

x.333
// ccc

X.TEST2
// aaa+bbb

y.333
// ccc

y.TEST2
// aaa+bbb

Javascript Number - 10 Methods and 5 Properties (Reference)

2 years ago

Javascript Statements - 16 Statements (Reference)

2 years ago

Javascript matchMedia - 2 Methods and 2 Properties (Reference)

2 years ago

Javascript Object - 21 Methods (Reference)

1 year ago

Javascript Document - 24 Methods (Reference)

1 year ago