ES6 Problema de "defecto" de JavaScript mejorado

Alcance de nivel de bloque

ES5 no tiene alcance a nivel de bloque, solo alcance global y alcance de funciones. Debido a esto, el alcance de las variables es muy amplio, por lo que debe crearlo inmediatamente tan pronto como ingrese a la función. Esto causa el llamado aumento de la variable.

La característica de "mejora variable" de ES5 a menudo causa un error si no tiene cuidado:

1. La variable interna cubre la variable externa

 var tmp = new Date (); function f () {console.log (tmp); if (false) {// ejecutar undefinedvar tmp = "hola mundo";}}

2. Gotencias variables en variables globales

 var s = 'hola'; para (var i = 0; i <s.length; i ++) {console.log (s [i]);} console.log (i); // 5

En el pasado, a menudo usamos cierres para resolver este problema (como las funciones de auto-ejecutación). Ahora, según este problema, ES6 ha agregado el alcance de nivel de bloque, por lo que no hay necesidad de ejecutar funciones por sí misma.

Let and Const

ES6 es compatible con versiones anteriores, y mantener la compatibilidad hacia atrás significa nunca cambiar el comportamiento del código JS en la plataforma web, por lo que el alcance de las variables creadas por VAR seguirá siendo el alcance global y el alcance de la función. De esta manera, incluso si tiene un alcance de nivel de bloque, no puede resolver el problema de "mejora variable" de ES5. Por lo tanto, aquí ES6 ha agregado dos nuevas palabras clave: LET y const.

1.leter

"Let es una var más perfecta", tiene mejores reglas de alcance.

2.const

const declara una constante de solo lectura. Una vez declarado, el valor de la constante no se puede cambiar, pero el objeto declarado por const puede tener cambios de propiedad (objeto congelamiento objeto. Freeze)

 const a = []; a.push ('hola'); // ejecutable a = ['Dave']; // Informar un error

También puede usar objeto. Carga para congelar el objeto

 const foo = object.freeze ({}); // En modo normal, la siguiente línea no funciona; // En modo estricto, la línea informará un error foo.prop = 123; //

Use Let y Const:

• Las variables solo son válidas dentro del alcance de nivel de bloque donde se encuentra la declaración

• La declaración variable solo se puede usar (zona muerta temporal)

• Las variables no se pueden definir repetidamente

• La variable global declarada, atributos que no pertenecen a objetos globales

 var a = 1; ventana.a // 1let b = 1; window.b // indefinido

Esta palabra clave

Sabemos que esto en la función ES5 apunta al alcance donde se encuentra el tiempo de ejecución. Por ejemplo

 function foo () {setTimeOut (function () {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 21

Aquí declaro una función foo, que es internamente una función de retraso en el setTimeOut, imprimiendo this.id cada 100 ms. Lo llamamos a través de foo.call ({id: 42}) y establecemos el alcance para esta función. Se necesitan 100 milisegundos para ejecutarse. Dado que esto apunta al alcance donde se encuentra el tiempo de ejecución, esto aquí apunta a la ventana del objeto global, no a la función foo. aquí:

• Use la llamada para cambiar el contexto de ejecución de FOO para que el contexto de ejecución de la función ya no sea ventana, para distinguir este puntero en SetTimeOut

• El método SetTimeOut está colgado debajo del objeto de la ventana, por lo que esto apunta al alcance de la ejecución: el objeto de la ventana.

El código llamado Tiempo de espera se ejecuta en el alcance global, por lo que el valor de esto en la función apunta al objeto de la ventana en modo no riguroso, y no está definido en modo estricto-《JavaScript Programación avanzada》

Para resolver este problema, nuestra práctica habitual es asignar esto a otras variables:

 función foo () {var that = this; setTimeOut (function () {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42

Ahora ES6 ha lanzado la función de flecha para resolver este problema.

Función de flecha

Identificador => expresión

 var sum = (num1, num2) => {return num1 + num2; } // equivalente a var sum = function (num1, num2) {return num1 + num2;};

• Si la función tiene solo un parámetro, se pueden omitir los paréntesis

• Si la función tiene solo una declaración de retorno, se pueden omitir los aparatos omitidos y retorno

• Si la función devuelve un objeto directamente, se deben agregar paréntesis fuera del objeto. (Porque un objeto vacío {} y un bloque vacío {} se ven exactamente iguales. Por lo tanto, debe envolver los literales de objeto en los soportes).

En respuesta al problema de esta palabra clave, ES6 especifica el alcance donde este enlace se define en la función de flecha, en lugar de señalar el alcance donde se encuentra el tiempo de ejecución. Desde este punto, este punto se ha solucionado, lo que es propicio para encapsular las funciones de devolución de llamada.

 función foo () {var that = this; setTimeOut (() => {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42

Nota: La fijación que apunta a la función de flecha esto no se debe a que haya un mecanismo para unir esto dentro de la función de flecha. La razón real es que la función de flecha no tiene esto propio. La función de flecha no tiene lo suyo en absoluto, y lo interno es esto en el bloque de código exterior. Esto lleva a:

• No se puede usar como constructor

• No puede usar llamar (), aplicar (), bind () y otros métodos para cambiar la dirección de este

Clases y herencia

ECMAScript tradicional no tiene el concepto de clases. Describe el concepto de cadenas prototipo y utiliza cadenas prototipo como el método principal para implementar la herencia. La idea básica es usar prototipos para permitir un tipo de referencia para heredar las propiedades y métodos de otro tipo de referencia. La forma tradicional de lograr este comportamiento es a través del constructor:

 punto de función (x, y) {this.x = x; this.y = y;} punto.prototype.ToString = function () {return '(' + this.x + ',' + this.y + ')';}; var p = nuevo punto (1, 2);

Aquí, el punto del constructor tendrá un objeto prototipo (prototipo), que contiene un puntero a punto (constructor), y la instancia P contiene un puntero interno al objeto prototipo (PROP). Entonces, toda la herencia se implementa a través de la cadena prototipo. Para más detalles, consulte este artículo de mi: prototipo y constructor en JavaScript

clase

ES6 proporciona un estilo de escritura que está más cerca de los idiomas tradicionales, introduciendo el concepto de clase como una plantilla para los objetos. A través de la palabra clave de clase, puede definir una clase. Pero las clases son solo azúcar sintáctica para el patrón orientado a objetos basado en prototipos. Hay críticas mixtas sobre la introducción de la clase, y muchas personas piensan que es un defecto importante, pero para mí, es una buena sintaxis de azúcar, porque la forma habitual de heredar las cadenas prototipo a menudo puede envolverme por un tiempo.

 // Defina el punto de clase de clase {Constructor (x, y) {this.x = x; this.y = y;} toString () {return '(' + this.x + ',' + this.y + ')';}} var p = nuevo punto (1, 2);

• Hay un método de constructor en la clase, que es el método predeterminado de la clase. Este método se llama automáticamente al generar una instancia de objeto a través del nuevo comando. Una clase debe tener un método de constructor. Si no se define explícitamente, se agregará un método de constructor vacío de forma predeterminada.

• La palabra clave en el método del constructor representa un objeto de instancia.

• Al definir el método de "clase" (como la tostración en el ejemplo anterior), no necesita agregar la función de palabra clave antes que él, simplemente coloque la definición de función. Además, no hay separación de coma entre los métodos, ya que se informará un error si se agrega.

• Al usarlo, también usa el nuevo comando directamente en la clase, que es exactamente lo mismo que el uso del constructor.

• Todos los métodos de una clase se definen en la propiedad prototipo de la clase

Herencia de clase - extender

La herencia entre la clase se puede lograr a través de la palabra clave extensas, que es mucho más clara y más conveniente que la herencia de ES5 modificando la cadena prototipo.

 ClassPoint de clase extiende el punto {constructor (x, y, color) {super (x, y); // llame al constructor (x, y) de la clase principal (x, y) this.color = color;} toString () {return this.color + '' + super.toString (); // llame a toString () de la clase principal}}

• La palabra clave súper, cuando se llama como una función (es decir, super (... args)), representa el constructor de la clase principal; Cuando se le llama como un objeto (es decir, super.prop o super.method ()), representa la clase principal. Aquí, representa el constructor de la clase principal y se usa para crear este objeto de la clase principal.

• La subclase debe llamar al método Super en el método del constructor, de lo contrario, se informará un error al crear una nueva instancia. Esto se debe a que la subclase no tiene su propio este objeto, sino que hereda este objeto de la clase principal y luego lo procesa. Si no se llama al súper método, la subclase no obtendrá este objeto.

Modular

Históricamente, JavaScript nunca ha tenido un sistema de módulos, y es imposible dividir un programa grande en pequeños archivos interdependientes y luego ensamblarlos de una manera simple, lo que ha creado un gran obstáculo para el desarrollo de proyectos grandes y complejos. Para adaptarse al desarrollo de módulos grandes, la comunidad ha formulado algunas soluciones de carga de módulos, como CMD y AMD.

Escritura modular de ES6:

 import {stat, existe, readfile} de 'fs';

La esencia del código anterior es cargar 3 métodos desde el módulo FS, y los otros métodos no están cargados. Este tipo de carga se llama "carga de tiempo de compilación", es decir, ES6 puede completar la carga del módulo en el tiempo de compilación, que es más eficiente que el método de carga del módulo CommonJS. Por supuesto, esto también lleva a la incapacidad de hacer referencia al módulo ES6 en sí, porque no es un objeto.

La función del módulo se compone principalmente de dos comandos:

•exportar

La interfaz externa utilizada para especificar el módulo y la interfaz externa deben establecer una relación de correspondencia uno a uno con las variables dentro del módulo.

 // Método de escritura One Export Var M = 1; // Error exportar 1; // Método de escritura Dos var m = 1; export {m}; // Error exportación M; // Método de escritura Tres Naming Var n = 1; export {n as m};

•importar

Se utiliza para ingresar las funciones proporcionadas por otros módulos. Acepta un objeto (representado en aparatos ortopédicos) que especifica el nombre de la variable que se importará de otros módulos (también se puede cargar usando * en total)

Interpolación de cadena

En el desarrollo de JavaScript, a menudo necesitamos generar plantillas como esta:

 función sayshello (nombre) {return "Hola, mi nombre es"+nombre+"I Am"+getage (18);} Función getAge (edad) {return Age;} sayhello ("marca") // "Hola, mi nombre es marca soy 18"

Necesitamos usar + para concatenar cadenas y variables (o expresiones). Los ejemplos son relativamente simples, por lo que parecen inocuos, pero una vez que sean más complicados, parecerán bastante engorrosos e inconvenientes, y este uso también nos hace agotador. En este sentido, ES6 introduce cadenas de plantilla, que pueden insertar valores JS de manera fácil y con gracia en cadenas.

Cadena de plantilla

Para cadenas de plantilla, es:

• Empaque con backticks ``;

• Usar $ {} para salir de valores;

• El contenido en $ {} puede ser cualquier expresión de JavaScript, por lo que las llamadas de función y las operaciones aritméticas son legales;

• Si un valor no es una cadena, se convertirá en una cadena;

• Mantenga todos los espacios, nuevas líneas y sangrías y los envíe a la cadena de resultados (se pueden escribir cadenas de múltiples líneas)

• Use backticks y aparatos ortopédicos internamente para escapar, y use barras de fondo/

Para el ejemplo anterior, la cadena de plantilla se escribe de la siguiente manera:

 función sayshello (name) {return `hola, mi nombre es $ {name} Soy $ {getage (18)}`;} function getAge (edad) {return a age;} sayhello ("marca") // "Hola, mi nombre es brandi am 18"

Modo estricto

Uno de los objetivos del modo estricto es permitir una depuración más rápida de los errores. La mejor manera de ayudar a los desarrolladores a depurar es lanzar errores cuando ocurren ciertos patrones en lugar de fallar en silencio o mostrar un comportamiento extraño (a menudo sucede en modo no riguroso). El código en modo estricto lanzará más mensajes de error, lo que puede ayudar a los desarrolladores a notar rápidamente algunos problemas que deben resolverse de inmediato. En ES5, el modo estricto es opcional, pero en ES6, muchas características requieren el uso del modo estricto, lo que nos ayuda a escribir mejor JavaScript.

Lo anterior es el problema del "defecto" de ES6 mejorado JavaScript que el editor le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!