Una clase, que se conoce como una colección de un grupo de objetos, se crea utilizando una palabra clave de clase. Cada vez que se inicializa un objeto, se llama al método de clase para el objeto. Los siguientes ejemplos muestran las alternativas de variables de clase:
Uso de clase: la palabra clave de clase permite al usuario crear una clase. Una palabra clave de clase es esencial para la creación de una clase en JavaScript. Utilice siempre una letra mayúscula como primera letra para el nombre de la clase.
- Programa:
javascript
<!DOCTYPE html>
<html>
<head>
<h1>GeeksforGeeks</h1>
</head>
<body>
<p id="gfg"></p>
<script>
class Fruit {
constructor(fname) {
this.fruit1 = fname;
}
}
Fru = new Fruit("Mango");
document.getElementById("gfg").innerHTML
= Fru.fruit1;
</script>
</body>
</html>
- Producción:
Uso de Métodos: Cada vez que se crea la instancia de una clase (Objeto Instanciación). Se inicializa usando el método constructor() que no tiene ningún tipo de retorno. Si el usuario no ha definido el método constructor(), JavaScript lo hace automáticamente (el constructor predeterminado será seleccionado por JavaScript).
- Programa:
javascript
<!DOCTYPE html>
<html>
<head>
<h1>GeeksforGeeks</h1>
</head>
<body>
<p id="gfg"></p>
<p id="gfg1"></p>
<script>
class Fruit {
constructor(fname) {
this.fruit1 = fname;
}
present() {
return "My favourite fruit is "
+ this.fruit1;
}
}
Fru = new Fruit("Mango");
document.getElementById("gfg").innerHTML
= Fru.fruit1;
document.getElementById("gfg1").innerHTML
= Fru.present();
</script>
</body>
</html>
- Producción:
Uso del método estático: este método es simple y se llama en la clase y no en los objetos de la clase. Al usar la palabra clave estática, no es necesario usar el nombre de la clase al llamar a cualquier variable o método.
- Programa:
javascript
<!DOCTYPE html>
<html>
<head>
<h1>GeeksforGeeks</h1>
</head>
<body>
<p id="gfg1"></p>
<script>
class Fruit {
constructor(fname) {
this.fruit1 = fname;
}
static new() {
return "Mango!!!!";
}
}
Fru = new Fruit("Mango");
document.getElementById("gfg1").innerHTML
= Fruit.new();
</script>
</body>
</html>
- Producción:
Uso de la herencia: la herencia permite que la clase secundaria herede las propiedades de la clase principal. La palabra clave «extiende» se utiliza para este propósito. Sin embargo, la herencia es de muchos tipos, incluida la herencia única, multinivel, múltiple e híbrida.
- Programa:
javascript
<!DOCTYPE html>
<html>
<head>
<h1>GeeksforGeeks</h1>
</head>
<body>
<p id="gfg1"></p>
<script>
class Fruit {
constructor(fname) {
this.fruit1 = fname;
}
present() {
return "My favourite fruit is "
+ this.fruit1;
}
}
class Healthy extends Fruit {
constructor(fname, mod) {
super(fname);
this.healthy = mod;
}
show() {
return this.present() + ', it is very '
+ this.healthy;
}
}
fru = new Healthy("Mango", "healthy");
document.getElementById("gfg1").innerHTML
= fru.show();
</script>
</body>
</html>
- Producción:
Uso del método Get-Set: Getters permite obtener los valores de las variables de clase ES6 y Setters permite establecer esos valores respectivamente en los campos apropiados y todo este proceso de usar los métodos getter y setter viene bajo Encapsulación (lo que significa envolver los datos).
- Programa:
javascript
<!DOCTYPE html>
<html>
<head>
<h1>GeeksforGeeks</h1>
</head>
<body>
<p id="gfg1"></p>
<script>
class Fruit {
constructor(fname) {
this.fruit1 = fname;
}
get fruitss() {
return this.fruit1;
}
set fruitss(x) {
this.fruit1 = x;
}
}
Fru = new Fruit("Mango");
document.getElementById("gfg1").innerHTML
= Fru.fruitss;
</script>
</body>
</html>
- Producción:
Navegadores compatibles: los navegadores compatibles con ES6 Class Variable Alternative se enumeran a continuación:
- Google cromo 49
- Firefox 45
- Internet Explorer borde 12
- Ópera 36
- Safari 9
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA