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 title: Classes
localeTitle: Las clases localeTitle: Las clases
--- ---
## Las clases ## Las clases
JavaScript no tiene el concepto de clases inherentemente. 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 En aras de la claridad, asumamos que queremos crear una clase que pueda hacer lo siguiente
```javascript ```javascript
var p = new Person('James','Bond'); // create a new instance of Person class var p = new Person('James', 'Bond'); // crear una nueva instancia de clase "Person"
p.log() // Output: 'I am James Bond' // Accessing a function in the class p.log(); // Salida: 'I am James Bond' // Accediendo a una función en la clase.
// Using setters and getters // Utilizando "setters" y "getters"
p.profession = 'spy' p.profession = 'spy';
p.profession // output: James bond is a spy p.profession; // Salida: James bond is a spy
``` ```
### Usando la palabra clave de clase ### Usando la palabra clave de clase
@ -28,30 +29,26 @@ Esto no se admite en navegadores antiguos y se introdujo en ECMAScript 2015.
```javascript ```javascript
class Person { class Person {
constructor(firstName, lastName) { constructor(firstName, lastName) {
this._firstName = firstName; this._firstName = firstName;
this._lastName = lastName; this._lastName = lastName;
} }
log() { log() {
console.log('I am', this._firstName, this._lastName); console.log('I am', this._firstName, this._lastName);
} }
// setters // setters
set profession(val) { set profession(val) {
this._profession = val; this._profession = val;
} }
// getters // getters
get profession() { get profession() {
console.log(this._firstName, this._lastName, 'is a', this._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. `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. 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 ```javascript
function Person(firstName, lastName) { function Person(firstName, lastName) {
this._firstName = firstName; this._firstName = firstName;
this._lastName = lastName; this._lastName = lastName;
} }
Person.prototype.log = function() { Person.prototype.log = function() {
console.log('I am', this._firstName, this._lastName); 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. // 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.
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript // Como en este ejemplo intentamos imitar la clase anterior, intentamos usar la propiedad "getters" y "setters" proporcionada por JavaScript
Object.defineProperty(Person.prototype, 'profession', { Object.defineProperty(Person.prototype, 'profession', {
set: function(val) { set: function(val) {
this._profession = val; this._profession = val;
}, },
get: function() { get: function() {
console.log(this._firstName, this._lastName, 'is a', this._profession); 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 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 ```javascript
function Person(firstName, lastName) { function Person(firstName, lastName) {
this._firstName = firstName; this._firstName = firstName;
this._lastName = lastName; this._lastName = lastName;
this.log = function() { this.log = function() {
console.log('I am ', this._firstName, this._lastName); console.log('I am ', this._firstName, this._lastName);
} };
Object.defineProperty(this, 'profession', { Object.defineProperty(this, 'profession', {
set: function(val) { set: function(val) {
this._profession = val; this._profession = val;
}, },
get: function() { get: function() {
console.log(this._firstName, this._lastName, 'is a', this._profession); console.log(this._firstName, this._lastName, 'is a', this._profession);
} },
}) });
} }
``` ```
### Ocultar detalles en clases con símbolos. ### Ocultar detalles en clases con símbolos.
@ -147,8 +144,8 @@ class Person {
get profession() { get profession() {
console.log(this._firstName, this._lastName, 'is a', this._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. // Con el código anterior, aunque podemos acceder a las propiedades fuera de la función para cambiar su contenido, si no queremos eso...
// Symbols come to rescue. // Los simbolos vienen al rescate.
let s_firstname = new Symbol(); let s_firstname = new Symbol();
class Person { class Person {

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

@ -2,6 +2,7 @@
title: Closures title: Closures
localeTitle: Cierres localeTitle: Cierres
--- ---
# 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: 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 ### Ejemplo
```js ```js
//we have an outer function named walk and an inner function named fly //tenemos una función externa llamada "walk y una función interna llamada "fly"
function walk (){
function walk() {
var dist = '1780 feet'; var dist = '1780 feet';
function fly(){ function fly() {
console.log('At '+dist); console.log('At ' + dist);
} }
return fly; return fly;
} }
var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc var flyFunc = walk(); //llamando a "walk" devuelve la función "fly" que se asigna a "flyFunc"
//you would expect that once the walk function above is run //Usted esperaría de que una vez ejecutada la función "walk" anterior
//you would think that JavaScript has gotten rid of the 'dist' var //Usted pensaría que JavaScript se ha deshecho de la var 'dist'
flyFunc(); //Logs out 'At 1780 feet' flyFunc(); //Cierra la sesión 'A "1780 feet"'
//but you still can use the function as above //pero todavía puedes usar la función como se muestra arriba
//this is the power of closures //Este es el poder de los cierres.
``` ```
### Otro ejemplo ### Otro ejemplo
```js ```js
function by(propName) { function by(propName) {
return function(a, b) { return function(a, b) {
return a[propName] - b[propName]; return a[propName] - b[propName];
} };
} }
const person1 = {name: 'joe', height: 72}; const person1 = { name: 'joe', height: 72 };
const person2 = {name: 'rob', height: 70}; const person2 = { name: 'rob', height: 70 };
const person3 = {name: 'nicholas', height: 66}; 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. 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 ```js
function outside(num) { function outside(num) {
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers' var rememberedVar = num; //En este ejemplo, recordadoVar es el ámbito léxico que el cierre se 'recuerda'
return function inside() { // This is the function which the closure 'remembers' return function inside() {
console.log(rememberedVar) // 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 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 is now a closure which contains rememberedVar = 9 in its lexical environment, and //the function '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 remember1(); // Esto ahora ejecuta la función 'inside', que console.logs(recordarVar) => 7
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9 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. 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: Los cierres también se pueden utilizar para encapsular datos / métodos privados. Echale un vistazo a éste ejemplo:
```javascript ```javascript
const bankAccount = (initialBalance) => { const bankAccount = initialBalance => {
const balance = initialBalance; const balance = initialBalance;
return { return {
@ -85,12 +86,12 @@ const bankAccount = (initialBalance) => {
return balance; return balance;
}, },
}; };
}; };
const account = bankAccount(100); const account = bankAccount(100);
account.getBalance(); // 100 account.getBalance(); // 100
account.deposit(10); // 110 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. 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 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 ```javascript
var funcs = []; var funcs = [];
for(var i = 0; i < 3; i++){ for (var i = 0; i < 3; i++) {
funcs[i] = function(){ funcs[i] = function() {
console.log('My value is ' + i); //creating three different functions with different param values. console.log('My value is ' + i); // Creando tres funciones diferentes con diferentes valores parámetros.
} };
} }
for(var j = 0; j < 3; j++){ for (var j = 0; j < 3; j++) {
funcs[j](); // My value is 3 funcs[j](); // My value is 3
// My value is 3 // 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. 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 ```javascript
var funcs = []; var funcs = [];
var createFunction = function(val){ var createFunction = function(val) {
return function() {console.log("My value: " + val);}; return function() {
} console.log('My value: ' + val);
};
};
for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) {
funcs[i] = createFunction(i); funcs[i] = createFunction(i);
} }
for (var j = 0; j < 3; j++) { for (var j = 0; j < 3; j++) {
funcs[j](); // My value is 0 funcs[j](); // My value is 0
// My value is 1 // My value is 1
// My value is 2 // 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. 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.