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

233
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
@ -27,30 +28,26 @@ Como en cualquier otro lenguaje de programación, ahora puede utilizar la palabr
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;
}
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 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.
@ -61,43 +58,43 @@ En general, los programadores usan las siguientes formas para crear una clase en
Aquí, todos los métodos se añaden al prototipo.
```javascript
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);
}
})
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
Person.prototype.log = function() {
console.log('I am', this._firstName, this._lastName);
};
// 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
```javascript
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);
}
}
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
@ -105,23 +102,23 @@ Person.prototype = {
Aquí los métodos se añaden internamente en lugar de prototipo.
```javascript
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);
}
})
}
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.
@ -129,46 +126,46 @@ function Person(firstName, lastName) {
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.
```javascript
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);
}
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);
}
// 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 {
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);
}
```
#### Más información:
#### Más información:

211
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 (){
var dist = '1780 feet';
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
flyFunc(); //Logs out 'At 1780 feet'
//but you still can use the function as above
//this is the power of closures
//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);
}
return fly;
}
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(); //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];
}
}
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_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
function by(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 arr_ = [person1, person2, person3];
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 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'
remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9
function outside(num) {
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 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(); // 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,24 +74,24 @@ 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 balance = initialBalance;
return {
getBalance: function() {
return balance;
},
deposit: function(amount) {
balance += amount;
return balance;
},
};
};
const account = bankAccount(100);
account.getBalance(); // 100
account.deposit(10); // 110
const bankAccount = initialBalance => {
const balance = initialBalance;
return {
getBalance: function() {
return balance;
},
deposit: function(amount) {
balance += amount;
return balance;
},
};
};
const account = bankAccount(100);
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 = [];
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 j = 0; j < 3; j++){
funcs[j](); // My value is 3
// My value is 3
// My value is 3
}
var funcs = [];
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
}
```
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 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
}
var funcs = [];
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
}
```
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.
@ -153,20 +156,20 @@ Los cierres también pueden ayudarlo a administrar su espacio de nombres global
Aquí hay una breve muestra de un módulo esqueleto.
```javascript
var myModule = (function() = {
let privateVariable = 'I am a private variable';
let method1 = function(){ console.log('I am method 1'); };
let method2 = function(){ console.log('I am method 2, ', privateVariable); };
return {
method1: method1,
method2: method2
}
}());
myModule.method1(); // I am method 1
myModule.method2(); // I am method 2, I am a private variable
var myModule = (function() = {
let privateVariable = 'I am a private variable';
let method1 = function(){ console.log('I am method 1'); };
let method2 = function(){ console.log('I am method 2, ', privateVariable); };
return {
method1: method1,
method2: method2
}
}());
myModule.method1(); // I am method 1
myModule.method2(); // I am method 2, I am a private variable
```