Dominar los enlaces de JavaScript: comprensión y uso de esta potente función | Por Manish Salunke | enero, 2023
Convertirse en un experto en vinculación de JavaScript: una guía paso a paso
Puedes usarlo Enlaces JavaScript creando variables y métodos privados, conservando el estado del objeto en múltiples llamadas a funciones y exponiendo las API públicas mientras se mantienen privados los detalles de implementación. , es una característica fuerte del lenguaje. Comprender cómo funcionan los enlaces y cómo usarlos de manera efectiva es una habilidad esencial para cualquier desarrollador de JavaScript. En este blog, profundizamos en el mundo de los cierres, aprendemos cómo funcionan, por qué son útiles y cómo usarlos para escribir código más conservador y eficiente.
Primero, veamos la estructura básica de un Cierre de JavaScript y cómo se crean los cierres. Luego, pase a temas más avanzados, como la creación de variables y métodos privados, el estado persistente y la creación de una API pública. Proporcionamos ejemplos y comentarios a lo largo del camino para ayudarlo a comprender mejor esta poderosa característica.
Ya sea que sea un desarrollador de JavaScript principiante o experimentado, este blog proporciona el conocimiento y las habilidades que necesita para dominar los cierres y llevar su programación al siguiente nivel. Ahora probemos el poder del enlace de JavaScript.
¿Quién soy?
Mi nombre Manish Salunketengo 12 años de experiencia Desarrollador JavaScript, y tengo un conocimiento profundo del idioma y su ecosistema. Familiaridad con varios patrones de diseño de JavaScript y mejores prácticas y la capacidad de escribir código limpio, fácil de mantener y eficiente. Además, al estar familiarizado con varios marcos y bibliotecas de JavaScript, puedo reaccionar rápidamente a las nuevas tecnologías. Tengo experiencia trabajando con JavaScript tanto front-end como back-end, así como integración con otros lenguajes y tecnologías. También tiene experiencia probando y depurando código JavaScript, por lo que puede detectar y resolver problemas de manera efectiva.
Vamos a empezar Cierre de JavaScript.
Una función de cierre de JavaScript que tiene acceso a las variables en el ámbito principal incluso después de que la función principal haya regresado. Los enlaces se crean cuando una función interna hace referencia a variables desde su función contenedora (externa).
Ejemplo de enlace de JavaScript:
function outerFunction(x) {
let y = x + 89;function innerFunction() {
console.log(y);
}
return innerFunction;
}
let closure = outerFunction(1);
closure(); // logs 90
En este ejemplo de cierre de JavaScript, la función interna puede acceder a la variable y de la función externa incluso después de que regresa la función externa.
Los cierres de JavaScript se pueden usar para cosas como crear variables y métodos privados, mantener el estado del objeto en múltiples llamadas a funciones y exponer las API públicas mientras se mantienen privados los detalles de implementación.
Los ejemplos de uso común de los cierres de JavaScript incluyen la creación de variables y métodos privados. Declarar una variable dentro de una función y devolver un cierre que pueda acceder efectivamente a esa variable crea una variable privada a la que solo se puede acceder a través del cierre.
Esto es útil para preservar el estado del objeto y evitar que el código externo cambie el estado interno del objeto.
Otro caso de uso para los cierres de JavaScript es preservar el estado de un objeto en varias llamadas a funciones.
Por ejemplo, considere el código de cierre de JavaScript como este:
function createCounter() {
let count = 0;
return function() {
count++;
return count;
}
}let counter = createCounter();
console.log(counter()); // logs 1
console.log(counter()); // logs 2
Aquí, la función createCounter devuelve un enlace que incrementa y devuelve una variable de conteo cuando se llama.
El enlace tiene acceso a la variable de conteo incluso después de que la función createCounter regrese, por lo que el conteo se conserva en varias llamadas a la función.
Los cierres de JavaScript también se pueden usar para exponer API públicas mientras se mantienen privados los detalles de implementación.
Por ejemplo, considere el siguiente código:
function createPerson(name) {
let age = 0;
return {
getName() {
return name;
},
setAge(newAge) {
age = newAge;
},
getAge() {
return age;
}
}
}let person = createPerson("Manish");
console.log(person.getName()); // logs "Manish"
person.setAge(35);
console.log(person.getAge()); // logs 35
aquí está función crear persona devuelve un objeto con tres métodos: getNombre, establecerEdad y obtenerEdad.
La variable de nombre se pasa como argumento a la función y la variable de edad se declara dentro de la función, pero se puede acceder a ambas a través de los métodos del objeto devuelto.
Esto le permite mantener privados los detalles de implementación mientras proporciona una API pública para la interacción de objetos.
Una función proporciona variables que están en el ámbito en el momento en que se define la función y el ámbito que ocupa la función.
Cuando se llama a una función, es el contexto de ejecución de la función misma.
De esa manera, puede acceder a las variables de la función principal después de que la función principal regrese.
Por ejemplo, considere el siguiente código:
function outerFunction(x) {
let y = x + 88;function innerFunction() {
console.log(y);
}
return innerFunction;
}
let closure = outerFunction(5);
closure(); // logs 93
En este ejemplo, la función interna puede acceder a la variable y desde la función externa incluso después de que regresa la función externa.
Porque innerFunction es un enlace que puede entrar en el ámbito de la función principal.
Además, definir una variable dentro de un cierre y devolver el cierre significa que el valor y el estado de la variable se pueden conservar después de que regrese la función que creó el cierre.
Los cierres también indican que el alcance del cierre es accesible no solo a la función interna, sino también a cualquier función definida dentro del cierre.
No hay una forma directa de decir “claro” en JavaScript. Pero hay varias formas de “limpiar” de manera efectiva el enlace de JavaScript rompiendo las referencias que lo mantienen vivo.
Es una forma establecer la variable de cierre en nulo o indefinido. Esto eliminará la referencia del cierre y permitirá que el recolector de basura recupere la memoria utilizada por las funciones y variables de cierre. Este método solo es válido si no hay referencia al cierre.
De otra manera eliminar todos los detectores de eventos que utiliza el enlace de javascript, también elimine todas las referencias al enlace. Esto rompe la referencia y permite que el recolector de elementos no utilizados recupere la memoria.
Además, si usa el operador de eliminación para eliminar una propiedad del objeto que contiene el enlace, la referencia se anula y el cierre es apto para recoger basura.
Finalmente, usa Objetos de mapa débil guardar mayúsculas le permite al recolector de basura limpiarlas cuando no haya más referencias a ellas.
También tenga en cuenta que en algunos casos no necesita limpiar las mayúsculas explícitamente, porque el recolector de basura de JavaScript limpia las mayúsculas obsoletas automáticamente.
Si experimenta muchos interbloqueos o problemas de memoria, debe considerar uno de los métodos anteriores para eliminar los interbloqueos y liberar memoria.
Recuerda que en la mayoría de los casos no necesitas limpiar las tapas, el recolector de basura se encargará de eso. Pero en algunos casos especiales es importante limpiar el paquete manualmente para evitar pérdidas de memoria y otros problemas.
Una de las principales ventajas de JavaScript Closures es la capacidad de crear variables y métodos privados. Conserva el estado del objeto y evita que el código externo cambie el estado interno del objeto.
Otra ventaja de los cierres de JavaScript es que le permite conservar el estado de un objeto en varias llamadas a funciones. Y es útil para crear funciones que deben contener estado, o funciones de fábrica que devuelven objetos con métodos que deben mantener estado.
Los cierres de JavaScript también se pueden usar para exponer API públicas mientras se mantienen privados los detalles de implementación.
Los cierres de JavaScript también se pueden usar para imitar el comportamiento de los lenguajes orientados a objetos. Los cierres de JavaScript le permiten definir métodos en objetos y hacer que su estado sea privado.
Aquí hay algunos ejemplos más de cierre de JavaScript:
Un cierre de JavaScript que contiene una variable privada:
function createCounter() {
let count = 89;
return {
increment() {
count++;
},
getCount() {
return count;
}
}
}let counter = createCounter();
counter.increment();
console.log(counter.getCount()); // logs 90
En el ejemplo de cierre de JavaScript anterior, la función createCounter devuelve un objeto con dos métodos: incrementar y obtenerCuenta. La variable de recuento se declara dentro de la función createCounter, pero se puede acceder a ella o modificarla en los métodos del objeto devuelto. Esto es posible porque el método es un cierre y puede acceder a variables en su ámbito principal.
Un cierre de JavaScript que conserva el estado en las llamadas multifunción:
function createAdder(x) {
return function(y) {
return x + y;
}
}let add5 = createAdder(50);
console.log(add5(20)); // logs 70
console.log(add5(40)); // logs 90
En el ejemplo anterior, createAdder devuelve un enlace que agrega su argumento cuando se llama a la función x pasado a la variable createAdder función. El cierre de JavaScript tiene acceso x y luego cambiando createAdder función devuelta, por lo tanto, el valor x almacenado a través de múltiples llamadas a funciones.
Un cierre de JavaScript que expone la API pública mientras mantiene privados los detalles de la aplicación:
function createPerson(name) {
let age = 0;
return {
getName() {
return name;
},
setAge(newAge) {
age = newAge;
},
getAge() {
return age;
}
}
}let person = createPerson("Manish");
console.log(person.getName()); // logs "Manish"
person.setAge(35);
console.log(person.getAge()); // logs 35
En el ejemplo anterior, createPerson función devuelve un objeto de tres maneras: getName, setAgey getAge. Él name la variable se pasa como argumento a la función y age La variable se declara dentro de la función, pero se puede acceder a ambas a través de métodos del objeto devuelto. Este cierre de JavaScript le permite mantener privados los detalles de implementación mientras proporciona una API pública para la interacción de objetos.
El resultado
El enlace de JavaScript es una característica poderosa que lo ayuda a escribir código más conservador y eficiente. Los cierres le permiten crear variables y métodos privados, almacenar el estado del objeto en múltiples llamadas a funciones y exponer las API públicas mientras mantiene la privacidad de los detalles de implementación. . Comprender cómo funcionan los enlaces y cómo usarlos de manera efectiva es una habilidad esencial para cualquier desarrollador de JavaScript.
Espero que este blog le brinde una comprensión más profunda de los cierres de JavaScript y cómo usarlos en sus proyectos.
Si este blog fue útil, continuaré escribiendo blogs informativos y útiles. Quiero compartir las últimas tendencias y mejores prácticas de todo el mundo. desarrollo JavaScript.
Si tiene alguna pregunta o comentario, no dude en publicarlos en la sección de comentarios a continuación. Estamos listos para ayudar y responder a sus preguntas si tiene algún problema.
gracias por leer. ¡Feliz codificación!
