Como JavaScript se usa ampliamente en el desarrollo web, en este artículo exploraremos algunos de los Orientado a objetos mecanismo apoyado por JavaScript para aprovecharlo al máximo. Algunas de las preguntas comunes de las entrevistas en JavaScript en OOPS incluyen: “¿Cómo se implementa la programación orientada a objetos en JavaScript? ¿En qué se diferencian de otros idiomas? ¿Puede implementar la herencia en JavaScript, etc.? “

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

  • Objeto
  • Clases
  • Encapsulamiento
  • Herencia

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

  1. Objeto– Un objeto es un único entidad que contiene propiedad y métodos. Por ejemplo, “coche” es un Objeto de la vida real, que tiene algunas características como color, tipo, modelo, caballos de fuerza y ​​realiza ciertas acciones como conducir. Las características de un Objeto se denominan Propiedad, en Programación Orientada a Objetos y las acciones se denominan métodos. Un objeto es un ejemplo de una clase. Los objetos están en todas partes en JavaScript, casi todos los elementos son un objeto, ya sea una función, matrices y cadenas.
    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 formas en JavaScript:
    • Usando un Objeto literal

      // Definición de objeto
      dejar person = {
      first_name: ‘Mukul’,
      last_name: ‘Latiyan’,

      //método
      getFunction: function () {
      return (`El nombre de la persona es
      $ {person.first_name} $ {person.last_name} `)
      },
      // objeto dentro del objeto
      número de teléfono : {
      móvil: ‘12345 ′,
      teléfono fijo: ‘6789 ′
      }
      }
      console.log (person.getFunction ());
      console.log (person.phone_number.landline);

      Producción:

      / li>

    • Usando un Constructor de objetos:

      function person(first_name,last_name){

         this.first_name = first_name;

         this.last_name = last_name;

      }

      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:

    • Utilizando Método Object.create (): El método Object.create () crea un nuevo objeto, utilizando un objeto existente como prototipo del objeto recién creado.
      // Ejemplo de Object.create () a
      // objeto simple con algunas propiedades
      codificador const = {
      isStudying: false,
      printIntroduction: function () {
      console.log (`Mi nombre es $ {this.name}. ¿Soy
      estudiando ?: $ {this.isStudying} .`)
      }
      }
      // Método Object.create ()
      const me = Object.create (codificador);

      // “nombre” es una propiedad establecida en “mí”, pero no en “codificador”
      me.name = ‘Mukul’;

      // Las propiedades heredadas se pueden sobrescribir
      me.isStudying = ‘Verdadero’;

      me.printIntroduction ();

      Producción:

  2. Clases– Las clases son Plano de un objeto. Una clase puede tener muchos Objetos, porque la clase es una modelo mientras que el objeto es 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, existe no hay clases en JavaScript solo tenemos Objeto. 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 la función de constructor y luego lo 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áctico sobre la herencia existente basada en prototipos de JavaScript. La sintaxis de la clase no está introduciendo un nuevo modelo de herencia orientado a objetos en JavaScript. Las clases de JavaScript proporcionan una sintaxis mucho más simple y clara para crear objetos y lidiar con la herencia.
    Red de desarrolladores de Mozilla

    Ejemplo:
    Usemos las clases de ES6, luego analizaremos la forma tradicional de definir Object y las simularemos como clases.

    // Definición de clase usando es6
    class Vehicle {
    constructor (nombre, fabricante, motor) {
    this.name = nombre;
    this.maker = maker;
    this.engine = motor;
    }
    Obtén detalles(){
    return (`El nombre de la bicicleta es $ {this.name} .`)
    }
    }
    // Hacer objeto con la ayuda del 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.

    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 sencillo definir y reutilizar un objeto en ES6. Por lo tanto, estaríamos usando ES6 en todos nuestros ejemplos.

  3. Encapsulamiento – El proceso de envoltura de propiedad y función Dentro de un Unidad singular se conoce como encapsulación.
    Entendamos la encapsulación con un ejemplo.
    // ejemplo de encapsulación
    persona de clase {
    constructor (nombre, id) {
    this.name = nombre;
    this.id = id;
    }
    add_Address (añadir) {
    this.add = agregar;
    }
    Obtén detalles(){
    console.log (`El nombre es $ {this.name}, la dirección es: $ {this.add}`);
    }
    }

    let person1 = new person (‘Mukul’, 21);
    person1.add_Address (‘Delhi’);
    person1.getDetails ();

    Producción:

    En el ejemplo anterior simplemente creamos un persona Object usando el constructor y la propiedad Initialize it y use sus funciones, no nos preocupamos por los detalles de implementación. Estamos trabajando con una interfaz de Objetos sin considerar los detalles de implementación.
    A veces, la encapsulación se refiere a ocultación de datos o abstracción de datos lo que significa representar características esenciales ocultando los detalles del fondo. La mayoría de los lenguajes de programación orientada a objetos proporcionan modificadores de acceso para restringir el alcance de una variable, pero no existen tales modificadores de acceso en JavaScript, pero existen ciertas formas en las que podemos restringir el alcance de la variable dentro de la Clase / Objeto.
    Ejemplo:

    // Ejemplo de abstracción
    function person (fname, lname) {
    let firstname = fname;
    let lastname = lname;

    let getDetails_noaccess = function () {
    return (`El nombre es: $ {nombre} Apellido
    el nombre es: $ {apellido} `);
    }

    this.getDetails_access = function () {
    return (`El nombre es: $ {firstname}, Last
    el nombre es: $ {apellido} `);
    }
    }
    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 vuelve indefinir mientras que su es un método al que podemos acceder desde el persona objeto(person1.getDetails_access ()), cambiando la forma de definir 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 de programación orientada a objetos donde las clases heredan clases, el objeto JavaScript hereda el objeto, es decir, ciertas características (propiedad y métodos) de un objeto pueden ser reutilizadas por otros objetos.
    Entendamos la herencia con el ejemplo:

    // Ejemplo de herencia
    persona de clase {
    constructor (nombre) {
    this.name = nombre;
    }
    // método para devolver la cadena
    Encadenar(){
    return (`Nombre de la persona: $ {this.name}`);
    }
    }
    el estudiante de la clase extiende la persona {
    constructor (nombre, id) {
    // super palabra clave para llamar al constructor de la clase anterior
    super (nombre);
    this.id = id;
    }
    Encadenar(){
    return (`$ {super.toString ()}, ID de estudiante: $ {this.id}`);
    }
    }
    let student1 = new student (‘Mukul’, 22);
    console.log (student1.toString ());

    Producción:

    En el ejemplo anterior definimos un Persona Objeto con cierta propiedad y método y luego heredar la Persona Objeto en el Estudiante Objeto y use todas las propiedades y métodos de la persona Objeto, así como definir ciertas propiedades y métodos para Estudiante.
    Nota: El objeto Person y Student tienen el mismo método, es decir, toString (), esto se llama como Anulación de método. La anulación de método permite que el método de 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 características 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”

Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema discutido anteriormente.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *