¿Cómo puedo acceder a un valor variable de una función desde otra función en JavaScript, en el mismo ámbito? ¿Puedes consultar el enlace del bolígrafo de código?

A2A

El código actual está literalmente replicando el concepto getter / setter, que es un descriptor de acceso. Estás “accediendo” a una variable desde múltiples funciones, por lo que necesitas un alcance que esté disponible para múltiples funciones. Si bien podría encadenar un conjunto de funciones o pasar datos a través de argumentos / devoluciones de llamada, una solución más simple es crear una estructura de datos para manejar esto.

Para simplificar, proporcionaré un ejemplo de ES2015 usando una clase simple (esto también podría hacerse en la sintaxis de ES5 con bastante facilidad):

  clase MyData {
   constructor (initialValue = null) {
     this.storedValue = initialValue
   }

   obtener valor () {
     devuelve this.storedValue
   }

   valor establecido (datos) {
     this.storedValue = data
   }
 }

Para invocar esta clase, harías algo como:

  let data = new MyData ("cadena")

 document.getElementById ("a"). innerHTML = data.value // Establece el contenido de la etiqueta en "cadena"

 data.value = "algo más"

 document.getElementById ("a"). innerHTML = data.value // Establece el contenido de la etiqueta en "otra cosa"

Se puede acceder al “valor de datos” desde prácticamente cualquier lugar, incluidas cualquier cantidad de otras funciones.

El constructor

La gestión del estado requiere de forma sistemática cierta lógica de inicialización para un objeto, que se implementa con un constructor. La función del constructor se invoca automáticamente cuando dice new , y dentro del constructor puede usar this referencia implícita para manipular el objeto y almacenar el estado de la instancia.

  Empleado de clase {  
   constructor (nombre) {
     this._name = name;
   }

   hacer algo() {
     volver "completo";
   }

   getName () {
     devuelve this._name;
   }
 }

 let e1 = nuevo empleado ("Taylor");  
 let e2 = nuevo empleado ("Charles");

 e1.getName ();  // "Taylor"  
 e2.getName ();  // "Charles"  

GETTERS Y SETTERS

Usando get de esta manera, ahora podemos usar la llamada limpia e1.name .

No tiene que proporcionar un setter si no desea que se cambien las propiedades del objeto.

También es posible que el constructor llame al setter:

  constructor (nombre) {  
   this.name = nombre;  
 }

 establecer nombre (nuevoValor) {  
   this._name = newValue;
 }

HERENCIA

Los 3 pilares de la programación orientada a objetos:
1. Encapsulación
2. Polimorfismo
3. Herencia

En ES6, es fácil especificar una relación de herencia.

  Persona de clase {  
   constructor (nombre) {
     this.name = nombre;
   }

   obtener nombre () {
     devuelve this._name;
   }

   establecer nombre (nuevoValor) {
     this._name = newValue;
   }
 }

Digamos que queremos crear un empleado, y cada empleado es “una persona”. La palabra clave extends maneja nuestra herencia.

  clase Empleado extiende Persona {  
   hacer trabajo() {
     return `$ {this._name} está funcionando`;  // usa la sintaxis literal de ES6
   }
 }

 let p1 = nueva persona ("Taylor");  
 let e1 = nuevo empleado ("Chris");  
 e1.doWork ();  // "Chris está trabajando" 

A menudo habrá información adicional que deberá almacenarse en un objeto. Por ejemplo, nuestros empleados deben tener un título …

SÚPER

super permite reenviar una llamada del constructor de una clase secundaria al constructor de la superclase y reenviar los parámetros requeridos.

  clase Empleado extiende Persona {  
   constructor (nombre, título) {
     super (nombre);
     this._title = title;
   }  

   obtener el título () {
     devuelve this._title;  
   }
 }

Podrías usar this._name = name; en el constructor de clase derivado, pero este no es el enfoque apropiado, ya que podría haber lógica de validación, etc.

super también se puede llamar de otras maneras. Por ejemplo, si una Person trabaja, lo hace de forma gratuita. Si son Employee , se les paga:

  Persona de clase {

   constructor (nombre) {
     this.name = nombre;
   }

   obtener nombre () {
     devuelve this._name;
   }

   establecer nombre (nuevoValor) {
     if (newValue) {
       this._name = newValue;
     }
   }

   hacer trabajo() {
     volver "gratis";
   }
 }


 clase Empleado extiende Persona {

   constructor (título, nombre) {
     super (nombre);
     this._title = title;
   }

   obtener el título () {
     devuelve this._title;
   }

   hacer trabajo() {
     devolución "pagada";  
   }
 }

 let e1 = nuevo empleado ("Taylor", "desarrollador");  
 let p1 = nueva persona ("Charles");

 p1.doWork ();  // "gratis"  
 e1.doWork ();  // "pagado"  

Hemos sobrescrito el método doWork() . También podemos sobrescribir el método toString() :

  Persona de clase {  
   .
   .
   .
   Encadenar() {
     devuelve this.name;
   }
 }

Podemos recorrer una serie de personas para ver si están trabajando:

  let makeEveryoneWork = function (... people) {  
   resultados var = [];
   for (var i = 0; i 

Esta es una explicación bastante larga a su pregunta, sin embargo, con JavaScript debe ser cauteloso con las "trampas", como el alcance de la función y los objetos de ámbito de bloque. Aprenda sobre las clases / funciones / generadores léxicos `this` y ES6 ... etc. ¡Aprenda todo! Tengo algunos artículos sobre el aprendizaje de ES6. Todos son ejemplos muy básicos y esperamos que ayuden.

Notas de aprendizaje de ES6: JavaScript funcional

Para responder a su pregunta, necesitamos aclarar un par de cosas fundamentales sobre Javascript.

Las funciones suelen “hacer” algo (como escribir en el DOM) o devolver un valor. Esta función que has escrito aquí tampoco.

  función setvariable () {
    var a = "cadena"
  }

Por lo tanto, el resultado de invocar esta función no está definido. Y, dado que definió la variable a dentro de esa función, solo es accesible dentro de esa función.

Veamos la siguiente función que escribiste.

  función getvariable () {
    setvariable ();
    document.write (setvariable);
  }

¿Qué sucede cuando se llama esto? En la línea 2, usted llama “setvariable”, que como acabo de mostrar devuelve indefinido.

Luego, en la línea 3, escribe en el documento “setvariable” sin invocarlo. ¿Qué es “setvariable” en este contexto? Es la función literal almacenada.

La diferencia entre “document.write (setvariable ())” y “document.write (setvariable)” es la diferencia entre poner una lasaña en la mesa y poner la receta de la lasaña en la mesa.

Ahora veamos dónde lo ha puesto todo junto.

  var b = getvariable ();
 si();
 document.getElementById ("aplicación"). innerHTML = b;

Ha establecido una variable b igual al resultado de retorno de llamar “getvariable”. En este punto, b probablemente no está definido, ya que “getvariable” no tiene valor de retorno.

Entonces, cuando intentes invocar b () en la línea 2, probablemente te dará un error ya que b no es una función. Luego, cuando desee poner b en el DOM en la línea 3, no está insertando nada en la página.

Así que hay algunos conceptos clave que parece que faltan.

  1. Las funciones hacen algo o devuelven algo. En algunos idiomas, como Ruby, los valores de retorno son implícitos. En Javascript, no lo son. Debe decirle explícitamente a su función “return X”.
  2. Las funciones no se modifican por sí mismas, por lo que la b en la línea 3 anterior es la misma que la b que definió en la línea 1. Invocar b () en la línea 2 no hace nada al contenido de la variable b.

Entonces, si desea que el resultado final imprima “cadena”, necesitaríamos un programa que se parezca más a esto:

  función setVariable () {
   var a = "cadena";
   devolver a;
 }

 función getVariable () {
   return setVariable ();
 }

 var b = getVariable ();
 document.getElementById ("aplicación"). innerHTML = b;