5.4 KiB
| title | localeTitle |
|---|---|
| Classes | Las clases |
Las clases
JavaScript no tiene el concepto de clases inherentemente.
Pero podríamos simular las funcionalidades de una clase aprovechando la naturaleza prototípica de JavaScript.
Este artículo asume que usted tiene una comprensión básica de los prototipos .
En aras de la claridad, asumamos que queremos crear una clase que pueda hacer lo siguiente
var p = new Person('James','Bond'); // create a new instance of Person class
p.log() // Output: 'I am James Bond' // Accessing a function in the class
// Using setters and getters
p.profession = 'spy'
p.profession // output: James bond is a spy
Usando la palabra clave de clase
Como en cualquier otro lenguaje de programación, ahora puede utilizar la palabra clave de class para crear una clase.
Esto no se admite en navegadores antiguos y se introdujo en ECMAScript 2015.
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._lastName);
}
// setters
set profession(val) {
this._profession = val;
}
// getters
get profession() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
}
class es solo un azúcar sintáctico sobre el modelo de herencia existente basado en un prototipo de JavaScript.
En general, los programadores usan las siguientes formas para crear una clase en JavaScript.
Usando métodos añadidos a los prototipos:
Aquí, todos los métodos se añaden al prototipo.
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
Person.prototype.log = function() {
console.log('I am', this._firstName, this._lastName);
}
// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
Object.defineProperty(Person.prototype, 'profession', {
set: function(val) {
this._profession = val;
},
get: function() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
})
También puede escribir métodos de prototipo sobre la función Person como se muestra a continuación
Person.prototype = {
log: function() {
console.log('I am ', this._firstName, this._lastName);
}
set profession(val) {
this._profession = val;
}
get profession() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
}
Usando métodos añadidos internamente
Aquí los métodos se añaden internamente en lugar de prototipo.
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
this.log = function() {
console.log('I am ', this._firstName, this._lastName);
}
Object.defineProperty(this, 'profession', {
set: function(val) {
this._profession = val;
},
get: function() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
})
}
Ocultar detalles en clases con símbolos.
La mayoría de las veces, algunas propiedades y métodos deben estar ocultos para evitar el acceso desde fuera de la función. Con las clases, para obtener esta funcionalidad, una forma de hacerlo es mediante el uso de símbolos. Symbol es un nuevo tipo incorporado de JavaScript, que puede invocarse para dar un nuevo valor de símbolo. Cada símbolo es único y se puede usar como clave en un objeto. Por lo tanto, un caso de uso de símbolos es que puede agregar algo a un objeto que quizás no posea, y es posible que no desee colisionar con ninguna otra clave de objeto, por lo que crear una nueva y agregar una propiedad a ese objeto utilizando el símbolo es lo más seguro. . Además, cuando el valor del símbolo se agrega a un objeto; Nadie más sabrá cómo conseguirlo.
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._lastName);
}
// setters
set profession(val) {
this._profession = val;
}
// getters
get profession() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
// With the above code, even though we can access the properties outside the function to change their content what if we don't want that.
// Symbols come to rescue.
let s_firstname = new Symbol();
class Person {
constructor(firstName, lastName) {
this[s_firstName] = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._lastName);
}
// setters
set profession(val) {
this._profession = val;
}
// getters
get profession() {
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
}