Cómo utilizar JS y TypeScript

Esta vez te mostraré cómo usar JS y TypeScript, y cuáles son las precauciones para usar JS y TypeScript. El siguiente es un caso práctico, echemos un vistazo.

Prólogo

Para un desarrollador front-end, las clases rara vez se usan, porque JavaScript se trata más de programación funcional. Levantar la mano es una función y las clases son casi invisibles o rastreadas. de nuevo. Por lo tanto, el patrón de diseño también es una deficiencia de la mayoría de los desarrolladores front-end.

En el proceso de aprendizaje reciente de Angular, descubrí que utiliza muchas clases. Tengo que admirarlo. De hecho, Angular es un marco excelente que merece un estudio en profundidad.

Este artículo presentará brevemente las clases en JavaScript y TypeScript.

Conceptos básicos

Antes de introducir la clase, primero se deben introducir algunos conceptos básicos.

1. Miembros estáticos

Los miembros de la clase en sí se pueden heredar, pero no se puede acceder a las instancias. Generalmente se encuentran en clases de herramientas, como el $.ajax más común en. La era jQuery es conveniente. Es un método estático de $, que es fácil de usar. No es necesario obtener una nueva instancia mediante una llamada nueva o de función.

2. Miembros privados

Generalmente, los miembros dentro de una clase no se pueden heredar y solo se pueden usar internamente. No se puede acceder a las instancias. Son un poco como variables dentro de un cierre. Todavía existe una cierta diferencia. Actualmente, JavaScript no puede definir directamente miembros privados y solo puede ayudar en la implementación a través de otros métodos.

3. Getter/setter

Atributos del acceso Cuando accedemos o modificamos los atributos de una instancia, podemos interceptar estas dos operaciones a través de los atributos del acceso, para hacer otras cosas. Vue utiliza esta API para rastrear los cambios de datos.

4. Miembros de la instancia

Se refiere a los miembros de la nueva instancia, que se pueden heredar. También es a través de esta característica que se logra la reutilización del código.

5. Clase abstracta, método abstracto

La clase abstracta se refiere a una clase de la que no se puede crear una instancia. Llamarla a través de la nueva palabra clave informará un error. Generalmente está diseñada como padre. clase.

Los métodos abstractos solo proporcionan el nombre, los parámetros y el valor de retorno del método, y no son responsables de la implementación. La implementación específica la completa la subclase. Si una subclase hereda de una clase abstracta, entonces la subclase. Debe implementar todos los métodos abstractos de la clase en la clase principal; de lo contrario, se informará un error.

Ambos conceptos no se pueden implementar directamente en JavaScript, pero se pueden implementar fácilmente en TypeScript u otros lenguajes orientados a objetos. Además, esta característica también es un medio importante para lograr el polimorfismo.

Introducción del caso

Para presentar mejor las clases, este artículo utilizará tres clases como ejemplos, a saber, Persona, Chino y Americano. Puede saberlo rápidamente por el literal: Persona es la clase principal (clase base), chino y americano son subclases (clases derivadas).

La persona tiene tres atributos: nombre, edad, sexo, método sayHello y atributo de acceso fullName. Al mismo tiempo, Person también tiene algunos miembros estáticos y privados. Dado que es demasiado difícil pensar en ejemplos, usemos foo, bar, x, y, z en su lugar.

Como subclases, Chinese y American heredan los miembros de instancia y los miembros estáticos de Person. Al mismo tiempo, también tienen algunos métodos y atributos propios:

Los chinos tienen el atributo de kungfu y pueden practicar artes marciales.

American tiene twitter y también puede enviar Twitter.

A continuación usaremos JavaScript y TypeScript para implementar este caso.

Clase en JavaScript

La clase en JavaScript debe discutirse por separado. ES6 proporciona dos palabras clave, clase y extensión. Aunque son solo azúcar de sintaxis, la capa inferior todavía usa prototipo. herencia, pero no se puede negar que esta forma de escribir hace que el código sea más claro y fácil de leer.

clase en ES6

clase Persona {

// #x = 'Propiedad privada x';

// estática x = 'propiedad estática x';

// nombre;

// edad;

// género;

// arriba El El método de escritura aún está bajo propuesta y no se ha convertido en un estándar formal, pero la posibilidad de cambio es escasa.

// Por cierto, usar # para representar miembros privados es realmente mudo.

/**

* El método estático de la persona se puede acolchar Herencia de clase

* Se puede acceder a los miembros estáticos a través de este

*/

static foo() {

console.log(`class ${ this.name} tiene un constructor ${this.x}`);

}

(nombre, edad, sexo) {

this. nombre;

this.age = edad;

this.gender = género;

}

/**

* Almacenamiento de datos, que puede acceder a los miembros de la instancia, y las instancias de subclases pueden heredar

* Para acceder a los miembros de la instancia a través de esto

*/

get fullName() {

const suffix = this.gender === 'Hombre' ? 'Señor' : 'Sra.';

devuelve this.name + sufijo;

}

set fullName(value) {

console.log(`Has cambiado el nombre a ${value} `);

}

/**

* Los métodos de instancia de Persona pueden ser heredados por instancias de subclases

* Se puede acceder a los miembros de la instancia a través de este

* /

sayHello() {

console.log(`Hola, soy ${this.fullName}, tengo ${this.age} años`) ;

}

}

Persona.x = 'propiedad estática x';clase chino extiende Persona {

barra estática() {

console.log(`La clase padre de la clase ${this.name} es ${super.name}`);

super.foo();

}

constructor(nombre, edad, sexo, kungfu) {

super(nombre, edad, sexo);

this.kungfu = kungfu;

}

marcial() {

console.log(`${this.name} está practicando ${this.kungfu} `);

}

}clase Americana extiende Persona {

// static y = 'propiedad estática y';

static bar() {

console.log(`La clase ${this.name} tiene su propio ${this.y} y también hereda ${super.x}` de la clase principal ${super.name});

}

constructor(nombre, edad, sexo, twitter) {

super(nombre, edad, sexo);

this .twitter = twitter ;

}

enviarTwitter(msg) {

consola

.log(`${this.name} : `);

console.log(` ${msg}`);

}

}Americano .y = 'propiedad estática y';

Person.x; // Propiedad estática x

Person.foo(); // La clase Persona tiene una propiedad estática x

Chinese.x; // Propiedad estática x

Chinese.foo(); // La clase china tiene una propiedad estática x

Chinese.bar(); La clase principal de la clase china es Persona

American.x; // Propiedad estática x

American.y; // 'Propiedad estática y

American. foo (); // La clase americana tiene una propiedad estática x

American.bar(); // La clase americana tiene su propia propiedad estática y, y también hereda la propiedad estática x de la clase padre. Persona

const p = nueva Persona('Lucy', 20, 'Mujer');

const c = nuevo Chino('Han Meimei', 18, 'Mujer', ' Wing Chun');

const a = new American('Trump', 72, 'Hombre', 'Donald J. Trump');

c.sayHello(); / Hola, soy la Sra. Han Meimei, tengo 18 años

c.martial(); // Han Meimei está practicando Wing Chun

a.sayHello(); Hola, soy especial Sr. Trump, tengo 72 años

a.sendTwitter('Twitter gobierna el país'); // Trump: Twitter gobierna el país La clase antes de ES6

La herencia de ES5. La esencia es crear primero el objeto de instancia this de la subclase,

y luego agregar el método de la clase principal a esto arriba Parent.apply(this).

El mecanismo de herencia de ES6 es completamente diferente. La esencia es crear primero el objeto de instancia this de la clase principal, por lo que primero se debe llamar al supermétodo,

y luego usarlo. el constructor de la subclase para modificar esto.

Para implementar la herencia, primero debemos implementar una función extendsClass, que permite a la subclase heredar los miembros estáticos y los miembros de instancia de la clase principal.

función extendsClass(parent, child) {

// Evita que los miembros con los mismos nombres de subclase y clase principal sean sobrescritos por la clase principal

var flag = false;

// Hereda miembros estáticos

for (var k en padre) {

flag = k en niño;

if (! flag) {

niño[k] = padre[k];

}

}

// Heredar los miembros prototipo de la clase principal

// Usar un nuevo constructor para cortar el intercambio de datos entre la clase principal y la subclase

var F = function () { }

F.prototype = parent.prototype;

var o = new F();

for (var k in o) {

bandera = k en child.prototype;

if (!flag) {

child.prototype[k] = o[k];

}

}

}función Persona(nombre, edad, sexo) {

this.name = nombre;

this.age = edad;

this.gender = this.gender;

// Si escribes el getter/setter en el prototipo, no podrás obtenerlo

Object.defineProperty(this, 'fullName' , {

get: function () {

var suffix = this.gender === 'Hombre' ? 'Sr.' : ' Sra.';

devuelve este.nombre + sufijo;

},

establece: función () {

consola.log ('Has cambiado el nombre a ' + valor + ' ');

},

});

}

Person.x = 'propiedad estática x';

Person.foo = function () {

console.log('clase' + this.name + 'tiene un' + this .x);

}

Persona.prototype = {

constructor: Persona,

// obtener nombre completo() { } ,

// establece nombre completo( valor) { },

decirHola: función () {

console.log('Hola, soy' + esto .fullName + ',I' + this.age + ' ');

},

};función chino(nombre, edad, sexo, kungfu) {

// Use call para cambiar este puntero e implementar Heredar los atributos de instancia de la clase principal

Person.call(this, name, age, sex);

this. kung-fu = kung-fu;

}

Chinese.bar = function () {

console.log('Clase' + this.name + 'La clase padre es' + Persona .name);

Person.foo();

}

Chinese.prototype = {

constructor: chino,p>

marcial:función() {

consola.log(este.nombre + 'practicando' + este.kungfu + '');

}

};

extendsClass(Persona, Chino);function American(nombre, edad, género, twitter) {

Persona.call(este, nombre, edad, género );

this.twitter = twitter;

}

American.y = 'propiedad estática y';

American. bar = function () {

console.log('Class' + this.name + ' tiene su propio ' + this.y + ' y también hereda la clase principal ' + Person.name + ' ' + Persona.x);

}

American.prototype = {

constructor: American,

sendTwitter: función (msg ) {

console.log(this.name + ' : ');

console.log(' ' + msg);

}

};

extendsClass(Person, American);clase en TypeScript

Después de hablar de clases en JavaScript, todavía no hemos usado clases abstractas, métodos abstractos y Métodos privados. Debido a las limitaciones del lenguaje JavaScript, es difícil implementar estos tres conceptos, pero esta característica se puede implementar fácilmente en TypeScript.

En primer lugar, modifiquemos ligeramente la descripción en el ejemplo. Persona es una clase abstracta, porque una persona normal debe tener una nacionalidad. El método sayHello de Persona es un método abstracto, porque la forma de saludar. es diferente en cada país. El género de otra persona solo se puede leer, no modificar, y es seguro que es niño o niña, por lo que debemos utilizar la enumeración.

enum Género {

femenino = 0,

masculino = 1

}; clase abstracta Persona {

private x: string = 'Propiedad privada x, las subclases e instancias no pueden acceder';

protected y: string = 'Propiedad privada y, las subclases pueden acceder, las instancias no pueden acceder';

nombre: cadena;

edad pública: número;

género de solo lectura pública: género // Utilice la palabra clave solo lectura para indicar que se trata de un atributo de solo lectura

public static x: string = 'propiedad estática x';

public static foo() {

console.log(`La clase ${this.name} tiene un $ {this.x}`);

}

constructor(nombre: cadena, edad: número, género: Género) {

this.name = nombre ;

this.age = edad;

this.gender = género;

}

obtener nombre completo(): cadena {

const suffix = this.gender === 1 ? 'Señor' : 'Señora';

devuelve este.nombre + sufijo;

}

set FullName(value: string) {

console.log(`Has cambiado tu nombre a ${value} `);

}

// Método abstracto, la implementación específica se deja en manos de las subclases

abstract sayHello(): void;

}class Chinese extends Person {

public kungfu : string ;

public static bar() {

console.log(`La clase principal de la clase ${this.name} es ${super.name}`);

super.foo();

}

constructor público (nombre: cadena, edad: número, género: Género, kungfu: cadena) {

super(nombre, edad, sexo);

this.kungfu = kungfu;

}

public sayHello(): void {

console.log(`Hola, soy ${this.fullName}, tengo ${this.age} años`);

}

public marcial() {

console.log(`${this.name} está practicando ${this.kungfu} `);

}

}clase American extiende Persona {

static y = 'propiedad estática y';

public static bar() {

c

onsole.log(`La clase ${this.name} tiene su propio ${this.y} y también hereda ${super.x}` de la clase principal ${super.name});

}

twitter público: cadena;

constructor público (nombre: cadena, edad: número, género: Género, twitter: cadena) {

super(nombre, edad, sexo);

this.twitter = twitter;

}

public sayHello(): void {

console log. (`Hola, soy ${this.fullName}, tengo ${this.age} años`);

}

public sendTwitter(msg: string) : void {

console.log(`${this.name} : `);

console.log(` ${msg}`);

}

}Person.x; // Propiedad estática x

Person.foo(); // La clase Persona tiene una propiedad estática x

Chino x. ; // Propiedad estática x

Chinese.foo(); // La clase china tiene una propiedad estática x

Chinese.bar() // La clase padre de la clase china es Persona

American.x; // Propiedad estática x

American.y; // 'Propiedad estática y

American.foo(); American tiene una propiedad estática x

American.bar(); // La clase americana tiene su propia propiedad estática y y también hereda la propiedad estática x de la clase principal Persona

const c: Chino = nuevo chino('Han Meimei', 18, Género.femenino, 'Wing Chun');

const a: Americano = nuevo americano('Trump', 72, Género.masculino, ' Donald J. Trump');

c.sayHello(); // Hola, soy la Sra. Han Meimei, tengo 18 años

c.martial(); // Han Meimei está aquí practicando Wing Chun

a.sayHello(); // Hola, soy el Sr. Trump, tengo 72 años

a.sendTwitter(' Twitter gobierna el país'); // Trump: Twitter gobierna el país. Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.

Lectura recomendada:

Cómo operar el terminal móvil vue2.0 para implementar la actualización desplegable y la carga desplegable

Cómo utilizar las propiedades calculadas de vue y oyentes de métodos