Recupere los conceptos básicos de JS: domine los secretos de los cierres y las cadenas de alcance para que su código sea más conciso y elegante

En JavaScript, los cierres y las cadenas de alcance son dos conceptos importantes que son fundamentales para comprender cómo funcionan las funciones en JavaScript e implementar características avanzadas. Este artículo presentará los conceptos de cierres y cadenas de alcance, cómo crear y utilizar cierres y cómo evitar las trampas y los errores comunes.

introducción

JavaScript es un lenguaje con características de programación funcional, en el que el cierre y la cadena de alcance son dos conceptos importantes. Para los desarrolladores que quieren entender JavaScript en profundidad, es necesario dominar los conceptos y el uso de cierres y cadenas de alcance. Este artículo presentará los conceptos básicos de cierres y cadenas de alcance, cómo crear y usar cierres, así como errores y trampas comunes, para que los desarrolladores puedan comprender mejor JavaScript.

1. ¿Qué es la cadena de alcance?

En JavaScript, cada función tiene su propio alcance. Un ámbito es la colección de variables, funciones y objetos a los que puede acceder una función. Dentro de una función, puede acceder a variables globales y variables en funciones externas. Una cadena de ámbito es una cadena de punteros a ámbitos que incluye el ámbito de la función actual y el ámbito de las funciones externas. Cuando se accede a una variable dentro de una función, el motor de JavaScript busca la variable en el orden de la cadena de alcance.

2. ¿Qué es un cierre?

Cierre significa que una función puede acceder a variables y funciones definidas en su función externa, incluso si la función externa ha regresado. Los cierres hacen esto capturando la cadena de alcance de su función envolvente. Cuando se define una función, crea un cierre que contiene el alcance de la función y la cadena de alcance. Cuando la función se ejecuta, utiliza las variables y funciones en su cierre.

3. Cómo crear un cierre

Los cierres se pueden crear definiendo funciones dentro de funciones. En el siguiente ejemplo, la función externa devuelve la función interna. Dado que la función interna se refiere a las variables de la función externa, la función interna forma un cierre y puede acceder a las variables de la función externa.

JavaScript

function outer() {
  var x = 10;
  function inner() {
    console.log(x);
  }
  return inner;
}
var fn = outer();
fn(); // 输出：10

En el ejemplo anterior, definimos una función externa () que contiene una variable x y una función interna (). La función exterior () devuelve la función interior (), que luego se almacena en la variable fn. Cuando llamamos a fn(), la función inner() usa la variable x en su cierre para generar 10.

4. Cómo utilizar los cierres

Los cierres se pueden utilizar para implementar muchas funciones avanzadas, como la ocultación de datos, la modularidad y la programación funcional. En el siguiente ejemplo, usamos un cierre para crear un contador que se puede usar para rastrear la cantidad de veces que se llama a una función:

JavaScript

function createCounter() {
  var count = 0;
  function counter() {
    count++;
    console.log(count);
  }
  return counter;
}
var c = createCounter();
c(); // 输出：1
c(); // 输出：2
c(); // 输出：3

En el ejemplo anterior, definimos una función createCounter() que contiene una variable de conteo y una función de contador(). Cada vez que se llama a la función counter(), incrementa la variable de conteo y genera su valor. Dado que la función contador() forma un cierre, puede acceder y modificar el valor de la variable de conteo, realizando así la función del contador.

Otro ejemplo de uso de cierres es implementar una función de ejecución retrasada. En el siguiente ejemplo, definimos una función de retraso () que devuelve una función que se ejecuta después de un período de tiempo específico:

JavaScript

function delay(fn, time) {
  return function() {
    setTimeout(fn, time);
  };
}
function sayHello() {
  console.log("Hello!");
}
var delayedHello = delay(sayHello, 1000);
delayedHello(); // 1 秒后输出：Hello!

En el ejemplo anterior, definimos una función de retraso () que devuelve una nueva función. Cuando se llama a la nueva función, retrasa la ejecución de la función original fn usando la función setTimeout(). Como la nueva función forma un cierre, puede acceder y usar las variables time y fn en la función delay().

5. Trampas y errores comunes

Si bien los cierres son una función poderosa en JavaScript, el uso inadecuado puede provocar problemas de rendimiento o pérdidas de memoria. Aquí hay algunas trampas y errores comunes:

• Referencias circulares: si se hace referencia a una variable u objeto de una función externa en el cierre, y esa variable u objeto hace referencia a una función en el cierre, pueden producirse referencias circulares y pérdidas de memoria.

• Uso compartido de objetos: si se hace referencia al objeto de la función externa en el cierre y el objeto se comparte entre varios cierres, puede provocar un comportamiento impredecible.

• Sobrescritura de variables: si el parámetro o la variable de una función interna tiene el mismo nombre que el parámetro o la variable de una función externa, puede provocar la anulación de variables y errores.

en conclusión

En JavaScript, los cierres y las cadenas de ámbito son conceptos muy importantes que pueden ayudar a los desarrolladores a implementar muchas funciones y patrones avanzados. En este artículo, presentamos los conceptos de cierres y cadenas de alcance, cómo crear y usar cierres y errores y trampas comunes. Con una comprensión profunda de los cierres y las cadenas de alcance, los desarrolladores pueden escribir un código JavaScript más conciso y elegante.

Enlace original: http://lao-zhao.com/post/9.html