gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

translated the comments inside the code example to Spanish (#30422)

Browse Source 
* translated the comments inside the code example to Spanish

* translated the comments inside the code to Spanish
This commit is contained in:
Luis A. Ortiz
2019-08-13 10:06:57 -04:00
committed by Randell Dawson
parent 912ef26dc4
commit e6f6b62521
2 changed files with 222 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
guide/spanish/javascript/classes/index.md
View File

@ -2,6 +2,7 @@
title: Classes
localeTitle: Las clases
---
## Las clases
JavaScript no tiene el concepto de clases inherentemente.
@ -13,11 +14,11 @@ 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
```javascript
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
var p = new Person('James', 'Bond'); // crear una nueva instancia de clase "Person"
p.log(); // Salida: 'I am James Bond' // Accediendo a una función en la clase.
// Utilizando "setters" y "getters"
p.profession = 'spy';
p.profession; // Salida: James bond is a spy
```
### Usando la palabra clave de clase
@ -28,30 +29,26 @@ Esto no se admite en navegadores antiguos y se introdujo en ECMAScript 2015.
```javascript
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._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);
}
}
// 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.
@ -62,24 +59,24 @@ Aquí, todos los métodos se añaden al prototipo.
```javascript
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
this._firstName = firstName;
this._lastName = lastName;
}
Person.prototype.log = function() {
console.log('I am', this._firstName, this._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);
}
})
// Esta línea agrega "getters" y "setters" para el objeto de profesión. Tenga en cuenta que, en general, puede escribir sus propias funciones de obtención y configuración, como el método de "registro" anterior.
// Como en este ejemplo intentamos imitar la clase anterior, intentamos usar la propiedad "getters" y "setters" proporcionada por 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
@ -106,22 +103,22 @@ Aquí los métodos se añaden internamente en lugar de prototipo.
```javascript
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
this._firstName = firstName;
this._lastName = lastName;
this.log = function() {
console.log('I am ', this._firstName, this._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);
}
})
}
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.
@ -147,8 +144,8 @@ class Person {
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.
// Con el código anterior, aunque podemos acceder a las propiedades fuera de la función para cambiar su contenido, si no queremos eso...
// Los simbolos vienen al rescate.
let s_firstname = new Symbol();
class Person {

119
guide/spanish/javascript/closures/index.md
View File

@ -2,6 +2,7 @@
title: Closures
localeTitle: Cierres
---
# Cierres
Un cierre es la combinación de una función y el entorno léxico (alcance) dentro del cual se declaró esa función. Los cierres son una propiedad fundamental y poderosa de Javascript. Este artículo analiza el 'cómo' y el 'por qué' sobre los cierres:
@ -9,61 +10,61 @@ Un cierre es la combinación de una función y el entorno léxico (alcance) dent
### Ejemplo
```js
//we have an outer function named walk and an inner function named fly
function walk (){
//tenemos una función externa llamada "walk y una función interna llamada "fly"
function walk() {
var dist = '1780 feet';
function fly(){
console.log('At '+dist);
function fly() {
console.log('At ' + dist);
}
return fly;
}
}
var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc
//you would expect that once the walk function above is run
//you would think that JavaScript has gotten rid of the 'dist' var
var flyFunc = walk(); //llamando a "walk" devuelve la función "fly" que se asigna a "flyFunc"
//Usted esperaría de que una vez ejecutada la función "walk" anterior
//Usted pensaría que JavaScript se ha deshecho de la var 'dist'
flyFunc(); //Logs out 'At 1780 feet'
//but you still can use the function as above
//this is the power of closures
flyFunc(); //Cierra la sesión 'A "1780 feet"'
//pero todavía puedes usar la función como se muestra arriba
//Este es el poder de los cierres.
```
### Otro ejemplo
```js
function by(propName) {
return function(a, b) {
return a[propName] - b[propName];
}
}
return function(a, b) {
return a[propName] - b[propName];
};
}
const person1 = {name: 'joe', height: 72};
const person2 = {name: 'rob', height: 70};
const person3 = {name: 'nicholas', height: 66};
const person1 = { name: 'joe', height: 72 };
const person2 = { name: 'rob', height: 70 };
const person3 = { name: 'nicholas', height: 66 };
const arr_ = [person1, person2, person3];
const arr_ = [person1, person2, person3];
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
```
El cierre 'recuerda' el entorno en el que fue creado. Este entorno consta de cualquier variable local que estaba dentro del alcance en el momento en que se creó el cierre.
```js
function outside(num) {
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
return function inside() { // This is the function which the closure 'remembers'
console.log(rememberedVar)
}
}
var rememberedVar = num; //En este ejemplo, recordadoVar es el ámbito léxico que el cierre se 'recuerda'
return function inside() {
// Esta es la función que el cierre se 'recuerda'.
console.log(rememberedVar);
};
}
var remember1 = outside(7); // remember1 is now a closure which contains rememberedVar = 7 in its lexical environment, and //the function 'inside'
var remember2 = outside(9); // remember2 is now a closure which contains rememberedVar = 9 in its lexical environment, and //the function 'inside'
var remember1 = outside(7); // remember1 ahora es un cierre que contiene rememberVar = 7 en su entorno léxico, y //la función "inside"
var remember2 = outside(9); // remember2 ahora es un cierre que contiene rememberVar = 9 en su entorno léxico, y // la función "inside"
remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9
remember1(); // Esto ahora ejecuta la función 'inside', que console.logs(recordarVar) => 7
remember2(); // Esto ahora ejecuta la función 'inside', que console.logs(recordarVar) => 9
```
Los cierres son útiles porque le permiten "recordar" datos y luego le permiten operar con esos datos a través de funciones devueltas. Esto permite que javascript emule métodos privados que se encuentran en otros lenguajes de programación. Los métodos privados son útiles para restringir el acceso al código, así como para administrar su espacio de nombres global.
@ -73,7 +74,7 @@ Los cierres son útiles porque le permiten "recordar" datos y luego le permiten
Los cierres también se pueden utilizar para encapsular datos / métodos privados. Echale un vistazo a éste ejemplo:
```javascript
const bankAccount = (initialBalance) => {
const bankAccount = initialBalance => {
const balance = initialBalance;
return {
@ -85,12 +86,12 @@ const bankAccount = (initialBalance) => {
return balance;
},
};
};
};
const account = bankAccount(100);
const account = bankAccount(100);
account.getBalance(); // 100
account.deposit(10); // 110
account.getBalance(); // 100
account.deposit(10); // 110
```
En este ejemplo, no podremos acceder al `balance` desde cualquier lugar fuera de la función `bankAccount` , lo que significa que acabamos de crear una variable privada. ¿Dónde está el cierre? Bueno, piensa en lo que `bankAccount()` está devolviendo. En realidad, devuelve un Objeto con un montón de funciones dentro de él y, sin embargo, cuando llamamos `account.getBalance()` , la función es capaz de "recordar" su referencia inicial para `balance` . Ese es el poder del cierre, donde una función "recuerda" su alcance léxico (alcance de tiempo de compilación), incluso cuando la función se ejecuta fuera de ese alcance léxico.
@ -100,38 +101,40 @@ En este ejemplo, no podremos acceder al `balance` desde cualquier lugar fuera de
Javascript no tenía un concepto de variables de ámbito de bloque. Lo que significa que cuando se define una variable dentro de un forloop, por ejemplo, esta variable también es visible desde fuera del forloop. Entonces, ¿cómo pueden los cierres ayudarnos a resolver este problema? Vamos a ver.
```javascript
var funcs = [];
var funcs = [];
for(var i = 0; i < 3; i++){
funcs[i] = function(){
console.log('My value is ' + i); //creating three different functions with different param values.
}
}
for (var i = 0; i < 3; i++) {
funcs[i] = function() {
console.log('My value is ' + i); // Creando tres funciones diferentes con diferentes valores parámetros.
};
}
for(var j = 0; j < 3; j++){
funcs[j](); // My value is 3
// My value is 3
// My value is 3
}
for (var j = 0; j < 3; j++) {
funcs[j](); // My value is 3
// My value is 3
// My value is 3
}
```
Dado que la variable i no tiene un ámbito de bloque, su valor dentro de las tres funciones se actualizó con el contador de bucle y creó valores maliciosos. El cierre puede ayudarnos a resolver este problema creando una instantánea del entorno en el que se encontraba la función cuando se creó, preservando su estado.
```javascript
var funcs = [];
var funcs = [];
var createFunction = function(val){
return function() {console.log("My value: " + val);};
}
var createFunction = function(val) {
return function() {
console.log('My value: ' + val);
};
};
for (var i = 0; i < 3; i++) {
funcs[i] = createFunction(i);
}
for (var j = 0; j < 3; j++) {
funcs[j](); // My value is 0
// My value is 1
// My value is 2
}
for (var i = 0; i < 3; i++) {
funcs[i] = createFunction(i);
}
for (var j = 0; j < 3; j++) {
funcs[j](); // My value is 0
// My value is 1
// My value is 2
}
```
Las últimas versiones de javascript es6 + tienen una nueva palabra clave llamada let que se puede usar para darle a la variable un blockscope. También hay muchas funciones (forEach) y bibliotecas completas (lodash.js) que están dedicadas a resolver problemas como los explicados anteriormente. Ciertamente pueden aumentar su productividad, sin embargo, sigue siendo extremadamente importante tener conocimiento de todos estos problemas al intentar crear algo grande.