Cómo utilizar la programación orientada a objetos javascript

A menudo veo código JavaScript que es demasiado confuso para entenderlo, con atributos y métodos por todas partes, o bucles dentro de bucles. Pero si usa la orientación a objetos, el código se puede aclarar muy bien y es más fácil de entender y modificar. Si no desea que solo Dios entienda su código, considere utilizar el patrón orientado a objetos.

Texto de traducción:

Hay propiedades y métodos en todas partes, y el código es extremadamente difícil de entender. Dios mío, programador mío, ¿qué estás haciendo? ¡Eche un vistazo más de cerca a esta guía y escribamos juntos un elegante código JavaScript orientado a objetos!

Como desarrollador, poder escribir código elegante es crucial para tu carrera. Con el desarrollo de tecnologías como Node.js, incluso puedes usar JavaScript en el lado del servidor. Asimismo, puede utilizar JavaScript para controlar el almacenamiento de datos persistentes de MongoDB.

Etiqueta de texto

La etiqueta de texto es solo una forma de crear objetos en JavaScript. Por supuesto, definitivamente hay más que esto, pero es tu primera opción cuando solo planeas crear. un método de instancia de objeto.

var bill = {};

El código anterior no es práctico, es solo un objeto vacío. A continuación agregamos dinámicamente algunas propiedades y métodos a este objeto.

bill.name = "Bill E Goat"; bill.sound = function() { console.log( 'bahhh!' }; , Y se le asigna el valor "Bill E Goat". No necesitamos crear un objeto vacío primero, pero podemos escribir todo el código directamente entre paréntesis.

var bill = { name: "Bill E Goat", sonido: function() { console.log( '¡bahhh!' }}; ? Acceder a sus propiedades y métodos es tan fácil y natural como respirar.

bill.name; // "Bill E Goat" bill.sound(); // "bahhh"

Si el nombre del atributo no es un identificador legal, también podemos hacerlo. this Para acceder a él:

bill['name']; // "Bill E Goat"

Nota: agregué paréntesis después del método al llamarlo. Ahora, reescribamos el método de sonido actual y agreguemos un parámetro.

bill.sound = function(ruido) { console.log(ruido }; bill.sound("brrr!"); // "brrr!" p>Genial, pasamos el parámetro y accedemos a él en la definición del método. A continuación, agregue un nuevo método al objeto para acceder a la propiedad del nombre.

bill.sayName = function() { console.log( "Hola " + this.name }; bill.sayName() // "Hola Bill E Cabra"

Podemos acceder a propiedades dentro de un método usando this.propertyName (en este caso this.name).

bill.sayName; // función

¿Qué está pasando? Acceder al método sayName devuelve una definición de método. Ahora profundicemos un poco más.

var sound = bill.sound; sound('moo!'); // "moo!"

Ahora hemos designado el método de sonido como una función local y podemos llamarlo. función y pasar parámetros. ¿Qué crees que pasará cuando copie el billete? (analogía con la oveja clonada Dolly)

var sally = bill; sally.name; // "Bill E Goat", pero su nombre es Sallysally.name = "sally.name"; Sally", mejor bill.name; // "Sally", el problema ha pasado a bill nuevamente

En el ejemplo anterior, creamos una nueva variable sally y la hicimos igual que bill, por lo que bill y sally hará referencia al mismo objeto en la memoria. En este momento, si cambias una pieza, cambiarán al mismo tiempo. Mire el siguiente código nuevamente:

bill.name = "Bill E Goat"; bill.sayName(); // "Hola Bill E Goat"; función Hasta ahora todo va bien sayName(); // "Hola", ¿por qué el nombre de Bill ya no se muestra aquí?

El nombre de Bill es una variable de instancia local, solo disponible para Bill. Cuando el método sayName se crea como una variable global, cuando encuentra una declaración this.name, busca el valor del nombre globalmente. El único problema es que el nombre aún no se ha definido. Ahora definamos el nombre globalmente y veamos qué sucede:

var name = "Bearded Octo"; sayName() // "Hello Bearded Octo"

Aquí estamos La variable de nombre es definido en el alcance global y asignado el valor "Octo barbudo". Cuando llamamos al método sayHello, busca el nombre de la variable en el ámbito global y finalmente obtiene el valor "Bearded Octo". ¿Por qué no creamos una "clase" diferente para estos objetos?

Constructor

Constructor es otra forma de escribir código JavaScript orientado a objetos cuando necesita inicializar las propiedades y métodos de un objeto, o necesita crear múltiples propiedades y métodos con. instancia diferente, será su mejor opción. De manera similar, comenzamos creando un objeto vacío:

function Game() {};

Este objeto incluye sus propias propiedades. Incluso puedes pasar las propiedades al crear el objeto. y luego modificarlo nuevamente.

var zelda = nuevo juego(); var smb = nuevo juego(); zelda.title = "Leyenda de Zelda"; smb.title = "Super Mario Brothers"; Legend of Zelda" smb.title; // "Super Mario Brothers"

¡Ahora este objeto tiene su propio método! Incluso podemos pasar propiedades al crear un nuevo objeto y modificarlas más tarde.

función Juego(título) { this.title = tipo de título !== 'indefinido' ? título : "" }; // "Leyenda de Zelda" zelda.title = "Ocarina of Time"; zelda.title; // "Ocarina of Time" var en blanco = nuevo juego(); // ""

Quizás no entendiste el contenido de la segunda línea. En realidad, utiliza una operación ternaria para evitar una sola línea if else. Tiene el mismo significado que la declaración estándar if else a continuación.

if (tipo de título! == 'indefinido') { this.title = título } else { this.title = "" } // Es lo mismo que this.title = tipo de título! = = 'undefinido' ? title : "";

Si la variable de título se pasa cuando se crea el objeto, a la variable de instancia de título se le asignará el valor de título. Si no se pasa ningún valor, el título se inicializará con el valor predeterminado "". También podemos crear un método para acceder a esta propiedad:

zelda.loveTitle = function() { console.log( "Me encanta " + this.title }; "Me encanta Ocarina of Time"

Eso está bien, pero podemos hacerlo mejor. Podemos agregar un método a la clase Game para que todas las instancias de la clase Game puedan usar este método.

Game.prototype.heartIt = function() { console.log( "Me encanta " + this.title }; zelda.heartIt(); // "Me encanta Ocarina of Time" smb. heartIt(); // "Me encantan los hermanos Super Mario"