Programación orientada a objetos en JavaScript-Explicada con ejemplos

let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false

console.log(names);

function DogObject(name, age) { let dog = Object.create(constructorObject); dog.name = name; dog.age = age; return dog;}let constructorObject = { speak: function(){ return "I am a dog" }}let bingo = DogObject("Bingo", 54);console.log(bingo);

function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);

john‘s __proto__ propiedad está dirigido a DogObject‘s prototipo. Pero recuerde, el prototipo de DogObjectes un objeto (par de clave y valor), por lo que también tiene una propiedad __proto__ que se refiere al protoype global Object.

Esta técnica se conoce como ENCADENAMIENTO DE PROTOTIPOS.

Tenga en cuenta que: el enfoque de palabra clave new hace lo mismo que Object.create(), pero solo lo hace más fácil, ya que hace algunas cosas automáticamente para usted.

Y así…

Cada objeto en Javascript tiene acceso al prototipo de Object por defecto. Si está configurado para usar otro prototipo, diga prototype2, entonces prototype2 también tendría acceso al prototipo del objeto de forma predeterminada, y así sucesivamente.

Combinación de objeto y función

Probablemente esté confundido por el hecho de que DogObjectes una función (function DogObject(){}) y tiene propiedades a las que se accede con una notación de puntos. Esto se conoce como una combinación de objetos de función.

Cuando se declaran funciones, por defecto se les dan muchas propiedades adjuntas a ellas. Recuerde que las funciones también son objetos en tipos de datos JavaScript.

Ahora, Class

JavaScript introdujo la palabra clave class en ECMAScript 2015. Hace que JavaScript parezca un lenguaje de programación orientada a objetos. Pero es solo azúcar sintática sobre la técnica de creación de prototipos existente. Continúa su creación de prototipos en el fondo, pero hace que el cuerpo exterior se vea como OOP. Ahora veremos cómo es posible.

El siguiente ejemplo es un uso general de un class en JavaScript:

class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);

Este es el resultado en la consola:

El __proto__ referencias Animals prototipo (que a su vez hace referencia el Object prototipo).

De esto, podemos ver que el constructor define las características principales, mientras que todo lo que está fuera del constructor (sing() y dance()) son las características adicionales (prototipos).

En segundo plano, utilizando el enfoque de palabras clave new, lo anterior se traduce en:

function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");

Subclase

Esta es una característica en OOP donde una clase hereda características de una clase padre, pero posee características adicionales que la madre no.

La idea aquí es, por ejemplo,, digamos que quieres crear una clase de gatos. En lugar de crear la clase desde cero, indicando de nuevo el nombre, la edad y la propiedad de la especie, heredaría esas propiedades de la clase animales padre.

Esta clase de gatos puede tener propiedades adicionales como el color de los bigotes.

Veamos cómo se hacen las subclases con class.

Aquí, necesitamos un padre del que hereda la subclase. Examinar el código siguiente:

class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");

Con lo anterior, podemos obtener los siguientes resultados:

console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"

Cuando usted se registra el contenido de clara en la consola, tenemos:

Notará que clara tiene una propiedad __proto__ que hace referencia al constructor Cats y obtiene acceso a la propiedad whiskers() método. Este __proto__ propiedad también dispone de un __proto__ propiedad que hace referencia el constructor Animals por lo tanto, obtener acceso a sing() y dance()name y age son propiedades que existen en cada objeto creado a partir de esto.

con el Object.create método de enfoque, lo anterior se traduce en:

function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"