Introducción a la Programación Orientada a Objetos en JavaScript

Dado que JavaScript se usa ampliamente en el desarrollo web, en este artículo exploraremos algunos de los mecanismos orientados a objetos admitidos por JavaScript para aprovecharlo al máximo. Algunas de las preguntas comunes de las entrevistas en JavaScript sobre OOPS incluyen: “¿Cómo se implementa la programación orientada a objetos en JavaScript? ¿En qué se diferencia de otros idiomas? ¿Puedes implementar la herencia en JavaScript?” y así sucesivamente…

Hay ciertas características o mecanismos que hacen que un lenguaje esté orientado a objetos como: 

• Objeto
• Clases
• Encapsulación
• Herencia

Profundicemos en los detalles de cada uno de ellos y veamos cómo se implementan en JavaScript.

1. Objeto : un objeto es una entidad única que contiene propiedades y métodos . Por ejemplo, “coche” es un Objeto de la vida real, que tiene algunas características como color, tipo, modelo, potencia y realiza ciertas acciones como conducir. Las características de un Objeto se denominan Propiedades en Programación Orientada a Objetos y las acciones se denominan métodos. Un objeto es una instancia de una clase. Los objetos están en todas partes en JavaScript, casi todos los elementos son un objeto, ya sea una función, una array o una string. 

Nota: Un Método en javascript es una propiedad de un objeto cuyo valor es una función. 

El objeto se puede crear de dos maneras en JavaScript: 

• Uso de un objeto literal 

//Defining object
let person = {
    first_name:'Mukul',
    last_name: 'Latiyan',
 
    //method
    getFunction : function(){
        return (`The name of the person is
          ${person.first_name} ${person.last_name}`)
    },
    //object within object
    phone_number : {
        mobile:'12345',
        landline:'6789'
    }
}
console.log(person.getFunction());
console.log(person.phone_number.landline);

Producción: 

• Usando un constructor de objetos: 

//using a constructor
function person(first_name,last_name){
   this.first_name = first_name;
   this.last_name = last_name;
}
//creating new instances of person object
let person1 = new person('Mukul','Latiyan');
let person2 = new person('Rahul','Avasthi');
 
console.log(person1.first_name);
console.log(`${person2.first_name} ${person2.last_name}`);

Producción: 

• Usando el método Object.create(): El método Object.create() crea un nuevo objeto, usando un objeto existente como prototipo del objeto recién creado. 

// Object.create() example a
// simple object with some properties
const coder = {
    isStudying : false,
    printIntroduction : function(){
        console.log(`My name is ${this.name}. Am I
          studying?: ${this.isStudying}.`)
    }
}
// Object.create() method
const me = Object.create(coder);
 
// "name" is a property set on "me", but not on "coder"
me.name = 'Mukul';
 
// Inherited properties can be overwritten
me.isStudying = true;
 
me.printIntroduction();

Producción: 

2. Clases : las clases son el modelo de un objeto. Una clase puede tener muchos Objetos porque la clase es una plantilla , mientras que los Objetos son instancias de la clase o la implementación concreta. 
Antes de continuar con la implementación, debemos saber que, a diferencia de otros lenguajes orientados a objetos, no hay clases en JavaScript , solo tenemos objetos. Para ser más precisos, JavaScript es un lenguaje orientado a objetos basado en prototipos, lo que significa que no tiene clases, sino que define comportamientos usando una función constructora y luego los reutiliza usando el prototipo. 

Nota: Incluso las clases proporcionadas por ECMA2015 son objetos.

Las clases de JavaScript, introducidas en ECMAScript 2015, son principalmente azúcar sintáctica sobre la herencia basada en prototipos existente de JavaScript. La sintaxis de la clase no está introduciendo un nuevo modelo de herencia orientado a objetos para JavaScript. Las clases de JavaScript proporcionan una sintaxis mucho más simple y clara para crear objetos y manejar la herencia. 
– Red de desarrolladores de Mozilla

Ejemplo: 
usemos clases de ES6, luego veremos la forma tradicional de definir un objeto y simularlos como clases.

// Defining class using es6
class Vehicle {
  constructor(name, maker, engine) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
  getDetails(){
      return (`The name of the bike is ${this.name}.`)
  }
}
// Making object with the help of the constructor
let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');
 
console.log(bike1.name);    // Hayabusa
console.log(bike2.maker);   // Kawasaki
console.log(bike1.getDetails());

Producción:

Camino Tradicional.

// Defining class in a Traditional Way.
function Vehicle(name,maker,engine){
    this.name = name,
    this.maker = maker,
    this.engine = engine
};
 
Vehicle.prototype.getDetails = function(){
    console.log('The name of the bike is '+ this.name);
}
 
let bike1 = new Vehicle('Hayabusa','Suzuki','1340cc');
let bike2 = new Vehicle('Ninja','Kawasaki','998cc');
 
console.log(bike1.name);
console.log(bike2.maker);
console.log(bike1.getDetails());

Producción: 

Como se ve en el ejemplo anterior, es mucho más simple definir y reutilizar objetos en ES6. Por lo tanto, estaríamos usando ES6 en todos nuestros ejemplos.

3. Encapsulación : el proceso de encapsular propiedades y funciones dentro de una sola unidad se conoce como encapsulación. 
Entendamos la encapsulación con un ejemplo.

//encapsulation example
class person{
    constructor(name,id){
        this.name = name;
        this.id = id;
    }
    add_Address(add){
        this.add = add;
    }
    getDetails(){
        console.log(`Name is ${this.name},Address is: ${this.add}`);
    }
}
 
let person1 = new person('Mukul',21);
person1.add_Address('Delhi');
person1.getDetails();

Producción: 

En el ejemplo anterior, simplemente creamos un objeto de persona usando el constructor e inicializamos sus propiedades y usamos sus funciones. No nos molestan los detalles de implementación. Estamos trabajando con la interfaz de un Objeto sin considerar los detalles de implementación. 
A veces, la encapsulación se refiere a la ocultación de datos o la abstracción de datos, lo que significa representar características esenciales que ocultan los detalles de fondo. La mayoría de los lenguajes OOP proporcionan modificadores de acceso para restringir el alcance de una variable, pero no existen tales modificadores de acceso en JavaScript, pero hay ciertas formas en las que podemos restringir el alcance de las variables dentro de la Clase/Objeto. 

Ejemplo: 

// Abstraction example
function person(fname,lname){
    let firstname = fname;
    let lastname = lname;
 
    let getDetails_noaccess = function(){
        return (`First name is: ${firstname} Last
            name is: ${lastname}`);
    }
 
    this.getDetails_access = function(){
        return (`First name is: ${firstname}, Last
            name is: ${lastname}`);
    }
}
let person1 = new person('Mukul','Latiyan');
console.log(person1.firstname);
console.log(person1.getDetails_noaccess);
console.log(person1.getDetails_access());

Producción: 

En el ejemplo anterior, intentamos acceder a alguna propiedad ( person1.firstname ) y funciones ( person1.getDetails_noaccess ), pero devuelve indefinido mientras que es un método al que podemos acceder desde el objeto persona ( person1.getDetails_access() ). Al cambiar la forma en que definimos una función, podemos restringir su alcance.

4. Herencia : es un concepto en el que algunas propiedades y métodos de un Objeto están siendo utilizados por otro Objeto. A diferencia de la mayoría de los lenguajes OOP donde las clases heredan clases, los Objetos JavaScript heredan Objetos, es decir, ciertas características (propiedades y métodos) de un objeto pueden ser reutilizadas por otros Objetos. 

Entendamos la herencia con un ejemplo: 

//Inheritance example
class person{
    constructor(name){
        this.name = name;
    }
    //method to return the string
    toString(){
        return (`Name of person: ${this.name}`);
    }
}
class student extends person{
    constructor(name,id){
        //super keyword for calling the above class constructor
        super(name);
        this.id = id;
    }
    toString(){
        return (`${super.toString()},Student ID: ${this.id}`);
    }
}
let student1 = new student('Mukul',22);
console.log(student1.toString());

Producción: 

En el ejemplo anterior, definimos un Objeto de persona con ciertas propiedades y métodos y luego heredamos el Objeto de persona en el Objeto de estudiante y usamos todas las propiedades y métodos del Objeto de persona, así como también definimos ciertas propiedades y métodos para el Objeto  de estudiante .

Nota: El objeto Persona y Estudiante tienen el mismo método (es decir, toString()), esto se denomina Anulación de método . La anulación de métodos permite que un método en una clase secundaria tenga el mismo nombre y firma de método que el de una clase principal. 
En el código anterior, la palabra clave super se usa para referirse a la variable de instancia de la clase principal inmediata. 

En este artículo, presentamos las funciones orientadas a objetos en JavaScript, hay un libro completo que explica la programación orientada a objetos en JavaScript con gran detalle, «JavaScript orientado a objetos por Stoyan Stefanov». 
Este artículo es una contribución de Sumit Ghosh . Si te gusta GeeksforGeeks y te gustaría contribuir, también puedes escribir un artículo usando write.geeksforgeeks.org o enviar tu artículo por correo a review-team@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.
Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.

JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .