¿Cuál es la diferencia entre el alcance y el contexto en Javascript?

1. ¿Por qué es importante entender la diferencia?: en esta clase, te explicaré la diferencia entre alcance y contexto y JavaScript. También te ayudaré a entender por qué el contexto de alcance a veces puede sentirse igual a pesar de que no lo son. Y también te explicaré cómo tomar mejores decisiones sobre el contexto de alcance a la hora de planear tu código. La tercera pregunta que tenemos que responder es. ¿ Por qué es tan importante entender la diferencia entre alcance y contexto en JavaScript ? Bueno, como desarrollador, pasas la mayor parte de tu tiempo haciendo una de dos cosas desarrollo o solución de problemas . Y cuando se trata de desarrollo, si tienes una fuerte comprensión de la diferencia entre el alcance y el contexto, escribirás código que sea más limpio y más fácil de mantener. Y eso se debe a que tomarás mejores decisiones sobre cómo aprovechar mejor, alcance y contexto en tu código cuando se trate de solucionar problemas. Si entiendes la diferencia entre el alcance y el contexto, harás el mejor uso de tu tiempo y tomarás los pasos adecuados para solucionar tu problema más rápido. Por lo que más adelante en este curso se hablará sobre cómo tomar mejores decisiones sobre cómo aprovechar el alcance y el contexto en tu código. Entonces en este momento solo quiero enfocarme en la solución de problemas. Echemos un vistazo a un flujo de trabajo típico de solución de problemas. Entonces digamos, tener un problema o un bicho. Ahora, en la mayoría de los casos, descubres el error e inmediatamente comienzas a tomar medidas para solucionar ese problema. Y si realmente no entiendes la diferencia entre el alcance en contexto, posible que encuentres que tus pasos de solución de problemas son algo así en todo el lugar. Una cosa te lleva a otra, y un minuto crees que es un problema con la variable. Y entonces tal vez sea un problema de contexto porque es una propiedad de un objeto. Pero entonces no estás realmente seguro, y te lleva por un camino diferente. Y en esta cosa 0.1 que está claro es que no tenemos ah, plan de juego muy enfocado y estamos solucionando los pasos no son, um, realmente nos llevan a cualquier lugar de una manera lógica. Entonces el problema aquí es que sin una comprensión realmente sólida de una diferencia entre alcance y el contexto, podrías encontrar que tu solución de problemas podría tardar mucho tiempo. Podría estar desenfocado, y existe la posibilidad de que en realidad nunca resuelvas el problema. Creo que hay una mejor manera de hacer esto, así que cuando empiezas con un problema o un bicho. Si lo primero que haces es hacerte una pregunta, ¿ Es esto un problema de alcance o contexto? Ahora bien, si te haces esa pregunta pero primero, antes de dar cualquier paso de solución de problemas, si tienes los conocimientos para responder a esa pregunta, si entiendes la diferencia entre alcance y contexto y puedes contesta esta pregunta con confianza, entonces puedes tomar la decisión correcta. Y una vez que conozcas la respuesta a esa pregunta, entonces los pasos de solución de problemas que tomas en más lógicos. Están más enfocados, y puedes resolver tu problema mucho más rápido. Por lo que a la hora de solucionar problemas, entender a los diferentes equipos, contexto de alcance te ayuda a solucionar el problema con mayor facilidad. Y es importante que cuando empieces a solucionar un problema, quieras hacerte una pregunta. ¿ Es esto un alcance o un contexto? Problemas del primer paso es determinar si el problema es un alcance o un problema de contexto. El segundo paso es luego tomar los pasos adecuados de solución de problemas basados en la respuesta a la primera parte, y cuando tomes los pasos de solución de problemas apropiados, finalmente resolverás tus problemas más rápidamente 2. ¿Cuál es la diferencia entre el volumen y el context en JavaScript?: Entonces la siguiente pregunta que necesitamos responder es ¿cuál es la diferencia entre alcance y contexto en JavaScript? Bueno, alcance es la visibilidad de las variables, y el contexto es el objeto al que pertenece un método. Entonces si los pones uno al lado del otro, podríamos pensarlo de esta manera. Alcance es una variables de visibilidad, y podrías preguntarte, Ya sabes, ¿cuál es este alcance de una variable? O ¿cómo es variable, ámbito y con contexto, cuál es el objeto al que pertenece el método? De vez en cuando, podrías preguntarte, ¿En qué es este o en qué contexto se ejecuta este método? Entonces, cuando pienses en el alcance, piensa en las variables. Y cuando se piensa en el contexto, piensa en los métodos. Veamos un ejemplo, solo empecemos con una especie de enfoque de pseudo código. Tengo estas tres cosas en la pantalla. Tengo a Sam una vez o tres y función, y estas son solo tres cosas, y en este momento solo están flotando en el espacio, y no tengo forma de agarrarlas. Entonces Sam es una cadena, y 123 es un número, y la disfunción es una función. Ahora solo finjamos que esta función es una función, porque realmente no es correcta. Sintaxis de JavaScript. Pero de nuevo, es sólo pseudo código. Por ahora, es solo pretender que es una función. De acuerdo, así que tengo que amarrar este número y disfunción, pero realmente no tengo forma de comunicarme con estas cosas. No puedo ponerles las manos encima. Simplemente están ahí. Necesitaba una forma de referirme a ellos, así que necesitamos hacerlo. Tenemos que referirnos de alguna manera a estos valores dándoles algún tipo de nombre. Entonces llamemos a Sam nombre. Llamemos a 123 conteo y se llamaba El Saludo de la Función. Entonces al hacer eso, ahora tengo una manera de referirme a cada una de estas cosas. Entonces cuando apalancé el alcance, puedo crear variables para cada una de estas cosas que puedo guardar. Nuestro nombre es igual a Sam Var Count igual a 123 y bar Griego igual a función. Y si me iba a apalancar contexto, podría crear un objeto. Digamos que los objetos llamados O B J y yo podría darle propiedades a ese objeto porque los objetos tienen propiedades y podría darle una propiedad de nombre que Sam y yo podríamos darle. Propiedad de la cuenta. Eso es 123 Y podría darle una propiedad griega. Eso es disfunción. O podría mezclarlo Apalancamiento, alcance y contacto para poder guardar nuestro nombre es igual a Sam y O B j conteo de puntos va 123 y cuatro. Griego es igual a función. Entonces veamos cómo funciona esto en realidad en código JavaScript. Entonces volviendo al alcance si quisiera crear variables para estas cosas que había usado de nuestra palabra clave y guardo nuestro nombre es igual a Sam Farr Count igual a 123 y nuestro gran igual a función y dentro de la función griega Isler than name values. Entonces estoy creando manejadores para estos valores mediante la creación de variables. Ahora bien, si quisiera apalancar el contexto, podría crear una variable no b J. Es un objeto. Y entonces le doy propiedad a ese objeto. Por lo que B j nombre de punto es Sam y O. P. J conteo de puntos es 123 y más. codicia jadot es una función en alerta alta. Este nombre bursátil que alertaría a Sam. Ahora vamos a hablar un poco más a fondo sobre lo que significa esta palabra clave. Pero justo ahora. Basta con tener en cuenta que cuando se trata de contexto, la palabra clave esta es realmente importante y que esta clave se refiere al objeto al que pertenece un método. Ahora. Si iba a mezclarlo y usar alcance y contexto, podría decir abrir Jason. Una variable y nombre es una variable, pero sobre la cuenta de jade es una propiedad y entonces nadie dot saludo también es una propiedad. También es un método cuando la propiedad de objetos es un método son, ah función, y luego se llama los métodos. Los objetos tienen propiedades, pero cuando una propiedad es una función, es un método. En este caso, alerta el nombre variable auto tipo de tres maneras dedo del pie realmente dos maneras de mirarlo. Se puede aprovechar el alcance y crear variables. Puede aprovechar el contexto y crear propiedades de objeto, o sin duda podría mezclar y emparejar. Por lo que una vez más, alcance es la visibilidad de las variables. Y cuando se piensa en el alcance, pensar las variables y el contexto es el objeto al que pertenece un método, y cuando se piensa en los contactos, pensar en los métodos 3. Software necesario: hay algunas suposiciones que estoy haciendo sobre ti. Asumo que ya has sabido un NPM instalado en tu máquina que tienes un editor de texto decente y luego tienes un navegador Web. Si no tienes las tres cosas configuradas ya en tu computadora, es importante que te detengas ahora y te encargues de eso antes de continuar con el curso. Ahora, si necesitas instalar no, simplemente puedes ir a conocer J s dot organ Donald instalador para tu sistema operativo. Yo sí recomiendo, sin embargo, que utilice un gestor de paquetes para instalar nodo. Esto asegura que puedas instalar la versión más reciente de notado en P. M. Y luego en el futuro, puedes actualizar tu versión de nota. Si estás usando un Mac, puedes usar homebrew, que te recomiendo, Y si estás usando ventanas, puedes usar chocolatey o scoop. Si necesitas un editor de texto, recomiendo Visual studio Code, que funciona tanto en Mac como en Windows o texto sublime, que también es un excelente editor de texto que funciona en Mac y Windows también. Si necesitas un navegador Web, recomiendo encarecidamente Google Chrome o Mozilla Firefox, ambos funcionan en Mac OS y Windows 4. Obtener la configuración: De acuerdo, vamos a configurar el código de ejemplo en tu máquina. Vamos a hacer tres cosas. En primer lugar, se descargará el código de ejemplo. A continuación configurará el proyecto usando NPM, y luego después de eso, demostraré el servidor Web local. Entonces primero, empecemos descargando el código de ejemplo. igual manera de vista previa, te voy a guiar por los pasos de hacer clic en este enlace en la página Web de la clase, que iniciará la descarga del archivo ZIP. Y luego, después de haber descargado ese archivo zip, vas a descomprimir ese archivo. Abre esa carpeta en tu aplicación de terminal. Ejecutarás la instalación de NPM para instalar dependencias. Entonces ejecutarás NPM. Empieza a iniciar el servidor Web local, y apuntas tu navegador al host local 3000. En ese punto, verá la página Web de ejemplo del servidor Web local en sus navegadores. De hecho, caminemos juntos por esos pasos ahora mismo. Desplácese hacia abajo hacia la parte inferior de la página y haga clic en su proyecto. En el lado derecho, verás un enlace llamado Alcance versus Ejemplos de contacto dot sip. Haga clic en ese enlace para iniciar la descarga, pasar al pliegue que tiene el archivo zip descargado. Tengo el mío en mi escritorio solo para mantener las cosas simples. Descomprima ese archivo. Abre tu aplicación de terminal y muévete a esa carpeta. Siguiente ejecuta la instalación de Command NPM. Esto descargará todas las dependencias para el proyecto. Cuando eso haya terminado, tendremos que iniciar el servidor Web. Entonces cuando estés estolas NPM completas, ejecuta el comando MPM start. Verá un mensaje en el que se indica que los servidores Web que se ejecutan en host local Puerto 3000. Así que abre tu navegador y apunta tu navegador al host local 3000 y verás el ejemplo. Página web. OK, ahora que tienes el código de ejemplo puesto en tu máquina, voy a caminar por esta pequeña página Web que, armada, armada cual usará como, ah para nuestras discusiones de los diferentes conceptos en esta clase y algunos de los ejemplos de código. Esta es una página Web muy, muy simple que armé no hace mucho, pero es principalmente la vamos a estar usando para demostrar los ejemplos de código en muchas de las lecciones. Entonces primero en la esquina superior izquierda, si haces clic en los ejemplos de show, pero verás que hay enlaces a todos los ejemplos del curso, y te permite ejecutar los ejemplos de código sin tener una copia y pegar. Simplemente puedes ejecutarlo ahí mismo desde el navegador. Entonces si te desplazas hacia abajo y haces clic en el que dice método encadenado, realidad no vamos a entrar en eso ahora mismo. Pero, um, ese ejemplo en particular hace que todo el código funcione para la U. I. Así que ahora solo quiero mostrarles cómo funciona la página. Se trata de un equipo de ventas ficticio de 10 personas, y por cada persona de ventas, puedo hacer clic en el botón seleccionar y puedo hacer clic en el botón de seleccionar. Entonces al hacer clic seleccionar que se pueda ver la persona de ventas ha seleccionado el tú me cambia un poco y Aiken de Seleccionarlo. Y también puedo simplemente eliminar manualmente a cada vendedor de la página haciendo clic en el botón eliminar y para esa persona de ventas. Y cuando selecciono uno o más vendedores, muestra el botón Eliminar seleccionado en la esquina superior derecha y cuando hago clic que cualquier persona de ventas que seleccionó se elimina entonces, Así que si selecciono, digamos, tumba o y haga clic en eliminar los seleccionados para eliminar. Y a medida que eliminas a los vendedores, el conteo, el conteo total de los vendedores baja. Ah, cosas realmente simples. Pero usted sabe que va a ser una especie de caminar a través de algunos ejemplos de código y estaban usando esto para basar nuestros ejemplos. Y en un momento dado, si quieres volver a cargar la página, solo tienes que hacer clic en el botón de recarga de página y puedes empezar desde cero. Si te abres, tus trabajos podrían consolarse. También verás un mensaje cada vez que cargues un ejemplo de código que simplemente te indica exactamente qué archivo se cargó. Entonces puedes estar seguro de que, por ejemplo, estoy cargando ejemplos de alcance global dos. Y eso lo veo en la consola, así que solo hazte saber que estás ejecutando el ejemplo correcto en caso de que no estés realmente seguro. 5. Dónde encontrar el código de ejemplo: Para gran parte de esta clase estarás siguiendo junto con el código de ejemplo. Así que tomemos un segundo rápido para averiguar dónde. Para encontrar estos ejemplos. Abre tu editor de texto. Estoy usando código de estudio visual y me muevo a la carpeta Proyecto. Abre la carpeta W W W W. Abre la carpeta Js, Abre la carpeta Ejemplos en la carpeta Ejemplos. Encontrarás una serie de subcarpetas y cada subcarpeta de los archivos de ejemplo para ese asunto en particular. Por ejemplo, en la carpeta Global Scope encontrará los ejemplos de alcance global y en la carpeta de la escuela privada encontrará ejemplos de alcance privado y así sucesivamente. Vamos a indagar en estos específicamente un poco más tarde, pero sólo quería mostrarles dónde encontrar el código de ejemplo. 6. Detalles de el Scope de tres tipos de alcance: Pero hablemos de alcance con un poco más de detalle, como ya comentamos antes. Alcance es la visibilidad de las variables, y hay tres tipos de alcance. Hay alcance global, hay alcance privado, y hay alcance de nivel de bloque. 7. Alcance: debate: volvamos un círculo atrás y hablemos un poco más específicamente sobre el alcance global. El ámbito global también se conoce como el objeto de ventana o el ámbito más exterior o un ámbito de nivel superior. Básicamente, el alcance global es cualquier código que no esté en una función. Entonces, por ejemplo, tengo algún código aquí a la izquierda. Y como pueden ver, tengo un par de variables en la parte superior, y tengo dos funciones food y bar y luego en la parte inferior del podría ejecutar esas funciones. Por lo que las variables velocidad y saludo y las funciones gripe y bar y la ejecución de esas funciones son código global. Están definidos en el ámbito global, y eso se debe a que no están definidos en una función. Entonces el código que está dentro de las funciones de comida y barra no es código global porque ese código se define dentro de una función. Entonces en este caso, tengo una variable llamada app, y esta app es una variable privada porque está definida dentro de una función. Por lo que es realmente importante recordar que el alcance global es cualquier código que no esté definido en función ah 8. Alcance: demostración: abra la carpeta Examples y, a continuación, abra la subcarpeta Global Scope. Ahora veamos el ejemplo de Big. Alcance Global uno. Aquí tengo una velocidad de frío variable global. Sé que eso es global porque no está en una función es encontrar fuera de una función. Entonces declaro la velocidad variable, que es igual 25 Tengo una sentencia de registro de consola poniendo esa variable y deberíamos conseguir 25 en la consola. Entonces si hago clic en mostrar ejemplos y luego alcance global ejemplo uno, podemos ver que obtenemos Global Street 25. No es una gran sorpresa. Entonces, veamos el alcance global número dos. Por lo que una vez más tengo la velocidad variable global que es igual a 25. Pero entonces tengo esta función dentro de la función. También salgo en la velocidad de la consola a partir de la comida, que es la variable de velocidad global definida en línea tres y luego en línea. Nueve. Tengo el registro de consola declarado más salida, el valor de la variable global y en línea 10 Execute fu, que también da salida a la variable global. Entonces echemos un vistazo a mostrar ejemplos alcance global a, y veo que los dos mensajes se aceleran desde alcance global. 25 velocidad de la comida 25. Cosas bastante simples. Pero el punto aquí es que una variable global es maravillas para encontrar en el ámbito global, y sabemos que estamos en alcance global. Si no estamos en una función. La velocidad variable no está definida en una función, que significa que es global, pesar de que accedemos a ella en la función en línea. Seis. Esta variable de velocidad aquí mismo sigue haciendo referencia a la velocidad global, y luego estamos fuera poniéndola aquí. Entonces solo recuerda que la variable global es aquella que se define fuera de una función. 9. Alcance: debate: y siguiente arriba es alcance privado. Alcance privado también se conoce como ámbito local o ámbito de función. Alcance privado se logra mediante el uso de la palabra clave VAR dentro de una función. Entonces si ejemplo en esta función creo una variable llamada Speed y es privada porque usé de nuestra palabra clave, es así de simple. Si usé de nuestra palabra clave dentro de una función esa variable que estoy creando se vuelve privada a esa función. Ahora bien, es importante señalar algo muy, muy crítico sobre JavaScript, y eso es alcance léxico. El alcance léxico es la forma en que el alcance se comporta en JavaScript en que las inter funciones pueden ver hacia fuera. Pero las funciones externas no pueden ver en. Y lo que quiero decir específicamente es en este caso, tenemos tres funciones externa, media e interna, y la inter función, que es la enorme función, está anidada. Está anidado dos veces. Está anidado dentro del medio y los medios anidados al revés. Entonces desde la función interna esa función tiene acceso a la barra y variables alimentarias. Debido a que la inter función puede ver fuera, puede ver cualquier variable declarada fuera de sí misma. Por lo que el inter función tiene bastante acceso. Tiene acceso a sus propios baños privados. Variable. Tiene acceso a la variable bar, y tiene acceso a la variable de comida. Pero lo contrario no es cierto, por lo que las funciones externas y medias no son capaces de ver en, Así que la función externa tiene acceso a su propia variable alimenticia privada. Pero no puede ver dentro de la función media que no puede ver la variable bar, y no puede ver la variable bass porque está dentro de la inter función. Por lo que una vez más, las funciones pueden ver fuera, pero no pueden ver adentro. Y eso es alcance léxico en JavaScript. Y es realmente importante entender que porque es la forma en que el alcance se comporta y JavaScript, y cuando declaras una variable usando palabra clave navarra, esa variable se vuelve privada a esa función, y nada fuera de esa función tiene acceso a esa variable. Pero esa función puede ver cualquier variable definida fuera de sí misma. 10. Alcance: demostración: abre tu carpeta Examples y luego abre la subcarpeta privada Scope. Echemos un vistazo al ámbito privado uno. Esto es más o menos lo que tuvimos en el último ejemplo global. Tenemos una velocidad de frío variable global cuando tenemos esta función llamada comida, pero estamos accediendo a la velocidad global dentro de esa función. Por lo que terminó con 25 son consolas dos veces. Vamos a mostrar ejemplos Alcance Privado uno y queremos arriba con 25 en el Cónsul dos veces. De acuerdo, entonces cuando vayas a ámbito privado a verás que las cosas eran un poco diferentes. Tengo mi velocidad global aquí, pero luego, dentro de esta función, tengo una variable privada, y se crea una variable privada mediante el uso de la palabra clave var dentro de una función. Entonces cuando usamos la palabra clave var para definir variable dentro de una función esa variable se vuelve privada de esa función. Por lo que esta versión de velocidad no está disponible fuera de esta función. ¿ Quieres ejecutar la línea número ocho? Obtengo la versión privada de velocidad esta velocidad aquí en la línea número ocho, hace referencia a esta velocidad en línea número seis. ¿ Dónde está esta velocidad en línea número 11 hace referencia a la velocidad global en línea número tres. Por lo que debería meterme en mi consola. El velocidad global es de 25 entonces debería decir la carga. El velocidad local es de 100. Y vamos a mostrar ejemplos ámbito privado a. Y es exactamente eso. Velocidades globales. 25 lanzas particulares 100. Entonces el punto aquí es que ahora, o tenerlo, estamos creando una variable privada a la que también se conoce como variable local. Pero usando la palabra clave var, veamos el alcance privado. Tres. Entonces aquí tengo un ejemplo de alcance léxico. Entonces con alcance léxico, las funciones pueden ver hacia fuera, pero no dentro así aquí. En la línea número ocho barra de disfunción accedo a variable de velocidad. Pero esta variable de velocidad resuelve a esta velocidad. Entonces cuando vea esta declaración de registro de consola en línea número nueve, va a decir bar 100. Y eso se debe a que esta barra de funciones puede ver fuera de sí misma. Se puede ver que la velocidad variable que primera velocidad variable de multas igual a 100 Así que aquí se ejecutan barras y esta sentencia de bloqueo cónsul encuentra la versión de velocidad es igual a 100. También, emparejo un registro de cónsul en línea 13 velocidad de referencia. También unos arriba con la versión de velocidad equivale a 100 porque de nuevo, dentro de esta función, velocidad es igual a 100. Esta función puede ver fuera de sí misma, y su declaración de registro de consola está dentro del alcance de los alimentos. Por lo que tanto las declaraciones de registro del Consejo de comida del bar darán como resultado 100. Y entonces esta sentencia de bloqueo de consola dará salida a 25 porque aquí la velocidad resuelve a 25 la versión global de velocidad. Esos miran el ejemplo, número tres para alcance privado. Entonces vemos Global 25 bar 104 100. Entonces si nos fijamos en el último ejemplo de alcance privado, es un poco diferente, porque aquí dentro de la función de barra, estamos declarando una velocidad variable privada. Entonces en línea. 11 esta velocidad resuelve a esta velocidad, que es de 500. Por lo que Bar ahora tiene su propia versión privada de velocidad, lo que significa que esta versión de referencia rápida sobre la vida 15 va a ser 100 porque estamos accediendo a la primera en sentido de velocidad. Nos confinamos en comida y la versión privada de velocidad y comida es igual a 100. Pero en bar la versión privada de velocidad es igual a 500. Y eso se debe a que utilizamos nuestra palabra clave para definir la velocidad, lo que crea una versión privada de la velocidad. Entonces ahora deberíamos tener, uh, aquí Global 25. Cuando ejecutemos comida, vamos a uno arriba con Bar 500 Full 100. Entonces veamos ejemplos de espectáculo, alcance privado. Ejemplo. Cuatro. Eso es lo que obtenemos. Obtenemos global 25 Bar 500 comida 100. Entonces lo principal aquí que solo quiero señalar es esa herramienta. Dos cosas. Uno cuando usamos de nuestra palabra clave, creamos una variable privada. Es el dedo del pie privado o local lo que funciona, y también que las funciones pueden ver fuera de sí mismas. Eso es alcance léxico frío. Por lo que esta función de barra. Si fuéramos a quitarle la palabra clave var, quitarle esta línea, esto daría salida 100 en lugar de 500 porque lo haría, diríamos, Hey, no tengo una velocidad de frío variable privada. Déjame ver si puedo encontrar uno, y se vería fuera de sí mismo y miraría a este alcance y encontraría esta versión de velocidad. Pero aquí desde que declaramos variable privada llamada velocidad. Esta velocidad resuelve a 500 la velocidad se resuelve a 100 en esto resuelve a 25 porque con alcance léxico, las funciones pueden ver hacia fuera. Pero no pueden ver en. Y una vez más, la palabra clave VAR crea una variable privada o local solo para la función en la que se definió . 11. Alcance: debate: El tipo final de alcance en JavaScript es el alcance de bloque, lo que el alcance de bloque se logra mediante el uso de las palabras clave let o const dentro de un bloque. Ahora se introdujo en la versión Atmos Script 2015 del script Java. Por lo que antes de ec rescript 2015 teníamos dos tipos de alcance, global y privado. Y luego después de que se despliegara ec rescript 2015, tenemos tres tipos de alcance alcance global, privado y de nivel de bloque. Entonces tal vez te estés preguntando qué es un negro Bueno, esto es un bloque de bloque está abriendo y cerrando tirantes rizados. Y dentro de esos tirantes rizados pones tu abrigo y él código te pones dentro de esos tirantes rizados, um es capa de nivel de bloque. Entonces, por ejemplo, tengo esta variable. Yo y yo lo hemos declarado mediante el uso de la palabra clave let ambos. Entonces, al usar la palabra clave let dentro de un bloque, me queda alcanzada a ese bloque. Ahora, también podría tener otra variable I que se define en este caso globalmente porque una vez más, si algún código que no está definido en una función se define globalmente, Así que aquí tengo esta variable global llamada I And entonces tengo esta otra variable llamada I que es igual a 50 dentro del bloque. Y estos dos pueden coexistir muy felizmente porque el 1er 1 es de alcance global y el 2do 1 es de ámbito de bloque. Por lo que también podría usar la constante que fueras para crear ese segundo yo variable las diferencias . Si utilizara la palabra clave let, podría darle la vuelta esa variable la siguiente línea de tickets de código. Dejaron que yo igualara 50. Y entonces podría decir: Dejé igualar 5000. No hay problema. Pero cuando uso una palabra de estafa ski, eso es una constante. Entonces una vez que hago eso, no puedo intentar cambiar. Yo soy I. Entonces si digo constante Artículo 50 y luego digo que viene, igual a 5000 obtendré un error porque no puedo anular ojos. Por lo que el diferente equipo dejó y Const. ¿ Ambos crean variables de nivel de bloque o alcance de bloque. Pero, const. Cuando usas esa palabra clave, no puedes anularla. Entonces, una vez más, ahora hay tres formas diferentes de crear una variable. Hay var, lo que crea ámbito privado. Hay let que crea, ah, ah, nivel de bloque o una variable de ámbito de bloque, y está la palabra clave Const, que también crea una variable de ámbito de bloque. Pero esa asignación de valor no puede cambiarse 12. Alcance: demostración: abre tu carpeta Ejemplos y luego abre la subcarpeta de ámbito de bloque. Echemos un vistazo a los bloques, ejemplo de Esperanza. Uno. Se oye hablar de esta variable global I, que es igual a 100 entonces tengo un bloque de código aquí y decía El bloque emiten el valor de I y luego de lado del bloque pongo fuera Poner el valor por otra vez. Echemos un vistazo al ejemplo de bloque Número uno. Entonces veo 100 dos veces para A y B, y eso tiene sentido porque en realidad no estoy haciendo nada para especial aquí. Acabo de salir poniendo el valor de yo dos veces una vez en el bloque de una fuera del bloque de mi punto aquí. ¿ Es porque no hice nada especial dentro del Plock? Sigo siendo 100 así que se mira el ejemplo negro Número dos. Tengo una variable global llamada I, que es igual a 100. Pero luego dentro de mi bloque, tengo una variable de alcance de nivel de bloque I, que es igual a 50 y salida que en la consola. Por lo que esta versión de I es diferente a esta versión de I porque esta es tiene alcance de nivel de bloque . En realidad es alcance solo a este bloque, así que igual a 50 en el bloque. Pero yo estaba 100 fuera de la cuadra. Entonces cuando miro el ejemplo de alcance de bloque a obtengo 50 y 100. Entonces el punto principal aquí fue usar la palabra clave let para crear una variable de alcance de nivel de bloque , que no entra en conflicto con la global porque está alcanzada aquí al bloque estaba buscando alcance de bloque. Ejemplo. Tres. Entonces aquí hago más o menos exactamente lo mismo. Pero en lugar de usar la palabra clave let, utilizo la palabra clave constante para crear este bloque. Variable de ámbito I Entonces si ejecuto bloques? Ejemplo. Tres Lo mismo. 15 100 alcance de bloque abierto. Ejemplo. Número cuatro. Entonces aquí hay dos variables globales i NJ I lo inicia cero n. J. Inició 100. Tengo un bucle for y en el incremento de cuatro bucle I. Pero también incrementos J. Entonces con lo que debemos terminar es bucle donde las salidas del consejo son iguales a cero y 101 101 202 y así sucesivamente. Echemos un vistazo al ejemplo de alcance de bloque y eso es con lo que terminamos. Entonces el punto que estoy haciendo aquí es que no estamos aprovechando el alcance de bloque aquí. Estamos implementando I NJ dentro de la lista negra. A ver si podemos arreglar ese ejemplo. Cinco. Lo que hacemos es que es muy similar, excepto que dentro de nuestro bloque, pusimos a J para que sea alcanzada justo en su cuadra. Por lo que ahora J es igual a 50 y nosotros incrementamos persecución. Con lo que vamos a terminar es un bucle donde las salidas del consejo son 0 51 1 51 a 51 3 51 y así sucesivamente porque en cada bucle de iteración se estaban estableciendo una nueva variable que alcance justo a este bloque e incremente en él solo una. Entonces si vamos dos cuadras vamos ejemplo cinco. Eso es lo que obtenemos. 0 51 1 51 a 51. Um, solo ilustrando que Jay tiene alcance a este bloque y cada uno en cada cerradura interacional. Obtenemos una nueva versión de J. Estamos creando una nueva versión de J usando la palabra clave let y tiene alcance justo a este bloque , mientras que yo tengo alcance globalmente. Por lo que cambió en cada iteración, también obtiene alcance de bloque. Ejemplo. Seis. Aquí estamos haciendo exactamente lo mismo. Onley definía J con la palabra clave constante en lugar de la palabra clave let. Pero esto será un problema porque con la palabra consecuente, no podemos sobrescribir el valor que creamos una vez que creamos J y decimos es igual a un no podemos vuelta dicen J es igual a ser porque con la palabra clave constante, estamos creando un constante. Por lo que este intento de incremento j arrojará un tipo Er uh, mira, en el ejemplo Número seis ámbito de bloque Ejemplo número seis. Se puede ver en corte tipo error asignación toe una variable constante. Es lo que es ese dicho, Oye, Oye, tú creaste una constante aquí y luego él se dio la vuelta trató de cambiarla. No podemos hacer eso. Por lo que la palabra clave Const funciona de la misma manera que la palabra clave let. Crea una variable de ámbito de nivel de bloque. Pero una vez que creas que de manera variable no puede cambiar, no puedes anularlo. Si miras un alcance de bloque ejemplos siete. Hacemos más o menos lo mismo, pero no tratamos de cambiar a Jay. Simplemente lo dejamos como está. Por lo que conseguiremos la salida del cabildo de 0 51 52 53 15 Así sucesivamente. Entonces un espectáculo. Ejemplos bloquean el alcance. Siete. Eso es exactamente lo que obtenemos. 0 51 52 50 Y eso se debe a que creamos la variable J de nivel de bloque, que es igual a 50. Y eso está bien. Ya es. Jay no entra en conflicto con esta versión de James Global, pero simplemente no la cambiamos. Entonces lo que hay que recordar de dejar a Const. Es que con lead, se puede crear una variable que haya bloqueado el alcance de nivel y se podría cambiar, mientras que con Const. No se puede cambiar. Una vez que creaste, debes dejarlo en paz. Es una constante, pero tanto let como cons crean variables de ámbito de nivel de bloque. 13. Contexto de discusión: Antes en esta clase, hicimos la pregunta muy importante. ¿ Qué es el contexto en JavaScript? Y encontramos que la respuesta fue, el contexto es el objeto al que pertenece un método. Esa discusión fue niveles bastante altos. Vamos a cavar un poco más profundo. Aquí. Tengo este objeto llamado cuenta, y tiene dos propiedades número de cuenta, que es un número y obtener número de cuenta, que es una función en JavaScript cuando una propiedad es una función. También se llama un método que pasa a ser cierto para una serie de idiomas. Pero aquí para obtener el número de cuenta. La propiedad es un método porque es una función, y esa función devuelve el valor de la propiedad número de cuenta de este objeto Así que en este caso, devolvería 12345 Ahora podríamos haber dicho en nuestro número de cuenta get, método de retorno cuenta punto número de cuenta, pero eso no es muy elegante. Entonces lo que hacemos es decir, devolver este número de cuenta de inicio ahora ya que obtener número de cuenta es un método el JavaScript. Esta palabra clave dentro de ese método se refiere al objeto al que pertenece ese método, y ese método pertenece al objeto de cuenta. Por lo que el método get account number devuelve la propiedad de número de cuenta de cualquier objeto al que pertenezca, que pasa a ser el objeto de la cuenta. Entonces cuando decimos este número de cuenta de cosas, realmente estamos viendo el número de cuenta punto de cuenta. Por lo que es realmente importante recordar que cuando se trata de contexto, el JavaScript esta palabra clave se refiere al objeto al que pertenece un método. Estaba cavando un poco más profundo y mira algunos ejemplos de código reales. 14. Contexto: en tu carpeta Ejemplos, Abre la subcarpeta contextual y veamos el contexto. Ejemplo básico. Aquí tenemos dos objetos completos y bar. Cada uno de estos objetos tiene dos propiedades. Una propiedad de saludo y una propiedad griega. Ahora con objetos. Cuando una propiedad resulta ser una función, se llama método. Por lo que cada uno de estos objetos tiene un método de saludo, por lo que el punto de comida codicia o el método griego de alimentos devuelve esta reserva de ecologización. Ahora, en un método que esta palabra clave es muy importante, se refiere a la función el objeto al que pertenece un método para que esta clave estuviera en línea. El número cinco se refiere a la comida porque este método saludo pertenece a este alimento objeto. Por lo que una vez más, el guión de trabajo. Esta palabra clave dentro de un método se refiere al objeto al que ese método pertenece en línea. Número cinco. Esto consiguió punto verdor resuelve a la comida están creando en línea el número 13. Este saludo bursátil resuelve a la lectura de Bardach, por lo que nuestras salidas de log cónsul deben igualar. Yo estoy lleno y soy bar porque recordando grado de comida, arteria y barra. Entonces veamos esto en acción. Si abro bloque scope context place. Ejemplo. Veo que estoy lleno y soy bar, y eso es exactamente lo que esperamos. Ahora hay algo que podríamos hacer que podría hacer esto un poco más claro dentro del método de saludo de Barda. Voy a poner declaraciones de dura del consejo. Voy a decir consejo durante esto, sólo voy a inspeccionar esto para que sólo pudiéramos conseguir un entendimiento quizás un poco más profundo de lo que esto significa en línea número 13. Entonces ahora cada vez que ejecutamos el código, veo este objeto en mi consola y pude ver que tiene dos propiedades creep, que es una función y saludo. Yo soy bar si lo hago. Si tomo esto y lo muevo dentro de la comida, comida es codiciosa, codiciosa. ¿ No vuelvo a ejecutar? Este código ahora es objeto. Se puede ver que tiene un método griego y un saludo. Yo soy comida. Entonces lo que hay que recordar sobre el contexto es que es el objeto al que un método pertenece tan dentro de un método. El script Java. Esta palabra clave se puede usar para hacer referencia al objeto al que pertenece ese método aquí, dentro de los alimentos, que esta palabra clave hace referencia completa aquí dentro de barra que esta palabra clave hace referencia allí. Por lo que este saludo bursátil resuelve a Bardot saludo y este saludo bursátil en línea. Cinco Resuelve a la comida son saludo. 15. Cuando los "sentidos de lo mismo: discusión: a veces el contexto de alcance puede sentirse como lo mismo. Entonces te puedes preguntar, ¿es el contexto de alcance Everth lo mismo? Y la respuesta es no. Excepto que hay momentos en los que el contexto de alcance puede sentirse como lo mismo. Hablemos de Global implícito y Global implícito es algo que sucede cuando omites la palabra clave VAR. Entonces, por ejemplo, en el lado izquierdo estoy creando esta función comida fría, y creo una variable de velocidad diciendo, var velocidad es igual a cinco. Entonces cuando hago esa velocidad está en el ámbito privado de la función alimentaria. Ahora la velocidad es una variable privada a la derecha. Vuelvo a crear la función de comida, pero solo digo que la velocidad es igual a cinco. Omití bien la palabra clave VAR omitiendo la var. La velocidad de palabra clave es ahora una variable global debido a que nuestra palabra clave se omitió. De hecho, no sólo la velocidad es una variable global, es lo que se llama global implícita. Estamos creando implícitamente una variable global omitiendo la palabra clave var. Además de que la velocidad ahora es propiedad del objeto ventana. Eso es correcto. Cuando se crea una variable global ya sea implícita o explícitamente, se crea una propiedad en el objeto ventana, por lo que al decir velocidad equivale a cinco dentro de una función. También estoy diciendo que la velocidad de punto de ventana es igual a cinco. Ambos lograron exactamente lo mismo. De hecho, también puedo ahorrar nuestra velocidad equivale a cinco en el ámbito global, y logra exactamente lo mismo. De hecho, incluso puedo decir que la velocidad equivale a cinco en el ámbito global y eso logra exactamente lo mismo . Entonces es súper importante saber que lo que estamos haciendo a la derecha al decir velocidad equivale cinco Cuando omitimos la palabra clave var que estamos haciendo, dos cosas estaban creando un global implícito. Estamos creando una velocidad de frío variable global, y también estamos creando una propiedad en el objeto de ventana llamada velocidad porque cualquier variable que sea global también se convierte en una propiedad fuera del objeto ventana. Y este es un ejemplo de uno. Alcance y contexto empiezan a sentirse como lo mismo porque estamos creando variables que alcanzan. Pero estamos trabajando con un objeto o dando propiedades a un objeto. Y si camino crearíamos una función o método llamado ventana obtener velocidad, podríamos decir devolver esta velocidad de punto y funcionaría. Entonces es entrar en esta zona difusa donde el contexto de alcance no va a ser lo mismo a veces puede sentir como lo mismo, y es importante entender que no lo son. Pero nos estamos metiendo en una zona gris, una zona gris donde sí se siente un poco confusa. Ahora. Si fuera a poner la palabra clave VAR de nuevo en esta función y guardar nuestra velocidad equivale a cinco velocidad ahora está de vuelta en el ámbito privado de la función completa de nuevo. Y lo es. Ya no hay una variable global llamada speed y Speed ya no es una propiedad del objeto window. Ahora hablemos del JavaScript, esta palabra clave dentro de las funciones globales. Tan pesado descargo de responsabilidad aquí para el próximo par de minutos. Estamos hablando de JavaScript en el navegador. Hay otro contexto, como Node, pero por ahora, solo estamos hablando de JavaScript como se ejecuta en el navegador. Y también hay algo llamado modo estricto, que podría cambiar drásticamente la conversación que estamos sobre el dedo del pie tenemos así que solo ten en cuenta esto, Um definitivamente aprenderá más sobre el modo estricto en un par de minutos. Nos fijamos en los ejemplos de código, pero solo para el siguiente minuto de tratar de olvidarse del modo estricto y solo ten en cuenta que estamos hablando de empleos. Ponte a correr en el navegador. Está bien. Fin de descargo de responsabilidad. Ahora, esto dentro de la función global. Por lo que dentro de una función global, el javascript de la palabra clave esta es igual al objeto ventana. Entonces del lado derecho, um creó esta función llamada comida, y yo referí a esto. Y cuando hice referencia a esto, realmente estoy referenciando ventana dentro de una función global. El JavaScript. Esta palabra clave siempre hará referencia al objeto ventana. Entonces si digo esta velocidad de punto, es como decir velocidad de punto de ventana. Si digo que esta velocidad de inicio es igual a cinco, realmente estoy diciendo que la velocidad de punto de ventana es igual a cinco. Y no sólo eso, también estoy creando una variable global porque decir que sin duda la velocidad es igual a cinco es como decir en el ámbito global de nuestra velocidad equivale a cinco o velocidad igual a cinco. Esta es una de esas situaciones en las que las líneas entre el alcance y el contexto se vuelven un poco borrosas y puede resultar confusas. No son exactamente lo mismo, pero se acercan mucho en esta situación. Así que solo ten en cuenta que en una función declarada globalmente o función definida, el JavaScript, esta palabra clave hace referencia al objeto de ventana, y esencialmente también estás creando. Cuando agrega una propiedad al objeto ventana, lo estás creando una variable global. Creo que esto tendrá un poco más de sentido cuando veamos algunos ejemplos de código, así que veamos algún código. 16. Cuando se "sentirán en la misma de la de código: en tu carpeta Ejemplos, Abre la subcarpeta titulada Alcance y Contexto parecen iguales. Y veamos el primer archivo de ejemplo. Copiar este ejemplo Un código el que se llama crea una variable de velocidad y muestra en la consola. Copia ese código y pégalo en tus trabajos. Buen consejo. Y vemos que la salida que obtenemos es de 100. De acuerdo, volvamos en círculo. Entonces en este ejemplo, estamos creando una variable privada, velocidad de frío dentro de esta función comida sin poner en la consola y solo ejecutar comida. Vemos 100. Entonces no hay nada especial ahí. Pero apenas Teoh estableció que queremos usar la palabra clave var para crear una variable privada . Y hemos hablado de esto varias veces en esta clase. Entonces cuando se baja al ejemplo, se el que es ah, que dice qué pasa si se olvida la palabra clave var aquí en línea? 15. me olvida la palabra clave var I on line four of used var, pero en línea 15 Simplemente lo omité, Así que estoy diciendo speed es igual a 100 I output speed y ejecuto food. Entonces uh, ok, Entonces, ¿qué pasa si olvidamos la palabra clave bar, pero voy a copiar este código, y voy a pegar esto en las consolas primera página gratis y me dan 100 otra vez. Por lo que aún nos quedan 100. Sabemos que, uh, creamos la variable. Nosotros lo emitimos, pero estoy pensando que aquí sucede algo diferente. Bueno, algo sí pasó aquí. Hay algo que le pasa a esa variable de velocidad. Lo que sucede es que la variable de velocidad se convierte en lo que se llama global implícito e implícito global es una variable en JavaScript basado en navegador, donde cuando omites nuestra palabra clave esa variable se convierte en una propiedad fuera del objeto ventana, it se convierte en una variable global. Y recuerda, es realmente súper importante pieza de información es que una variable global es una propiedad de los objetos de ventana. Entonces si escribo velocidad en mi consola, veo 100. De hecho, si escribo ventana tengo velocidad, obtengo 100. De hecho, si escribo ventana e inspecciono el objeto de ventana y me desplaza todo el camino hacia abajo y miro, podría ver que aquí hay una velocidad correctamente. Entonces el punto aquí es que cuando omites la palabra clave var, creas lo que se llama global implícito. Se convierte en una variable global, y eso lo has hecho implícitamente así. Crear una trama AMP implícita Global es realmente lo mismo que declarar al móvil la variable global. Por lo que las Líneas 14 y la Línea 17 son exactamente las mismas. Hacen exactamente lo mismo. Ambos crean un global muy bien. La única diferencia es en línea. 14. Lo estoy haciendo explícitamente. Digo que la velocidad var es igual a 100 lo estoy haciendo en el ámbito global estaba en línea 17. Lo estoy haciendo implícitamente, y estoy diciendo, Bueno, velocidad , eran 100. Y porque estoy en una función la omisión de las palabras clave var dice: Oh, Oh, va a ser un global. Pero lo otro que sucedió es que descubrimos hace unos segundos es que crear y una variable global también crea una propiedad del objeto ventana con el mismo nombre, por lo que las líneas 14 y 15 son exactamente las mismas. Logran exactamente lo mismo. Var velocidad es igual a 100 velocidad de punto de ventana ah igual a 100. Ambos crean una variable global que también es una propiedad de los objetos de ventana. Entonces esta no es una situación en la que el alcance y el contexto casi se fusionaron. Se sienten mucho como lo mismo, y de alguna manera casi se puede pensar en ellos como lo mismo. Depende de cómo quieras debatirlo, pero realmente es el tipo de reunión, y sin duda sienten lo mismo porque tenemos una variable global no era duda al respecto. Pero eso muy bien se convierte en una propiedad del objeto ventana. Y también se puede decir que esto es exactamente lo mismo. La línea 16 hace exactamente lo mismo que las líneas 14 o 15 porque al dejar fuera la palabra clave lejana en 16 estoy creando un global implícito. Sólo lo estoy haciendo en el espacio global. Entonces todas estas tres cosas lograron exactamente lo mismo. Crean una variable global, y esa variable global se convierte en propiedad del objeto ventana en pieza increíblemente importante para que la información tenga en cuenta, porque cuando estás trabajando con JavaScript basado en navegador, el objeto ventana es un objeto muy importante. Las variables globales son un concepto importante para estar conscientes de sus usualmente malas. Hay un montón de, um, definitivamente hay un montón de propiedades problemáticas del objeto de ventana, pero crear variables globales intencionadamente suele ser algo que quieres evitar. Pero es importante entender que cuando omites la palabra clave var dentro de una función, creas lo que se llama global implícito. Es una variable global, lo estás haciendo implícitamente, y esa variable también se convierte en una propiedad del objeto ventana. Cualquier variable global es también una propiedad del objeto window. 17. Cuando se "sentirán en la misma de la de código: Ahora veamos el ejemplo. Ver el que dice: ¿ Qué es esto? Entonces tengo esta función de comida otra vez. Y dentro de la comida, creo una variable. Entonces esto es bueno. Vuelvo a usar la palabra clave var, que creo que es mejor. Entonces estoy creando una variable privada dentro de la comida. Entonces la velocidad es privada a esta función, y alerto a esta velocidad stott, ¿de acuerdo? Y luego ejecuto comida, así que deberíamos conseguir una alerta. Pero la pregunta es, ¿cuál será el valor que veamos en la alerta? Esa es la pregunta. Entonces intentémoslo. Es copiar este código e ir al guión de trabajo. Cónsul, ritmo ese abrigo adentro. Y cuando ejecutas el código, vemos indefinido a las alertas. Esta velocidad de punto es indefinida. Muy bien, veamos si podemos averiguar qué está pasando. Bueno, una vez más, tenemos esta velocidad variable privada y alertamos a esta velocidad de inicio. Bueno, cuando veo algo, eso es algo que pienso, propiedad de punto objeto. Entonces esta velocidad de punto no es lo mismo que la velocidad porque si quisiera velocidad, simplemente obtendríamos velocidad. Pero no obtenemos velocidad, nos ponemos indefinidos, y no estamos alertando a la velocidad. Estamos aprendiendo esta velocidad de punto. Entonces como hemos hablado muchas veces en su clase, ese script de trabajo esta palabra clave se refiere al objeto al que pertenece un método. Bueno, esta función de comida no es realmente, um, un método. ¿ O lo es? A lo mejor iss Volvamos a copiar este código y vamos a ejecutar el código. Y luego veamos qué pasa si escribimos Foo, ¿eh? Por lo que acabo de escribir fu en mi consola. Obtengo luce como el código de nuestra función. Se ve exactamente igual que el código de nuestra función. Bueno, resulta que, y si escribo window dot food, obtengo el código de nuestra función. Por lo que resulta que Fu es una propiedad del objeto ventana. Y la razón es porque estamos declarando que los alimentos en el ámbito global justo aquí estaban en el ámbito global, no estaban dentro de una función donde estamos dentro de una función aquí en las líneas 26 o 28. Pero la declaración de función real de la plena línea 25 está en el ámbito global. Entonces cuando creamos una función global, estamos creando una variable global. Y como discutimos hace unos minutos, una variable global también es una propiedad de los objetos de ventana. Por lo que en este momento la comida es propiedad del objeto de ventana. De acuerdo, entonces eso significa que la palabra clave esta se refiere al objeto ventana. Entonces cuando digo esta velocidad de punto, estoy pidiendo la propiedad de velocidad de los objetos de ventana. Por lo que alerta esto arranca velocidad será exactamente lo mismo que decir las líneas de velocidad de punto de la ventana de alerta 28 29 son exactamente lo mismo. Exactamente lo mismo. Entonces la situación es que no tenemos ah, propiedad speed on window No en este ejemplo. El ejemplo anterior lo hicimos. Pero aquí no lo hacemos porque esta velocidad es privada ahí mismo. En línea 26. Esa es una velocidad privada, pero la velocidad de punto de ventana no existe. Y si fuera a subir aquí y decir águilas de velocidad var, digamos 5000. Entonces copia este código y refresca la página y voy a acelerar ese código. Y ahora veo 5000. Cómo veo 5000 con la razón es porque ahora creamos una variable global llamada velocidad. Esta velocidad de punto es igual a este punto es velocidad de punto de ventana Así que ventana sí velocidad la velocidad global es 5000. Entonces en este caso, obtenemos un valor, que es lo que es bueno. Pero la pregunta original no implicaba una variable de velocidad global. Por lo que en este caso, en línea 28 esta velocidad de inicio o velocidad de punto de ventana es indefinida. Nunca definimos una velocidad de punto de ventana. Y eso significa que la alerta del 28 produce indefinido. No hay propiedad de velocidad de punto de ventana. 18. Cuando se "sentirán en la misma de la de código: ahora echa un vistazo. Por ejemplo D uh, donde dice, ¿Qué es esto en modo estricto? Entonces en esta situación, estoy haciendo algo tu 36 online de decir uso estricto. Y eso básicamente le dice al motor JavaScript para la ejecución de esta función, use el modo estricto. Y la diferencia aquí es que mientras esta función se ejecuta, vamos a estar en modo estricto para que el pensar el comportamiento que verás sea diferente en el cónsul. Copia este código. Está pegado en tu consola, y obtenemos no puede re velocidad de propiedad de indefinido. Entonces la velocidad entre la multa. Eso significa que el objeto del que estamos tratando de obtener una propiedad de velocidad es indefinido. Entonces esta esa velocidad no es que este punto Speedos bajo hallazgo es que esto es indefinido. Y la razón es que al usar un estado de ánimo estricto y JavaScript basado en navegador cuando estamos en modo estricto, no podemos acceder al objeto de ventana usando esto, um, desde una función global, es solo una de las características del modo estricto. Entonces voy a seguir fuera de modo estricto. Pero solo quería señalar que es importante saber que cuando estás usando el modo estricto , no puedes acceder al objeto de ventana usando esto dentro de una función global 19. Cuando se "sentirán en la misma de la de código - parte 4: De acuerdo, veamos el ejemplo E. El que se titula Comida ahora era constructor. Por lo que en línea 49. Tengo la función completa, pero pueden notar que he usado la F mayúscula cuando llamé Food, no sólo minúscula F Oh, sino Capitolio Foo. Ahora eso no cambia nada esencialmente, pero es una convención que la mayoría de los programadores usan, que quieres capitalizar la primera letra de una función cuando quieres que sea un constructor. Y sí quiero que me construyan porque en línea 56 no solo estoy ejecutando comida. Yo picé ain sheeting it. Estoy diciendo que Barbu es igual a comida nueva. Y si has trabajado con las funciones constructoras funk en todo script de trabajo, sabes que cuando en su lugar se comió un constructor, lo haces ejecutado por lo que fu será ejecutado. Pero es un poco diferente porque bar las barras de valor de ser la instancia de la clase de comida. La comida estaba actuando esencialmente como una clase aquí, y bar va a conseguir una instancia de la clase. Entonces dentro de nuestro constructor, creo una variable de velocidad a privada a ese constructor, y alerto esta velocidad de punto así que ejecutemos este código en nuestra consola y veremos qué sucede. Por lo que alerté, y me pongo indefinido. ¿ Por qué es eso? Bueno, si vuelves al código, will, will, mi primer pensamiento podría haber sido así de bien, creo esta variable de velocidad. Entonces cuando estoy en Stan, ¿ella comiendo comida? ¿ No debería la ejecución de productor de alimentos una instancia de alimento? Deberá hacerlo. Pero el problema es que se puede pensar que la palabra esto hace referencia, um, la instancia de la comida y sí. Es comida verdadera. El bar Esto es igual a barra, lo que significa que cuando en su lugar en forma para usar bar la palabra clave esta dentro del constructor preferencias la instancia que se está devolviendo para que eso sea cierto. Pero la velocidad no es propiedad del constructor. Es una variable, y esa es una de las áreas donde el contexto de alcance puede sentirse como lo mismo. Pero en este caso, no son mucho lo mismo. La velocidad es una variable cuando piensas variables, piensas alcance, pero en este caso, estamos intentando hacer referencia a A. Estamos tratando de hacer referencia a la propiedad speed de esta variable, pero de esta instancia pero la instancia no tiene una variable de velocidad. Tiene velocidad. No tiene una propiedad de velocidad como variable de velocidad. Eso esta velocidad de punto es esencialmente indefinida. Si fuera a decir, um veamos, eh, veamos retorno, um, Velocidad cinco 1000. Y luego alerto a Bardot velocidad. Debería funcionar. Entonces vamos a copiar este código y pegarlo y obtenemos 5000. El motivo por el que obtenemos 5000 es porque ahora la comida de clase sí tiene una barra de propiedad spread termina con propiedad speed. De hecho, si fuera a hacer ah, una consola durante lo haré, solo escribo barra en una en la consola. Veo que obtengo un objeto con una propiedad speed. Entonces en ese caso, funcionaría. Ahora, la instancia de comida sí tiene una propiedad de velocidad. Otra forma de hacer esto sería si quisiera mantener la alerta dentro del constructor. Podría decir food dot pro prototype dot speed equivale a, digamos, 10,000 solo para probar nuestro caso aquí. Entonces voy a refrescar la página y, uh, espera no debería decir que no. A ver, ahí lo tienes. Tipo de. De acuerdo, Así que vamos a refrescar la página. Y ahora obtengo 10,000 Y la razón es porque aunque no declaro una propiedad speed al crear el constructor, cuanto creo el constructor, creo una propiedad speed en el objeto prototipo. Ahora prototipado es otra vez Eso es Ah, eso es combustible para toda una clase de otra. Pero el punto aquí es que estoy extendiendo el constructor de alimentos aquí con le estoy dando un prototipo están dando la propiedad de puesta de velocidad en su objeto prototipo, lo que significa que cuando en su lugar ella comió. Foo Bar tendrá una propiedad de velocidad, por lo que esta velocidad de punto sí resuelve a 10,000. Entonces pero la pregunta original no tenía un prototipo, y es la razón por la que nos volvimos indefinidos es porque esta clase o constructor tiene una variable de velocidad pero no una propiedad de velocidad. 20. Cuando se "sentirán en la misma de la de código: ahora mira, por ejemplo, si el que se titula La comida es sólo una función de nuevo. Entonces ah Fu acaba de volver a ser una función. No es un constructor. Yo no mancho. Ella se lo comió. Y en línea 61 alerto velocidad igual a 100 o digo velocidad igual a 100. Y luego en 63 alerto esta velocidad de punto. Entonces copia ese código y refresca la página y pega ese código en tu navegador y obtenemos 100. Por lo que hasta ahora, en muchos de estos ejemplos nos hemos metido definidos. Pero en este caso obtenemos 100. Y la razón es que si recuerdas que al omitir la palabra clave var, termino con un global implícito. Entonces, una vez más, omitir la palabra clave var es prácticamente lo mismo que hacer esto, que también es lo mismo exacto que hacer esto, que también es lo mismo exacto que hacer esta línea 60 61 62 o todo lo mismo exacto . Pero sin importar Online 63. Al omitir la palabra clave var, creo un global implícito y creamos una propiedad en el objeto ventana llamada speed, lo que significa que Online 64. Cuando accedemos a esta velocidad de punto, obtenemos seis. Nos enfermamos, nos dan 100 porque básicamente estamos pidiendo ventana consiguió velocidad. Entonces este es un caso una vez más donde la línea entre el contexto de contacto de alcance puede sentirse difusa porque estamos creando una variable aquí en la Línea 62. No hay duda al respecto, pero estamos creando un global implícito e implicamos que los globales se convierten en propiedades del objeto de ventana en JavaScript basado en navegador. Por lo que aquí es donde su alcance. Pero de alguna manera también es contexto porque estamos llegando a la propiedad de un objeto, y podemos acceder a esto dentro de esta función, um, um, y hacer referencia al objeto ventana. 21. Cuando se "sentirán en la misma de la de código: en el ámbito en contexto parecen la misma sub carpeta. Abre el contexto de ámbito de archivo parece lo mismo para así como has visto un número de veces en la clase aquí. Estamos iterando a todas estas personas de ventas, y estamos usando el método cada cada uno en el cada aliado, y estamos creando una referencia al aliado o elemento de lista en particular. Entonces lo estamos haciendo creando una variable llamada elemento, y eso es igual a esto. Y como sabemos, esta devolución de llamada se ejecuta en el contexto del elemento de lista. Entonces ese tipo de tiene sentido estaban usando esta envoltura con Jake cansado y estamos estableciendo un artículo de pie igual . Y luego estamos diciendo Item, encuentra un botón de selección y luego estamos configurando el clic de una alerta para el manejador de eventos de clic para ese botón de selección. Entonces si miras el siguiente archivo, alcance y el contexto parecen iguales. Tres. Estamos logrando lo mismo que lo estamos haciendo de manera diferente. Donde conseguir un control de este segundo argumento que se pasa a la función de devolución de llamada llamada Dom Element, y lo estamos envolviendo con Jake cansado elemento de abastecimiento es igual a Dom Element Rapid Jake cansado. Entonces echemos un vistazo a lo que realmente es Dom Element. Por lo que de vuelta en cualquiera de las páginas Web. Ejecutar el ejemplo. Alcance bien, rodar al contexto de alcance, sentir lo mismo. Tres. De acuerdo, así que consigo un montón de salidas de consola, y sólo hay casi lo mismo. Pero se puede ver a su aliado persona de ventas cero ls persona de ventas. Uno también es persona a y así sucesivamente. Entonces lo que está pasando es en cada uno de esos casos estaban fuera poniendo un elemento dom. Entonces el punto aquí es que este elemento dom que se ve en la consola representa cada uno de los ítems de la lista en cada uno de los vendedores elementos Dom, aunque iterando sobre. Por lo que esta llamada de nuevo cuando se llama cada mensaje. El callback recibe dos argumentos. primer argumento es índice, que es el índice numérico del elemento, y el segundo argumento es el elemento en sí. Entonces en este caso, es como que siente que es una especie de donde el contexto de alcance se siente como lo mismo en que estamos creando una variable. Pero a lo que estamos configurando la variable es el elemento dom actual sobre el que estaban iterando , cual realmente es más una cosa de contexto porque es como cuando usamos la palabra esto antes . Es el contexto de este método. Fuera de esta función está el momento dominante que estamos iterando, que es dom elements. Entonces esta es una situación donde es tipo de alcance en contexto en la misma línea online 10 ítem es definitivamente una variable que alcance, pero entonces estamos estableciendo igual a un objeto, que es el contexto del cual o contexto en el que esta función se está ejecutando. Ahora, si miras el alcance del archivo en contexto en los mismos cuatro, estamos haciendo algo un poco diferente aquí abajo. Si miras, echemos un vistazo atrás a las tres otra vez y veamos cómo ejecutamos el toggle classmethod. Dijimos Persona de ventas subrayado Plus índice indexará una variable, por lo que estamos usando alcance aquí para conseguir un control del elemento actual. Por lo que la persona de ventas cero dice persona quiere que esta persona en así sucesivamente. Um, pero por ejemplo, número cuatro solo estamos diciendo que el ítem estaba usando el método de ítem que usamos aparece, que eso también es variable. Pero de alguna manera, es como donde el contexto de alcance tipo de tener esa línea difusa porque estamos estableciendo la variable igual al contexto en el que se ejecuta esta función. Entonces de alguna manera estamos usando alcance y contexto aquí al mismo tiempo. Se trata de un elemento variable es variable, pero ese elemento con variable elemento variable se establece en el contexto en el que se está ejecutando esta función . 22. Tomar mejores decisiones: discusión: Uno de los objetivos clave de este curso fue poder tomar mejores decisiones sobre nuestro código utilizando nuestro conocimiento de alcance y contexto. Entonces, al hacer eso, probablemente haya un par de preguntas que podrían venir a la mente primero. Por ejemplo, ¿cuándo debo apalancar el alcance y cuándo debo apalancar el contexto? Bueno, antes de que realmente puedas contestar esas preguntas, necesitamos pensar en una pregunta más importante, cuál es? ¿ Cuál es el problema que estás tratando de resolver ya que planeas tu código en cualquier momento dado? ¿ En qué se encuentra el tema, o qué? ¿ Qué estás tratando de lograr? Y probablemente vas a estar tratando de resolver problemas que se relacionan con, Ya sabes, el tipo de cosas que aprendemos en estos grandes libros que leemos anti patrones, cosas como código repetitivo o valores codificados duros o funciones hinchadas. Estos son solo ejemplos del tipo de problemas con los que no queremos toparnos como planeas y nuestro código. Entonces, en cualquier momento dado, una vez que tienes claro eso, el problema que estás tratando de resolver, entonces puedes ir a contestar esta pregunta, que es cuál es la herramienta adecuada para este trabajo. Y por supuesto, hay muchos tipos diferentes de herramientas. Hay herramientas para cada trabajo, pero necesitas averiguar cuál es la herramienta adecuada para el trabajo que tienes a la mano. Y una vez que hayas elegido la herramienta adecuada, entonces podrás empezar a planear tu código. Y decidir no debe apalancar el alcance. Debería Leverett contexto para este problema en particular. Entonces vamos a llevarnos un paso más allá y en realidad veamos algunos ejemplos de código para, ah, realmente tipo de entender lo que esto significa. 23. Tomar mejores decisiones: demostración: en tu carpeta Ejemplos. Abre la subcarpeta de planeación y echemos un vistazo al ejemplo de planeación uno. Por lo que tienes algún código que te debería parecer familiar. Um, iterando sobre la gente de ventas, y he configurado un montón de manejadores de eventos de clic. Te darás cuenta. Digo que tengo algún abrigo repetido. Entonces hagamos una búsqueda del código que digo se repite a estas dos instancias del mismo. Por lo que hay dos lugares en mi código aquí en la línea 27 línea 47 donde quiero la longitud de todos estos vendedores seleccionados. Entonces lo que eso significa es que, um, si vas a ejecutar el método de ejemplo encadenar, ahí es justo donde está funcionando la manzana, el todo el código. Entonces cuando yo, um, selecciono a los vendedores cuando voy aquí y hago clic en el botón eliminar seleccionado que borra todo propio, todos los vendedores que son seleccionados y lo sé porque cuando inspecciono cualquiera de esos aliados en particular, se puede ver que tiene la clase seleccionada. Esta tiene seleccionada una clase, y si eliminaría esa clase, ya no aparecería seleccionada. Entonces aquí estaba diciendo, Vendedores, Ally seleccionó longitud la longitud de todos esos elementos. Entonces hay dos casos en los que quiero saber la longitud de los aliados elementos seleccionados o cómo aliados Maney seleccionaron elementos que hay. Pero el problema aquí es que tenemos código repetido. Estoy literalmente escribiendo entre comillas, libra vendedores, espacio l punto seleccionado dos veces. ¿ Y qué pasa si cambio el elemento de persona de ventas? Vendedores I d Teoh ya sabes, vendedores. Todo lo que diga Es solo, ya sabes, voy a cambiar por alguna razón el nombre de eso d sietes. Tengo que ir a cada uno de estos y tengo que ir así, y eso es un negocio desordenado. No queremos hacer cosas así. Es extremadamente difícil de manejar. Y podría haber decenas o cientos de archivos en nuestro código donde eso es o que el literal yo d ha estado configurando. No queremos eso. Entonces otra forma de acercamientos sería, también si nos fijamos en explicar ejemplo a nosotros establecemos una variable vendedores. Por lo que este signo variable de dólar vendedores representa el elemento vivo Dom Dom. Este elemento esta variable aquí representa este elemento justo aquí. La idea de las personas de ventas. Entonces ahora tenemos una referencia a ese elemento. Por lo que no tenemos que seguir constantemente reescribiendo esto. Y si renombramos esto Ah, yo d en nuestra marca hasta ah, ya sabes, gente de ventas guion todo. Entonces podríamos simplemente hacer ese cambio aquí una vez y pequeña cascada a nuestro código. Entonces eso está funcionando mejor. Porque ahora solo estamos diciendo signos de dólar vendedores punto encontrar l Seleccioné. Y lo mismo aquí que es un poco más eficiente, Pero aún tenemos algún código repetido. Todavía estaban literalmente escribiendo l i punto seleccionado y l me seleccionaron. ¿ Y qué pasa si hacemos esos aliados dibs? O que si cambiamos de clase seleccionada a soy seleccionada para que s'more retipando, um , yo , um, seleccionado y tengo que tomar ese cambio y lo voy a hacer aquí abajo, y eso es una vez más desordenado negocios. No queremos hacer cosas así. Entonces creo que hay una mejor manera de hacerlo. Si vamos a plantar Ejemplo tres. Se puede ver que lo que hemos hecho aquí es que tenemos nuestro signo de dólar. Variable de vendedores muy. Y luego tenemos una función de método llamada get salespeople length y que devuelve la longitud de todos los vendedores seleccionados. Por lo que estamos diciendo robó signo vendedores punto hallazgo estaban usando el método de hallazgo de este objeto pasando a un aliado. Y ah, en realidad, esto está consiguiendo que toda la gente de ventas no se alargue. Entonces, ¿cuánta gente de ventas hay? Y luego queremos saber el número de personas de ventas seleccionadas que hay. Entonces estamos diciendo vendedores punto encontrar L. Me seleccionaron. Entonces aquí es solo encontrar l. una longitud de punto. Aquí está encontrar l a punto longitud seleccionada, pero en ambos casos estaban ejecutando una función de esa manera. Cuando queremos saber el número de personas de ventas, solo llamamos a la función, obtenemos longitud de los vendedores, es solo así de simple. Y luego queremos saber el número de vendedores actualmente seleccionados. Simplemente llamamos a la función, obtener longitud de los vendedores seleccionados. Eso lo hacemos dos veces, y de esa manera, si algo cambia en nuestro código, si cambiamos esta idea a gente de ventas, no importa. Hacemos ese cambio ahí mismo, y eso es todo. No nos preocupamos por ello. Y si cambiáramos los, um, los Aliados que tienen a los vendedores a dibs. Podríamos hacer este cambio ahí, y no tenemos que hacerlo en ningún otro lugar. O si nombramos. Si nos nombraran el que. Si cambiamos el nombre de la clase que indica que algo está seleccionado para que estoy seleccionado, solo hacemos este cambio aquí y ya está. Todo el mundo simplemente llamando a esta función. No se preocupan por esto. Están llamando a esta función disfunciones, cuidando cómo ese conjunto para que pudieras re factorizar todo el día. Y realmente podríamos deshacernos de todas estas pequeñas reglas de cuerda que estamos usando nuestro co porque tenemos un montón de ellas. Y esto es todo de nuevo un tipo de negocio desordenado porque esto son las cadenas de aire que tenemos que cambiar mi mano si alguna de estas definiciones cambia. Entonces el punto principal que estoy haciendo aquí es que queremos. Ahora que entendemos la diferencia de alcance en contexto, podemos hacer cosas como crear un alcance variable que podamos usar a lo largo de nuestro código. O podemos hacer cosas como crear métodos de aprovechamiento en objetos, contexto para re factorizar un código o código de planificador de una manera que sea más inteligente y fácil de administrar. 24. Un poco sobre el contexto: Hablemos un poco más de contexto. Dejé que la portada dos cosas primero, cambiando contexto y luego segundo esto versus esto envuelto con Jake Weary. 25. Cambiar contexto con .call() y .apply(): Entonces descubramos lo que significa cambiar de contexto en JavaScript. Anteriormente, aprendimos que el contexto se refiere al objeto al que pertenece un método, pero a veces podemos querer hacer que un método piense que pertenece a un objeto diferente. Por ejemplo, cuando el lado izquierdo de la pantalla, tengo un objeto sostener comida en el lado derecho de la pantalla. Tengo un objeto llamado Bar. Cada uno de estos objetos tiene una propiedad de saludo, y cada uno de estos objetos también tiene una propiedad griega. Ahora una vez más y JavaScript cuando una propiedad es una función, se llama método. Entonces en cada caso, el método griego devuelve este saludo bursátil. Entonces si ejecutara la avaricia de punto de comida, me pondría yo estoy lleno. Y si me hicieran ejecutar saludo Bardot, obtendría soy Bar, y en cada caso, el método griego interactúa directamente con la propiedad saludo de ese objeto. Cada método de saludo se ejecuta en el contexto de su objeto. Food dot avaricia se ejecuta en el contexto de la comida, y Bardot saludo se ejecuta en el contexto de bar Bueno, hay una manera que debilita saltar y podemos cambiar el contexto de cada método. Se llama cambio de contexto, por lo que podemos hacer que el método de saludo de punto de comida. Piensa que pertenece al bar y podríamos hacer el método de saludo Bardot. Piensa que pertenece a la comida porque se puede ver aquí La comida está de acuerdo, ahora está a la derecha. Tiene esa caja azul. Y cuando ejecuto la avaricia de punto de comida, consigo soy pedir prestado uno. Ejecutar la avaricia de Bardot. Entiendo soy comida. Esto puede parecer un poco confuso, un poco extraño, así que vamos a saltar a algún código y podemos ver cómo realmente funciona esto. En tu carpeta Ejemplos. Abre el contexto de carpeta y luego abre el carbón de contexto de archivo y aplico a Tengo dos objetos aquí, full y bar, y ambos objetos tienen una propiedad de saludo, y ambos objetos tienen un método de saludo en ambos casos acuerdo que devolvió el valor de ese objeto saludo propiedad. Entonces si ejecutaría comida punto griego, debería conseguir soy comida. Y si ejecutaría Bardot Griego, debería conseguir soy bar. Asegurémonos de que esto funcione como esperamos. Entonces copia ambos de esos objetos. Payson, tú consola JavaScript y Ahora ejecutaré food dot green y obtengo soy comida. Y si ejecuto, ejecuto la avaricia de Bardot, consigo soy barras. Eso es más o menos lo que esperamos que suceda aquí abajo en la Línea 17. Copia este código y ejecútalo en tu consola JavaScript. Entonces algo bastante raro sucedió aquí. Ejecuté comida, Doc saludo y tengo soy Bar, lo cual realmente no tiene sentido, pero aquí está pasando un poco más, dije. Grado alimentario dot call bar. Lo que está pasando es que estoy usando el método call para cambiar el contexto del food doc. Gran método. Entonces los impuestos del pecado. Es objeto dot método dot call new context. Por lo que la comida Dockery llame, pero hazlo en la salida en el contexto de bar. Y si yo dijera bar Dockery dot llame, uh, comida que obtendría. Yo soy comida. Estoy ejecutando Bardot Greek, pero me estoy subiendo a la comida porque estoy diciendo que Bardot está de acuerdo. Llamar en el contexto de la comida para que suceda con el método de llamada es que tomas temporalmente un método y lo mueves al contexto de otro objeto. No es literalmente lo que está pasando, pero efectivamente es lo que está pasando. Entonces cuando digo comida comida acordó Una barra de llamada ejecutando este método. Pero lo estoy haciendo. Piensa que pertenece a este objeto. Y cuando digo Bardot griego call foo estoy ejecutando grado de bar, pero lo estoy haciendo. Piensa que pertenece a la comida sólo por el momento. Entonces si copia aquí esta línea 20, realidad es la línea 18. Si reabro este archivo Así línea 18 y corro que me sale lo mismo. Si ejecuto food dot saludo, aplico y bar me pongo soy bar porque cambié el contexto de la comida. Acordar a bar ahora la llamada y aplicar método hacer exactamente lo mismo. La única diferencia es pasar argumentos. Digamos que el acuerdo alimentario que esperaba argumentos A y B y yo quiero pasar esos Bueno, si yo quisiera hacer eso con convocatoria, pasaría los argumentos en una lista separada por comas. Y si quería hacer eso con apply, pasé los argumentos como una matriz. Por lo que con comida pactó una llamada. Yo le paso el contexto de nuevo contacto. Nos limitamos a bar coma y luego todos mis argumentos y con comida estuvieron de acuerdo que se aplican. Lo paso barra y luego una matriz de cualquier argumento. Pero en ambos casos, los métodos call y apply permiten cambiar el contexto en el que se ejecuta un método. 26. Cadena de métodos de - debate: Entonces en JavaScript es un concepto llamado método encadenamiento. En realidad no es específico el script Java. Encontrarás que este patrón en una serie de idiomas, pero es algo que es muy bueno estar al tanto, y también te puede ayudar a escribir código que sea un poco más expresivo. Entonces, en el lado izquierdo de la página, tengo este objeto llamado APP, y este objeto APP tiene tres métodos y se inicia y configura. Realmente no nos importa lo que hagan. Fingamos que hacen algo mágico y sorprendente. Pero lo principal es que tenemos un objeto con tres métodos, y en el lado derecho de la página, ejecuto esos métodos diciendo app dot in it app dot start y app dot set up. Para que todo tenga sentido perfecto. Parece una manera bastante buena y sólida de ir. Pero ¿y si, además del funk del del, estos métodos haciendo lo que sea que hagan? ¿ Y si todos regresaran un valor muy específico? ¿ Y si todos regresaron esto? Bueno, sabemos que en JavaScript la escritura esta palabra clave se refiere al objeto al que pertenece un método Así que en cada uno de estos casos al devolver APP, método unit devuelve app, el método start devuelve AP y un conjunto de método devuelve aplicación. Entonces eso significa que del lado derecho podría cambiar la forma en que estoy escribiendo mi código. Podría hacer algo como esto donde digo app dot in it dot start dot set up. Y la razón que funciona es porque cada vez que ejecuto uno de estos métodos, es la aplicación de devolución que me permite ejecutar directamente otro método en ese objeto. Entonces cuando digo apt out in it, eso regresa directamente, que me permite decir dot start y luego el método start devuelve app que me permite decir dot set Así que otra forma de ver esto sería Piensa en la conexión directa entre esto y la aplicación. Ya sabes, en el método de la unidad, estoy devolviendo esto, lo que significa que estoy regresando app la cual me permite llamar directamente al método de inicio. Y luego cuando llamé a un método de inicio, estoy devolviendo esto, lo que me permite llamar al método de configuración, y eso me permite incluso podría tal vez Shane otro método aquí y creó un método comida fría y luego, um, bar ético y soy topacio ético y solo podría cambiar todo el día. Pero este patrón, si miras el código de la derecha, se ve bastante diferente a decir apt out, ¿no? App dot start app que configuró el código tal vez un poco más expresivo. Y si eres realmente creativo, puedes escribir código que tal vez incluso sea más fácil de manejar. Entonces si no es obligatorio, que hagas entrenamiento de métodos. Es simplemente un patrón que es bueno estar al tanto, y podría ser muy útil en un momento. Entonces, veamos si podemos obtener una mejor comprensión del encadenamiento de métodos si realmente miramos algunos ejemplos de código. 27. Cadena de métodos - demostración: en la carpeta Examples, Abre la subcarpeta contextual y mira el archivo llamado Method Chaining. Ahora aquí tengo toda la aplicación, pero he cambiado drásticamente el código. Um, ¿dónde está antes? Acabamos de tener Ah tipo de Jaco Rico acaba de presentar de una manera más procesal. Aquí he creado un objeto llamado APP y luego he creado diferentes métodos llamados en él y Start y Dom set up y etcétera. Por lo que el código está mucho más orientado a objetos. Es un poco más limpio, fácil de leer usuario para manejar, pero he hecho algo aquí abajo que es un patrón que quiero solo discutir. Por un par de minutos. Estoy haciendo algo llamado Method Training, así que estoy llamando al método de configuración Dom. El método de manejador de eventos bind, Recargar página, el bind, el método el bind, de manejador de eventos seleccionado lead y el evento de elementos de usuario de compra método de Taylor. Pero en cada caso, no estoy diciendo app dot ese método como esperarías. Sólo estoy diciendo app dot app dot dom configurar dot comprando recargables blah dot bond Creible, uh dot Bind. Entonces estoy llamando a app, pero luego solo estoy llamando a diferentes métodos en app. Entonces, ¿cómo es que puedo saltarme usando app dot app dot apt out cada vez? Bueno, echemos un vistazo a cada uno de estos métodos. Echemos un vistazo al método dom set up aquí abajo. Por lo que Dom set up tiene una línea interesante. Hace un montón de cosas de las que realmente no estamos preocupados ahora mismo, pero devuelve esto Y si recordamos, ¿cuál es el script Java? Esta palabra clave se refiere al objeto al que pertenece un método y el método de configuración Dom pertenece a la aplicación. Objetos de este método devuelve esto o devuelve aplicación. Entonces cuando ejecuto este código aquí en Londres 21 aquí termino con app así que simplemente podría dar la vuelta y llamar a los binds Reload Page método de manejador de eventos. Y luego cuando ese método ejecuta el manejador de eventos de página de recarga de compra, devolví esto. Por lo que ya que ejecutar esa función devuelve aplicación, puedo dar la vuelta y llamar comprar eliminar manejador de eventos seleccionado y así sucesivamente. Entonces, si cada método devuelve el objeto de la aplicación, eso significa que puedo dar la vuelta y llamar a otro método en ese objeto. A esto se le llama método encadenamiento y no cambia efectivamente tu código en cuanto a lo que hace tu abrigo. Pero te permite escribir código que puede ser más fácil de leer y un poco más expresivo . Porque si alguien más escribí este código y lo heredé, lo primero que me Seeiso esto en Method tiene un número de esta app. Objeto tiene una serie de métodos y los estoy llamando a todos aquí. Y todos estos métodos devolvieron el objeto app, eso es seguro. No hay duda en mi mente porque sé que no podías hacer esto. No podías método Shane así si estos métodos no devolvieron la aplicación, el encadenamiento de objetos y métodos es realmente fácil. Es solo que solo necesitas devolver el objeto al que ese método pertenece de cada uno de los métodos que te permiten encadenar métodos fuera de una sola referencia a un objeto 28. "esto" vs $(este): Tomemos un momento para discutir la diferencia entre esto versus esto Envuelto con Jay Query. Ahora bien, si no tienes interés en Jake donde podrías sentirte libre de saltarte esta conferencia, Pero creo que la mayoría de los desarrolladores de Front y Web con los que he trabajado hasta cierto punto con J Query y probablemente trabajen de forma regular. Definitivamente vale la pena tomarse un minuto para discutir la diferencia entre estos dos Ríos sentados y algunos de los problemas que puedes encontrar en tu carpeta Examples. Abre la subcarpeta Contexto y luego abre el archivo de contexto este versus éste. Entonces aquí estoy iterando sobre cada una de las personas de ventas don elementos o los elementos de lista en una nueva generación del cada método. Estoy creando un manejador de eventos de click y en el clic de un manejador, estoy diciendo este punto hide. Entonces, primero ejecutemos el código y veamos qué obtenemos. Entonces ve a mostrar ejemplos y contexto. Esta prisa es ésta. Por lo que ahora ejecuté el código y hago clic en el botón seleccionar y obtengo un error este punto Ocultar no es una función. Muy bien, ¿cuál es el problema? Ya veremos si podemos averiguarlo. Entonces lo primero que quiero hacer es deshabilitar o comentar a lo largo del número cinco. Ya que eso está lanzando un error, realmente no nos va a ayudar. Y luego pegaré en las declaraciones dir de consola. El 1er 1 es que estoy inspeccionando el guión laboral. Esta palabra clave en el 2do 1 es Estoy esperando el script de trabajo, esta palabra clave envuelta con Jay Query. Entonces vamos a guardar ese archivo y luego sólo refrescaremos la página y hacemos clic en el botón de selección, y supongo que consolas sus declaraciones. Echemos un vistazo al 1er 1 El 1er 1 es un elemento dom. Se trata de un elemento dom JavaScript crudo, y el 2do 1 es un elemento dom envuelto con Jake cansado. Entonces la diferencia es, el 2do 1 es el 1er 1 envuelto con Jake Weary Hope que tiene sentido. Pero para el 1er 1 vamos a desplazarnos un poco hacia abajo y podemos ver que hay una propiedad de estilo , y esa propiedad de estilo tiene una propiedad de display en exhibición. Es el cuervo, establecido en una cuerda vacía. De acuerdo, entonces vamos a hablar de eso en un segundo. Entonces la respuesta corta es que este es el elemento Dom crudo que actualmente se está iterando sobre que estaba en este caso se hizo clic. Dónde está esto Representa ese elemento dom envuelto con Jake Weary. Entonces es, um es como tomarte y ponerte en un abrigo. Sigues siendo tú, pero estás envuelto con un abrigo. Um, así que veamos el, um si miras el archivo, contacta esto versus esto a lo que voy a hacer es decir que este punto estilo que pantalla es igual ninguno. Entonces si ejecutas contexto esto versus esto a y luego haces clic en el botón seleccionar, puedes ver que el botón desaparece. Y si hago clic en otros botones, simplemente desaparecen. ¿ Por qué es eso? Bueno, si recuerdas que hicimos el cónsul dot dir este Vimos que esta palabra clave this jobs go, que es un elemento Dom, tiene una propiedad de estilo y una propiedad de estilo tiene una propiedad de visualización, y solo lo estamos configurando en monjas. El punto que estoy haciendo aquí es solo para ilustrar que el JavaScript esta palabra clave dentro de este manejador de eventos click es solo un elemento dom raw. No tiene nada que ver con Jay Query. Si vamos a contactar esto versus estos tres uh, algo un poco diferente es que estamos diciendo esto envuelto con Jake. pantalla de puntos estilo punto cansada es igual a monjas Veamos cómo funciona eso. Entonces si vamos a mostrar ejemplos de código contexto, este versus es tres y luego hacemos clic en el botón de selección. Obtenemos un error no se puede establecer la visualización de propiedades de indefinido. Y eso se debe a que este rapero Jay Query no tiene una propiedad de estilo. Recuerda, es el JavaScript, esta palabra clave o es el elemento dom raw, pero está envuelto con J. Crew, por lo que tiene diferentes propiedades y métodos. Si abres contexto, esto versus es cuatro. La diferencia es que ahora estamos viendo este punto alto. Entonces si ejecutas contexto, este Versace es cuatro y luego selecciona el botón. Desaparece y no hay error. Y eso es porque Jake Weary o este rápido Jake Weary, sí tiene un método de ocultar. Entonces lo principal a tener en cuenta es que el JavaScript, esta palabra clave por sí misma, inclinado dentro de un manejador de eventos click es solo el elemento dom raw, uh, javascript. Y tiene cierto conjunto de propiedades y métodos. ¿ Dónde está esta balsa con Jay Query? Ese es un objeto de consulta J y Básicamente está tomando este objeto y envolviéndolo dentro de J Query, lo que le da diferentes propiedades y métodos. Entonces podrías estar pensando, Bueno, yo uso una consulta y uso este rapero Jay Query, y está bien. Bueno, hay algunas situaciones cuando Jake, vamos a devolver esto. Y crees que va a ser este rap con Jake cansado como cuando estás creando un enchufe J coury . Hay algunos escenarios difíciles, Así que el 99.9% del tiempo, estarás lidiando con este borrador con Jay Query, y eso está todo bien. Pero dos cosas. Uno. Es realmente bueno entender la diferencia y a ello va a salir. Va a haber un momento en el que crees que estás consiguiendo el uno y estás consiguiendo el otro o quieres convertir uno a otro, y eso está todo bien. Pero sólo puedes ir por ese camino si realmente entiendes el diente. La diferencia entre estas dos cosas 29. Un poco sobre la solución de problemas: antes, discutimos la importancia de entender un ámbito y contexto rutinarios diferentes con respecto a la solución de problemas. Entonces ahora que tenemos una comprensión realmente sólida de la diferencia entre ambos, aplicemos ese conocimiento y algunos ejemplos de código y veamos cómo puede ayudarnos a resolver problemas . 30. Solución de problemas: en la carpeta Ejemplos. Abre la subcarpeta de solución de problemas y veamos un ejemplo de solución de problemas uno. Entonces aquí voy a reiterar sobre todas estas ventas gente lista artículos, y lo estoy haciendo en especie de soy una especie de vieja escuela y que estoy creando una variable de ojo y poniendo una referencia a la venta. El listado de elementos en la lista de vendedores dom elementos mediante el uso del documento un selector de consulta todos. No es particularmente elegante, pero hay una razón por la que lo estoy haciendo de esta manera. Así que creé un bucle de cuatro, que de nuevo es sólo una especie de forma realmente antigua de iterar algo. Y dentro de ese bucle de cuatro, busco la referencia de creador a la persona de ventas. Por lo que digo var artículo es igual a ojos de persona de ventas. Entonces primero va a ser persona de ventas cero persona de ventas, una persona de ventas a y así sucesivamente. Y entonces estoy diciendo ítem, encuentra que thes select botones encontrarán un botón de selección para ese elemento. Y luego configuré un manejador de eventos de click para ese elemento. Entonces al final del usuario hace clic en ese botón seleccionar, voy a usar esta Ah, variable fina como variable de ítem para encontrar el botón de selección y mostrarlo primero voy a ocultar el botón de selección mostró un botón de aversión. Alternar una clase seleccionada. Entonces vamos a ver cómo nos hacemos aquí. Voy a ir a mostrar ejemplos e ir al ejemplo de solución de problemas Número uno. OK, así que ejecuta ese código. Y luego hice clic en la primera pieza. Primero seleccionar botón. Entonces el diesel es borra como el botón muestra el seleccionado el botón de selección, y yo hice clic en uno de distancia. Pero no estoy viendo el botón de seleccionar para cada elemento de la lista, y no es toggle ing. La clase seleccionada del lado izquierdo no se está poniendo verde como esperaba, así que si alejamos un poco, quiero mostrarles algo realmente raro. Eso está pasando aquí. Al poder ver lo que pasa, hago clic en cada botón de selección. El último elemento de la lista es toggle ing. Se va verde y el verde no verde, y no son verdes. Entonces por alguna razón, cada vez que hacemos clic en un botón de selección e teniendo un par de problemas, y el principal problema es que no estamos viendo el botón de selección para ese ítem, y el último elemento de la lista es toggle ing, que no es lo que queremos. Nosotros queremos el yo soy que estamos dando click para ser Tongling. Entonces está durmiendo. Averigua el problema. Pues bien, la primera pregunta que necesitamos hacernos es Es esto un problema de alcance o un problema de contexto? Siempre la pregunta más importante. Entonces estoy pensando en las cosas, y estoy pensando, Bueno, lo funky que estaba pasando fue el último elemento de la lista fue tozando, pero ninguno de los otros lo fue, Y estoy iterando sobre una lista Estoy usando una variable que cuenta hacia arriba. Empecé cero y sube al valor de las ventas gente que longitud o te dice sin longitud menos uno. Entonces estoy pensando que bueno, si el último Si yo es incremental y solo el último elemento es toggle ing, entonces tal vez haya un problema con I. Y yo, um, es variable, eso es para seguro. Entonces cuando pienso variables, pienso alcance. Entonces, ¿por qué no hacemos esto? Uh, pongamos una consola. Ah, declaración del consejo, Insider click manejador de eventos iba a salir. Ponga el valor de I. Así que estoy pensando que en cada click, debería mostrarlo si hago clic en el primer elemento de la lista debería ver que sabes que igual cero. Si hago clic en la segunda agencia Element I igual a uno Si hago clic en el noveno elemento en U C, I igual nueve y así sucesivamente porque este manejador rápido de eventos está haciendo referencia, Ya sabes, creamos este objeto de ítem haciendo referencia a los vendedores I Así que nosotros definitivamente hay que saber que estamos obteniendo el valor correcto de I para cada click. Entonces vamos a refrescar la página y ver cómo nos hacemos. Entonces voy a empezar a hacer clic y cuando haga clic en cada puesto y me di cuenta de que solo dice igual a 10 Cada vez que igual a 10 estoy pensando que debería decir que igual a cero. Yo igual a uno. I igual a dos iguales a tres. Pero solo yo igual a 10. Y tipo de línea con lo que estamos viendo, que es el último ítem de la lista es alternar ing no el ítem estaba haciendo clic con el último ítem de la lista. Entonces estoy pensando que no es lo que creemos que iss y resulta que es correcto, porque lo que pasa es a pesar de que donde estamos iterando, voy de 0 a 9. El problema es que este manejador de eventos de clic podría suceder. Ya sabes, la adoración ocurre en, ya sabes, microsegundos pero milisegundos, pero el clic de realzar al usuario podría hacer clic en el botón en un minuto o 10 minutos o 10 horas. Pero ese dedo de referencia no ojos no cobrados con cada generación de esta lista. Todos se apagan, y cuando empiezas a hacer clic en los botones, yo tengo 10. Entonces necesitamos una forma de protegerme o crear una versión con ámbito de I. Así que si volvemos a la página y ejecutamos el ejemplo de solución de problemas Número dos y empezamos a dar clic , creo que notarás que todo funciona exactamente como se esperaba. Si haces clic en un elemento, el botón de selección muestra y tacos verdes y el último elemento solo se comporta de esa manera si haces clic en él. Entonces estamos consiguiendo el comportamiento que esperábamos. La pregunta es ¿por qué? Bueno, la razón que sucedió es porque si miras el ejemplo de solución de problemas a lo que hicimos fue que usamos una expresión de función invocada inmediata o una función inmediata aquí, y obtenemos este ítem, lo pasamos en la función, y luego tenemos nuestro código. Entonces básicamente nuestro código obtiene una versión de ámbito privado de ese elemento, y eso conserva eso cuando el elemento se hace clic en el botón de selección. Tenemos yo cero yo uno yo dos o tres ahora no quiero meterme demasiado en funciones inmediatas y cierres, porque definitivamente eso es cosas en las que podríamos tener toda una clase. Pero el punto que estoy haciendo aquí es que nos hicimos la pregunta. ¿ Es esto un problema de alcance o un problema de contexto? Y a través de un poco de lógica, determinamos que era un problema de alcance y eso nos permitió perforar rápidamente y averiguar dónde estaba ocurriendo el problema y cómo resolverlo, aunque no tuviéramos la respuesta de cómo resolverlo en este momento, al menos averiguando cuál es el problema. No fue un problema de contexto. Fue un problema de alcance. Y eso es lo que es realmente importante en este caso, fue determinando que para este ejemplo, este era un problema de alcance y se resolvió creando la versión con alcance adecuado de I o de este objeto de ítem al que queríamos pasar nuestro manejador de eventos click 31. Solución de problemas de contacto: abrir el archivo de solución de problemas Ejemplo. Tres. Entonces aquí he creado un objeto llamado App, y este objeto APP tiene dos propiedades. El 1er 1 es un método llamado Mostrar Eliminar seleccionado y que solo muestra que eliminar el botón ah seleccionado . Y el segundo método se llama vendedores Ally it aireador. Y eso se usa como un er iterado para cada aliado de persona de ventas. Por lo que aquí abajo recordando el cada método en los vendedores. Ally. Entonces esto sucede 10 veces, y cada vez que sucede, lo estamos pasando app que los vendedores lo aireadores. Por lo que esto se va a ejecutar 10 veces. Y cuando se ejecuta cada uno en cada ejecución estamos configurando. Ah, haga clic en manejador de eventos para ese botón de selección de elementos de la lista. Entonces vamos a ejecutar el ejemplo Número tres y ver cómo nos hacemos así que solución de problemas ejemplo Número tres. OK, así que ejecutamos el código y luego voy a seleccionar uno de los botones y me sale un error. De acuerdo, así que echemos un vistazo a este tipo de error er, esto se detuvo. Mostró el plomo seleccionado no es una función. Bueno, ¿cuál es la primera pregunta que queremos hacernos cuando solucionemos los problemas? No nos preguntaremos. ¿ Es un problema de alcance? ¿ O es un problema de contexto? Y tengo que decir que cada vez que veo el JavaScript, esta palabra clave en un error, casi siento que es un regalo muerto. Es que es muy improbable. No es un problema de contexto, porque veo la palabra esto. Entonces no, podría ser alcance. Pero voy a ir con contexto en este porque veo que esta palabra clave Así que, um, cuanto a por dónde empezar, creo que sólo voy a copiar este código. Y luego cuando vaya a nuestro código, no voy a hacer es buscar esa pieza exacta de código y ver a dónde nos lleva, y nos lleva la línea 22. Entonces creo que ahí es donde nuestro problema al menos está empezando por ahí. Entonces, ¿por qué no comento esa línea de código, evitar que el problema suceda, y entonces lo que haré es pensar Bueno, si el problema es, se detuvieron. Mostrar eliminar seleccionado. Tenemos que saber más sobre esto. ¿ Qué es esto? En línea 22. Bueno, voy a poner un do a cónsul tierra aquí, y podemos inspeccionar esto sólo para una especie de averiguarlo. Es esto realmente lo que pensamos ISS Y recuerda, cuando vemos la palabra clave esto pensamos contexto, también lo es el contexto. De lo que creemos que es en línea. 22. Entonces guarde eso y volvamos atrás y refresquemos la página y luego haga clic en el botón de selección. Y veo algo aquí en la consola, etc. Pero no seleccionar. Entonces esto me parece un elemento dom. Es decir, veo propiedades como niño sabe y Niños y lista de clases y, um, esta propiedad de estilo. Entonces este es un dominó él. De hecho, es el elemento al que se acaba de hacer clic. Entonces eso significa que estoy pensando en línea 22 que este el contexto es este objeto de la app. Y yo sólo podría llamar a este truco de ventaja de hombro seleccionado. Pero resulta que este 22 en línea en realidad resuelve al botón que acababa de hacer clic . Este botón aquí mismo y eso tiene perfecto sentido porque este es el manejador de eventos click , y el manejador de eventos click se ejecuta en el contexto del momento en el que se hizo clic. Entonces resulta que esto no es lo que asumimos que era. El contexto es diferente al que pensábamos que era. Nos enteramos de eso haciendo suciedad de consejo, así que necesitamos arreglar eso. Entonces echemos un vistazo al ejemplo de solución de problemas. Número cuatro. En primer lugar, vamos a ejecutarlo y ver cómo funciona. Entonces si baja el ejemplo de solución de problemas, Número cuatro ejecuta ese código y hacemos clic en seleccionar. Y en cada caso, cuando hacemos clic en el botón de selección, el botón de selección desaparece. De selecto muestra y el elemento lo alterna las clases seleccionadas. Todo funciona como esperábamos. Vamos a averiguar por qué. Bueno, ¿qué pasó en mi número? En la solución de problemas? Ejemplo Fours Online 22. En lugar de decir este pensamiento show delete selected, dijimos APP no debe mostrar delete selected. Y la razón que funciona es porque APP es una variable global on por léxica. Alcazar esta función es la función de devolución de llamada tiene acceso a las variables definidas fuera de ella. Se puede ver fuera de sí mismo. Por lo que solo hacemos referencia app en lugar de esto y decimos app que muestran eliminar seleccionado y funciona bien. Ahora, parte de la forma en que arreglamos esto es si recuerdas un ejemplo. Número tres. Acabamos de pasar una aplicación de punta de referencia que los vendedores lo airean a cada iteración de vendedores aliado. Pero aquí ejemplo en antes una de las cosas que también hicimos es que pasamos una función de devolución de llamada aquí y luego ejecutamos en ese Vendedores iterado. Y esa es también una forma de ayudar a resolver el problema. Porque ahora app que los vendedores lo aireador no se está ejecutando en el contexto del botón sólo se está ejecutando. Entonces ¿y qué tipo de suena raro? No quiero meterme demasiado en eso. Pero el punto que estoy haciendo aquí es que cambiamos el contexto en el que app que los vendedores, se está ejecutando aireador. Y también simplemente hacemos referencia a la variable global app aparece Teoh resolver nuestro problema. Ahora si miras el ejemplo en cinco, hay otra forma en que podríamos hacerlo ¿cuál es? Ponemos una referencia a esto creando una variable que me llamó y aquí abajo en la línea 21 me referimos . Entonces lo que pasa es que una vez más cambiamos el contexto en el que se está ejecutando la app que los vendedores lo aireadores que se están ejecutando ahora en el contexto de app. Entonces eso significa aquí arriba tenemos referencia a la variable app um, pero podemos referirla por esto, ejemplo, de yo iba a un consejo Durst declaración aparece en esta línea en la línea 17. Podemos ver qué es esto en cada ejecución de disfunción. Entonces voy a ir al ejemplo de solución de problemas. Número cinco. Ejecuta eso y obtengo 10 objetos de mi consola y cada objeto es idéntico. Es el objeto de la app. Tiene que mostrar eliminar el método seleccionado y el método iterado de los vendedores. Son el mismo objeto cada vez. Y la razón por la que vemos eso es porque cuando ejecutamos su tiempo, cada vez que se ejecuta su función, este 17 en línea resuelve a la aplicación. Y eso es bueno. Nos gusta eso porque entonces podemos establecer una referencia a esto que es yo crear variable. Y esta función puede ver fuera de sí misma por el alcance léxico. Por lo que podemos decir que mostró borrar seleccionado. Ahora esto es un poco hacky. Y si has descubierto el rescripto ECC 2015 quizás sepas por ahora que las funciones de flecha gorda buscaron esencialmente ayuda para resolver este problema. Um, así que eso definitivamente es tema para toda una clase de otra. Podemos meternos en fuego de funciones. Pero por ahora, el punto que estoy tratando de hacer es que queremos dedo del pie en problemas disparando nuestros problemas. quería camino. En primer lugar determinar es si se trata de un problema de alcance o de un problema de contexto. Y luego una vez que conozcamos la respuesta a esa pregunta, podemos especie de perforar y utilizar diferentes técnicas para resolver el problema. Pero saber qué tipo de problema es realmente hace una gran diferencia en cuanto a averiguar cómo vas a ir a averiguar dónde empezó el problema y cómo resolverlo ? 32. Proyecto de clase: antes de irnos, me gustaría tomarme un momento para hablar de nuestro proyecto de clase. Este proyecto de clase viene en dos partes. La primera parte es construir dinámicamente el equipo de ventas de Acme Travel, y la segunda parte es volver a factorizar el ejemplo. Código de página web. Hablemos de la Primera Parte. En primer lugar, construir el acto. Viajamos equipo de ventas dinámicamente. Entonces en este momento la página web de ejemplo que has visto durante la última hora o así es tiene HTML para el equipo de Travel Acme Travel Sales que HTML es duro codificado índice teatral punto html Archivo tiene siempre mercado que se ve en el lado izquierdo, y que marcado se renderiza en la U I cuando se carga la página. No estoy muy emocionado con ese enfoque porque si quisiéramos hacer algunos cambios, implicaría cavar en el HTML. Y creo que eso es un poco desordenado para una aplicación de script de trabajo. A mí me gustaría, ya sabes, tipo de control todo con script Java. Entonces lo que busco que hagas es recortar este enfoque y convertir la información del equipo de ventas de viajes acné a Jason Data y luego ejecutar ese Jason Data a través de algún código JavaScript y tu JavaScript podría entonces poblar y en lista de pedidos y luego hacer que una lista no ordenada en la página Web. Eso puede parecer un poco un reto, pero creo que hemos pasado mucho tiempo discutiendo la diferencia entre el alcance en contexto y JavaScript, y puedes aprovechar ese conocimiento para lograr esta tarea. Creo que tienes las herramientas que necesitas para lograrlo. La segunda parte de nuestro proyecto de clase implica re factorizar el código de página web de ejemplo. Lo que quiero decir específicamente es que te estoy buscando para eliminar código repetitivo, eliminar valores codificados duros en el script Java y luego recortar funciones hinchadas. Entonces si saltamos a algún código, te puedo mostrar exactamente lo que estoy consiguiendo aquí con ambas partes del proyecto de clase, Echa un vistazo al índice de archivos ese equipo de edad. Ahora, en la parte inferior de ese archivo, verás una referencia a app dot Js. Echemos un vistazo en Js slash ap dot Js So en jazz app dot Js Este es el código que no hemos discutido este código en esta clase, pero es el código que se ejecuta detrás de las escenas que simplemente tipo de construye esta aplicación . Principalmente proporciona thes características. Permite cargar el recubrimiento, ejecutar el código, ejemplificarlo directamente desde la página. Eso es mayormente. Um, pero lo que hago es correr en ese inicio en una app que inicio llamo apt upload examples. Jason. Tan apt. Subir ejemplos. Jason, hago una llamada Ajax a este expediente. Entonces vamos a copiar esto y ver el archivo. Y si solo corto el resto y voy aquí, se puede ver que este es el Jason real que consigo. Entonces este Jason representa lo que se ve en el dom aquí. Todos estos ejemplos es thes list itis que este ordenó una lista de ejemplo. Los enlaces de código se generan dinámicamente sobre la marcha. Y estoy usando ah, Js ejemplos dot Jason. Entonces este código que ves justo aquí es exactamente lo que ves aquí. De acuerdo, Entonces lo que pasa es que yo, um cargo ese Jason. Y luego cuando eso tenga éxito, se llama a este método, e iteré los ejemplos de ejemplos en el Jason y para cada ejemplo, construyo una lista que soy, y puedo probar esto tal vez solo dependiendo una cadena aquí donde digo ejemplo nombre de punto . Y si actualizamos la página, notarás que obtengo la palabra holo después de cada elemento aquí. Entonces, um, el punto aquí es que solo soy Esto solo te está mostrando que aquí es donde se crea esa lista de enlaces de ejemplo. Y a medida que creo cada elemento de lista que anexé a ti l punto ejemplo Sophie, inspeccionamos la página, Verás que hay una ONU ordenó una lista con los ejemplos de clase. Esto son ejemplos ul dot aquí, así que lo estoy construyendo aquí. Entonces tu proyecto, tu primer proyecto, sería hacer exactamente lo mismo con la lista de vendedores. Entonces este marcado, ¿verdad? Uh, aquí en la página, todos estos thes gente de ventas que ves que en realidad está codificado duro en el HTML. Si miras hacia atrás en índice, ese HTML, esta es tu lista de vendedores empieza aquí mismo en línea. 29. Por lo que la persona de ventas cero dice advertencias de persona y así sucesivamente. Pero estos son los vendedores. Aquí hay una persona de ventas en particular, Bobby Carney. Y si miro a la primera persona, es Bobby Carney. Entonces tu proyecto sería tomar este mercado, que es realmente, um, es desordenado, ¿ verdad? Porque si quiero cambiar la forma en que se construyen estos elementos de lista, tengo que cambiar cada uno de estos tiempos de lista en el marcado. Tan duro marcado codificado no es realmente bueno en este tipo de situaciones. Es mejor. Por lo general es mejor hacerlo dinámicamente, por lo que tienes más control. Entonces mira si puedes encontrar una manera de tomar exactamente el mismo enfoque. Toma estos ítems de lista, los datos y estos ítems de lista Primero, ponlo en Jason. ¿ Quieres convertir esta información aquí mismo por cada persona de ventas? Quieres convertir esa información a Jason Esa está formateada de una manera similar a esta. Y luego quieres llamar a esa persecución y al igual que nosotros hacemos aquí y cuando llamas a ese Jason con Ajax, entonces quieres construir los aliados para cada persona de ventas, y quieres meterla en la página así que primero empezarás por tomar éste. Ordenó una lista y la vaciarás. A quienes les gusta esto. Si guardo esto ahora, vuelva a cargar la página. No conseguimos gente de ventas así que está picado los labios. Por lo que quieres recortar esa lista y quieres tomar esto con el fin de enumerar esta marca y quieres convertir eso a Jason y luego quieres tirarla a la página, construida dinámicamente haciendo eso. No debería ser demasiado difícil, pero requerirá que aproveches el entendimiento fuera de alcance y contexto que has ganado en esta clase para construir el grupo de empleos que crea dinámicamente esa lista de personas de ventas en tu Ejemplos carpeta, abra el contacto alguna carpeta y luego seleccione un método de archivo Chaining Now, Como mencioné anteriormente, este , uh, archivo contiene una versión de factor re de todo nuestro código que hemos visto en esta clase, y es un poco más claro y, en mi opinión, más fácil de ah, leer. Pero estoy usando este archivo en particular porque contiene el código de aplicación completo. Entonces si ejecutamos este archivo en este ejemplo en el entrenamiento del método de página, nos permite hacer todo. Podemos seleccionar a una persona de ventas y de seleccionar a una persona de ventas, seleccionar a múltiples vendedores, debilitar, eliminar a cada persona de ventas individualmente, o podemos seleccionar múltiples vendedores y eliminar los que se seleccionan. Y a medida que eliminamos a los vendedores, disminuye el conteo total del equipo de ventas. Y en cualquier momento dado podemos recargar la página. Entonces pero hay dos cosas en este código que creo que realmente podrían usar de mejorar. En primer lugar, hay muchas cuerdas recubiertas duras. Por ejemplo, contamos con persona de ventas aliado y total de gente de ventas contenedor. Es decir, estas son solo cuerdas. Y si quiero cambiar esta referencia si quiero cambiar el I. D vendedores, bueno, bueno, ¿cuántas veces aparece eso en mi código? Aparece cinco veces en mi código. Entonces si fuera dedo del pie sube aquí y el tonto y tal vez en nuestro marcado, cambiamos, ya sabes, gente de ventas a equipo Bueno, entonces tengo que averiguar cuántas veces en mis ventas de código, la gente de ventas ocurre y tengo que cambiar cada uno de ellos a equipo, y eso es realmente tedioso. Y no queremos hacer eso. Ojalá pudiéramos hacer algo como esto. Simplemente cámbialo aquí y boom. Cambia cada lugar o a todos los que hacen referencia a ese elemento. Simplemente esto consigue este eso no queremos No queremos tener aquí estos valores de cadena codificados duros . Queremos encontrar una mejor manera de hacerlo. Y lo segundo es que también tenemos algún código repetido cuando se trata de, um, um, tenemos funciones que un realmente grande que tienen código repetido como enlazar elementos de usuario, manejadores de eventos. Bueno, eso va de la línea 74 Línea de remolque, una veintena. Eso son casi 50 líneas de código para una función, que es algo así. Y mucho es que estamos viendo el otoño, el artículo que encuentra algo en el ítem click que encuentra algo más en click y el ítem que encuentra algo más en click. Entonces estoy pensando que cada uno de estos podría dividirse en una sub función se, y entonces ésta podría ser dividida en una sub función, y entonces ésta podría ser dividida en una sub función. Y en cada caso, todas esas funciones definitivamente necesitan argumentos. Entonces vas a tener que, ah, encontrar una manera de pasar cada función, los argumentos que necesita para hacer lo que tiene que hacer. Pero esto es mucho más fácil de leer. Es decir, este enlace elementos de usuario, manejadores de eventos Método ahora tiene 14 líneas de código en contraposición a 50. Es una gran diferencia es también más fácil de leer. Y si decidimos que queríamos cambiar la forma en que se compone el código, sólo podríamos hacer eso. Pero es simplemente mucho más fácil de mirar y de manejar. Por lo que las dos cosas que quieres hacer en tu segundo proyecto es eliminar todos los liberales de cadena codificados duros a lo largo de nuestro código. Puedes configurarlas para que sean variables o propiedades de un objeto que depende completamente de ti. Hay más de una forma de hacerlo, y estábamos buscando es cómo decides que quieres dedo del pie re factorizar el código para deshacerse de todos estos liberales de cadena codificados duros. Y lo segundo es, es que queremos re factorizar cualquier función grande como esta, para que el código dentro de se divida en funciones más pequeñas. Pero definitivamente vas a tener que aprovechar tu nueva comprensión tu nueva comprensión profunda de la diferencia entre alcance en contexto con el fin de proporcionar a estas funciones los argumentos que necesitan para hacer el trabajo que les estás pidiendo dio Bueno con el proyecto de clase. De verdad estoy deseando ver lo que se te ocurre. Si tienes alguna pregunta o sientes que te estás quedando atrapado en algún lugar, por favor asegúrate de ponerte en contacto. Y yo seguiré contigo y haré todo lo que pueda hacer para ayudarte. 33. ¡Gracias!: gracias por inscribirse en esta clase donde aprendimos sobre la diferencia con equipos, alcance y contexto en JavaScript. Espero que esto te haya sido de ayuda. Acompáñame en el blogger dot kevin Chisholm dot com, donde encontrarás toneladas de artículos y editoriales sobre muchos temas de desarrollador web diferentes . Gracias de nuevo por rodar, y te veo la próxima vez que te debemos.