From 937e47f3a7f03d2fb56bacd994504f7bb8de2fe7 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Tue, 11 Aug 2020 04:30:03 -0300 Subject: [PATCH 01/16] Object methods, "this" --- .../4-object-property-this/solution.md | 26 +-- .../4-object-property-this/task.md | 8 +- .../04-object-methods/7-calculator/task.md | 12 +- .../04-object-methods/8-chain-calls/task.md | 12 +- .../04-object-methods/article.md | 152 +++++++++--------- 5 files changed, 105 insertions(+), 105 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index c1aaf4f97..296e31080 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -1,6 +1,6 @@ -**Answer: an error.** +**Respuesta: un error.** -Try it: +Pruébalo: ```js run function makeUser() { return { @@ -11,29 +11,29 @@ function makeUser() { let user = makeUser(); -alert( user.ref.name ); // Error: Cannot read property 'name' of undefined +alert( user.ref.name ); // Error: No se puede leer la propiedad 'name' de undefined ``` -That's because rules that set `this` do not look at object definition. Only the moment of call matters. +Esto es porque porque las reglas que establecen el `this` no buscan en la definición del objeto. Solamente importa el momento en que se llama. -Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method with "dot" syntax. +Aquí el valor de `this` dentro de `makeUser()` es `undefined`, porque es llamado como una función, no como un método con sintaxis de punto. -The value of `this` is one for the whole function, code blocks and object literals do not affect it. +El valor de `this` es uno para la función entera, bloques de código y objetos literales no lo afectan. -So `ref: this` actually takes current `this` of the function. +Entonces `ref: this` en realidad toma el `this` actual de la función. -We can rewrite the function and return the same `this` with `undefined` value: +Podemos reescribir la función y devolver el mismo `this` con valor `undefined`: ```js run function makeUser(){ - return this; // this time there's no object literal + return this; // esta vez no hay objeto literal } -alert( makeUser().name ); // Error: Cannot read property 'name' of undefined +alert( makeUser().name ); // Error: No se puede leer la propiedad 'name' de undefined ``` -As you can see the result of `alert( makeUser().name )` is the same as the result of `alert( user.ref.name )` from the previous example. +Como puedes ver el resultado de `alert( makeUser().name )` es el mismo que el resultado de `alert( user.ref.name )` del ejemplo anterior. -Here's the opposite case: +Aquí está el caso opuesto: ```js run function makeUser() { @@ -52,4 +52,4 @@ let user = makeUser(); alert( user.ref().name ); // John ``` -Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`. +Ahora funciona, porque `user.ref()` es un método. Y el valor de `this` es establecido al del objeto delante del punto `.`. diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md index 4784b082c..fdc91a529 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Using "this" in object literal +# Uso de "this" en un objeto literal -Here the function `makeUser` returns an object. +Aquí la función `makeUser` devuelve un objeto. -What is the result of accessing its `ref`? Why? +¿Cuál es el resultado de acceder a su `ref`? ¿Por qué? ```js function makeUser() { @@ -18,6 +18,6 @@ function makeUser() { let user = makeUser(); -alert( user.ref.name ); // What's the result? +alert( user.ref.name ); // ¿Cuál es el resultado? ``` diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/task.md b/1-js/04-object-basics/04-object-methods/7-calculator/task.md index aa22608ec..e0bca8968 100644 --- a/1-js/04-object-basics/04-object-methods/7-calculator/task.md +++ b/1-js/04-object-basics/04-object-methods/7-calculator/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Create a calculator +# Crea una calculadora -Create an object `calculator` with three methods: +Crea un objeto `calculator` con tres métodos: -- `read()` prompts for two values and saves them as object properties. -- `sum()` returns the sum of saved values. -- `mul()` multiplies saved values and returns the result. +- `read()` pide dos valores y los almacena como propiedadess de objeto. +- `sum()` devuelve la suma de los valores almacenados. +- `mul()` multiplica los valores almacenados y devuelve el resultado. ```js let calculator = { - // ... your code ... + // ... tu código ... }; calculator.read(); diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index eca9f4e92..4e44ac3c8 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -2,9 +2,9 @@ importance: 2 --- -# Chaining +# Encadenamiento -There's a `ladder` object that allows to go up and down: +Hay un objeto escalera `ladder` que permite subir y bajar: ```js let ladder = { @@ -15,13 +15,13 @@ let ladder = { down() { this.step--; }, - showStep: function() { // shows the current step + showStep: function() { // muestra el peldaño actual alert( this.step ); } }; ``` -Now, if we need to make several calls in sequence, can do it like this: +Ahora, si necesitamos hace varios llamados en secuencia, podemos hacer algo como esto: ```js ladder.up(); @@ -30,10 +30,10 @@ ladder.down(); ladder.showStep(); // 1 ``` -Modify the code of `up`, `down` and `showStep` to make the calls chainable, like this: +Modifica el código de "arriba" `up`, "abajo" `down` y "mostrar peldaño" `showStep` para hacer los llamados encadenables como esto: ```js ladder.up().up().down().showStep(); // 1 ``` -Such approach is widely used across JavaScript libraries. +Tal enfoque es ampliamente usado entre las librerías JavaScript. diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 75bd1856a..e9e051d26 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -1,6 +1,6 @@ -# Object methods, "this" +# Métodos de objeto, "this" -Objects are usually created to represent entities of the real world, like users, orders and so on: +Los objetos son creados usualmente para representar entidades del mundo real, como usuarios, órdenes, etc.: ```js let user = { @@ -9,13 +9,13 @@ let user = { }; ``` -And, in the real world, a user can *act*: select something from the shopping cart, login, logout etc. +Y, en el mundo real, un usuario puede *actuar*: seleccionar algo del carrito de compras, hacer login, logout, etc. -Actions are represented in JavaScript by functions in properties. +Las acciones son representadas en JavaScript por funciones en las propiedades. -## Method examples +## Ejemplos de métodos -For a start, let's teach the `user` to say hello: +Para empezar, enseñemos al usuario `user` a decir hola: ```js run let user = { @@ -25,22 +25,22 @@ let user = { *!* user.sayHi = function() { - alert("Hello!"); + alert("¡Hola!"); }; */!* -user.sayHi(); // Hello! +user.sayHi(); // ¡Hola! ``` -Here we've just used a Function Expression to create the function and assign it to the property `user.sayHi` of the object. +Aquí simplemente usamos una expresión de función para crear la función y asignarla a la propiedad `user.sayHi` del objeto. -Then we can call it. The user can now speak! +Entonces la llamamos. ¡El usuario ahora puede hablar! -A function that is the property of an object is called its *method*. +Una función que es la propiedad de un objeto es denominado su *método*. -So, here we've got a method `sayHi` of the object `user`. +Así, aquí tenemos un método `sayHi` del objeto `user`. -Of course, we could use a pre-declared function as a method, like this: +Por supuesto, podríamos usar una función pre-declarada como un método, como esto: ```js run let user = { @@ -48,29 +48,29 @@ let user = { }; *!* -// first, declare +// primero, declara function sayHi() { - alert("Hello!"); + alert("¡Hola!"); }; -// then add as a method +// entonces la agrega como un método user.sayHi = sayHi; */!* -user.sayHi(); // Hello! +user.sayHi(); // ¡Hola! ``` -```smart header="Object-oriented programming" -When we write our code using objects to represent entities, that's called [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP". +```smart header="Programación orientada a objetos" +Cuando escribimos nuestro código usando objetos que representan entidades, eso es llamado [Programación orientada a objetos](https://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos), abreviado: "POO". -OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E. Gamma, R. Helm, R. Johnson, J. Vissides or "Object-Oriented Analysis and Design with Applications" by G. Booch, and more. +POO (OOP sus siglas en inglés) es una cosa grande, un ciencia interesante en sí misma. ¿Cómo elegir las entidades correctas? ¿Cómo organizar la interacción entre ellas? Eso es arquitectura, y hay muy buenos libros del tópico como "Patrones de diseño: Elementos de software orientado a objetos reutilizable" de E. Gamma, R. Helm, R. Johnson, J. Vissides o "Análisis y Diseño Orientado a Objetos" de G. Booch, y otros. ``` -### Method shorthand +### Formas abreviadas para los métodos -There exists a shorter syntax for methods in an object literal: +Existe una sintaxis más corta para los métodos en objetos literales: ```js -// these objects do the same +// estos objetos hacen lo mismo user = { sayHi: function() { @@ -78,31 +78,31 @@ user = { } }; -// method shorthand looks better, right? +// abreviado se ve mejor, ¿verdad? user = { *!* - sayHi() { // same as "sayHi: function()" + sayHi() { // igual que "sayHi: function()" */!* alert("Hello"); } }; ``` -As demonstrated, we can omit `"function"` and just write `sayHi()`. +Como se demostró, podemos omitir `"function"` y simplemente escribir `sayHi()`. -To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred. +A decir verdad, las notaciones no son completamente idénticas. Hay diferencias sutiles relacionadas a la herencia de objetos (por cubrir más adelante) que no importan ahora. En casi todos los casos la sintaxis abreviada es la preferida. -## "this" in methods +## "this" en métodos -It's common that an object method needs to access the information stored in the object to do its job. +Es común que in método de objeto necesite acceder a la información almacenada en el objeto para cumplir su tarea. -For instance, the code inside `user.sayHi()` may need the name of the `user`. +Por ejemplo, el código dentro de `user.sayHi()` puede necesitar el nombre del usuario `user`. -**To access the object, a method can use the `this` keyword.** +**Para acceder al objeto, un método usa la palabra clave `this`.** -The value of `this` is the object "before dot", the one used to call the method. +El valor de `this` es el objeto "delante del punto", el usado para llamar al método. -For instance: +Por ejemplo: ```js run let user = { @@ -111,7 +111,7 @@ let user = { sayHi() { *!* - // "this" is the "current object" + // "this" es el "objeto actual" alert(this.name); */!* } @@ -121,9 +121,9 @@ let user = { user.sayHi(); // John ``` -Here during the execution of `user.sayHi()`, the value of `this` will be `user`. +Aquí durante la ejecución de `user.sayHi()`, el valor de `this` será `user`. -Technically, it's also possible to access the object without `this`, by referencing it via the outer variable: +Técnicamente, es también posible acceder al objeto sin `this`, haciendo referencia a él por medio de la variable externa: ```js let user = { @@ -132,16 +132,16 @@ let user = { sayHi() { *!* - alert(user.name); // "user" instead of "this" + alert(user.name); // "user" en vez de"this" */!* } }; ``` -...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object. +...Pero tal código no es confiable. Si decidimos copiar `user` a otra variable, por ejemplo `admin = user` y sobrescribir `user` con otra cosa, entonces accederá al objeto incorrecto. -That's demonstrated below: +Eso queda demostrado aquí: ```js run let user = { @@ -150,7 +150,7 @@ let user = { sayHi() { *!* - alert( user.name ); // leads to an error + alert( user.name ); // lleva a un error */!* } @@ -158,18 +158,18 @@ let user = { let admin = user; -user = null; // overwrite to make things obvious +user = null; // sobrescribimos para hacer las cosas evidentes -admin.sayHi(); // Whoops! inside sayHi(), the old name is used! error! +admin.sayHi(); // ¡oops! dentro de sayHi(), ¡el nombre viejo es usado! ¡Error! ``` -If we used `this.name` instead of `user.name` inside the `alert`, then the code would work. +Si usamos `this.name` en vez de `user.name` dentro de `alert`, entonces el código funciona. -## "this" is not bound +## "this" no es vinculado -In JavaScript, keyword `this` behaves unlike most other programming languages. It can be used in any function. +En JavaScript, la palabra clave `this` se comporta de manera distinta a la mayoría de otros lenguajes de programación. Puede ser usado en cualquier función. -There's no syntax error in the following example: +No hay error de sintaxis en el siguiente ejemplo: ```js function sayHi() { @@ -177,9 +177,9 @@ function sayHi() { } ``` -The value of `this` is evaluated during the run-time, depending on the context. +El valor de `this` es evaluado durante el tiempo de ejecución, dependiendo del contexto. -For instance, here the same function is assigned to two different objects and has different "this" in the calls: +Por ejemplo, aquí la función es asignada a dos objetos diferentes y tiene diferentes "this" en sus llamados: ```js run let user = { name: "John" }; @@ -190,23 +190,23 @@ function sayHi() { } *!* -// use the same function in two objects +// usa la misma función en dos objetos user.f = sayHi; admin.f = sayHi; */!* -// these calls have different this -// "this" inside the function is the object "before the dot" +// estos llamados tienen diferente "this" +// "this" dentro de la función es el objeto "delante del punto" user.f(); // John (this == user) admin.f(); // Admin (this == admin) -admin['f'](); // Admin (dot or square brackets access the method – doesn't matter) +admin['f'](); // Admin (punto o corchetes para acceder al método, no importa) ``` -The rule is simple: if `obj.f()` is called, then `this` is `obj` during the call of `f`. So it's either `user` or `admin` in the example above. +La regla es simple: si `obj.f()` es llamado, entonces `this` es `obj` durante el llamado de `f`. Entonces es tanto `user` o `admin` en el ejemplo anterior. -````smart header="Calling without an object: `this == undefined`" -We can even call the function without an object at all: +````smart header="Llamado sin un objeto: `this == undefined`" +Podemos incluso llamar la función sin un objeto en absoluto: ```js run function sayHi() { @@ -216,28 +216,28 @@ function sayHi() { sayHi(); // undefined ``` -In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error. +En este caso `this` es `undefined` en el modo estricto. Si tratamos de acceder a `this.name`, habrá un error. -In non-strict mode the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later in the chapter [](info:global-object)). This is a historical behavior that `"use strict"` fixes. +En modo no estricto el valor de `this` en tal caso será el *objeto global* (`window` en un navegador, llegaremos a ello en el capítulo [](info:global-object)). Este es un comportamiento histórico que `"use strict"` corrije. -Usually such call is a programming error. If there's `this` inside a function, it expects to be called in an object context. +Usualmente tal llamado en un error de programa. Si hay `this` dentro de una función, se espera que sea llamada en un contexto de objeto. ```` -```smart header="The consequences of unbound `this`" -If you come from another programming language, then you are probably used to the idea of a "bound `this`", where methods defined in an object always have `this` referencing that object. +```smart header="Las consecuencias de un `this` desvinculado" +Si vienes de otro lenguaje de programación, probablemente estés habituado a la idea de un "`this` vinculado", donde los método definidos en un objeto siempre tienen `this` referenciando ese objeto. -In JavaScript `this` is "free", its value is evaluated at call-time and does not depend on where the method was declared, but rather on what object is "before the dot". +En JavaScript `this` es "libre", su valor es evaluado al momento de su llamado y no depende de dónde fue declarado el método sino de cuál es el objeto "delante del punto". -The concept of run-time evaluated `this` has both pluses and minuses. On the one hand, a function can be reused for different objects. On the other hand, the greater flexibility creates more possibilities for mistakes. +El concepto de `this` evaluado en tiempo de ejecución tiene sus pros y sus contras. Por un lado, una función puede ser reusada por diferentes objetos. Por otro, la mayor flexibilidad crea más posibilidades para equivocaciones. -Here our position is not to judge whether this language design decision is good or bad. We'll understand how to work with it, how to get benefits and avoid problems. +Nuestra posición no es juzgar si la decisión del diseño de lenguaje es buena o mala. Vamos a entender cómo trabajar con ello, obtener beneficios y evitar problemas. ``` -## Arrow functions have no "this" +## Las funciones de flecha no tienen "this" -Arrow functions are special: they don't have their "own" `this`. If we reference `this` from such a function, it's taken from the outer "normal" function. +Las funciones de flecha son especiales: ellas no tienen su "propio" `this`. Si referenciamos `this` desde tales funciones, será tomado desde el exterior "normal" de la función. -For instance, here `arrow()` uses `this` from the outer `user.sayHi()` method: +Por ejemplo, aquí `arrow()` usa `this` desde fuera del método `user.sayHi()`: ```js run let user = { @@ -251,18 +251,18 @@ let user = { user.sayHi(); // Ilya ``` -That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter we'll go more deeply into arrow functions. +Esto es una característica especial de las funciones de flecha, útil cuando no queremos realmente un `this` separado sino tomarlo de un contexto externo. Más adelante en el capítulo las trataremos en profundidad. -## Summary +## Resumen -- Functions that are stored in object properties are called "methods". -- Methods allow objects to "act" like `object.doSomething()`. -- Methods can reference the object as `this`. +- Las funciones que son almacenadas en propiedades de objeto son llamadas "métodos". +- Los método permiten a los objetos "actuar", como `object.doSomething()`. +- Los métodos pueden hacer referencia al objeto con `this`. -The value of `this` is defined at run-time. -- When a function is declared, it may use `this`, but that `this` has no value until the function is called. -- A function can be copied between objects. -- When a function is called in the "method" syntax: `object.method()`, the value of `this` during the call is `object`. +El valor de `this` es definido en tiempo de ejecución. +- Cuando una función es declarada, puede usar `this`, pero ese `this` no tiene valor hasta que la función es llamada. +- Una función puede ser copiada entre objetos. +- Cuando una función es llamada en la sintaxis de método: `object.method()`, el valor de `this` durante el llamado es `object`. -Please note that arrow functions are special: they have no `this`. When `this` is accessed inside an arrow function, it is taken from outside. +Ten en cuenta que las funciones de flecha son especiales: ellas no tienen `this`. Cuando `this` es accedido dentro de una función de flecha, su valor es tomado desde el exterior. From 6ea2d55f72a42fa907622b10023da6a870d16346 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:13:39 -0300 Subject: [PATCH 02/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index e9e051d26..955ff20c2 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -141,7 +141,7 @@ let user = { ...Pero tal código no es confiable. Si decidimos copiar `user` a otra variable, por ejemplo `admin = user` y sobrescribir `user` con otra cosa, entonces accederá al objeto incorrecto. -Eso queda demostrado aquí: +Eso queda demostrado en las siguientes lineas: ```js run let user = { From 6f38e54ad4361ec1051dd1252f1e81d0afa67450 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:14:00 -0300 Subject: [PATCH 03/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 955ff20c2..1eed1a43a 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -98,7 +98,7 @@ Es común que in método de objeto necesite acceder a la información almacenada Por ejemplo, el código dentro de `user.sayHi()` puede necesitar el nombre del usuario `user`. -**Para acceder al objeto, un método usa la palabra clave `this`.** +**Para acceder al objeto un método puede usar la palabra clave `this`.** El valor de `this` es el objeto "delante del punto", el usado para llamar al método. From 0893548835d1343b8ff38d305c951c561362169d Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:14:15 -0300 Subject: [PATCH 04/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 1eed1a43a..9a5a4ba2c 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -78,7 +78,7 @@ user = { } }; -// abreviado se ve mejor, ¿verdad? +// la forma abreviada se ve mejor, ¿verdad? user = { *!* sayHi() { // igual que "sayHi: function()" From cec58a681d84ca555d6ceb8ce396b6647e259871 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:14:29 -0300 Subject: [PATCH 05/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 9a5a4ba2c..bc6db3d1d 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -1,4 +1,4 @@ -# Métodos de objeto, "this" +# Métodos del objeto, "this" Los objetos son creados usualmente para representar entidades del mundo real, como usuarios, órdenes, etc.: From 12bef1e25ad47c2fb11bee109e8a49c12f004eee Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:15:12 -0300 Subject: [PATCH 06/16] Update 1-js/04-object-basics/04-object-methods/4-object-property-this/task.md Co-authored-by: Danilo Britto --- .../04-object-methods/4-object-property-this/task.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md index fdc91a529..481b4b680 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# Uso de "this" en un objeto literal +# Usando el "this" en un objeto literal Aquí la función `makeUser` devuelve un objeto. @@ -20,4 +20,3 @@ let user = makeUser(); alert( user.ref.name ); // ¿Cuál es el resultado? ``` - From 39d13f70002e33f8d804adad259b154236fc91c0 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:15:22 -0300 Subject: [PATCH 07/16] Update 1-js/04-object-basics/04-object-methods/8-chain-calls/task.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/8-chain-calls/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index 4e44ac3c8..260bffb3a 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -4,7 +4,7 @@ importance: 2 # Encadenamiento -Hay un objeto escalera `ladder` que permite subir y bajar: +Hay un objeto `ladder` que permite subir y bajar: ```js let ladder = { From fc63d969481139d44a4b6a9ae3d83e292d0a35ea Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:15:35 -0300 Subject: [PATCH 08/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index bc6db3d1d..ee55d2bda 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -40,7 +40,7 @@ Una función que es la propiedad de un objeto es denominado su *método*. Así, aquí tenemos un método `sayHi` del objeto `user`. -Por supuesto, podríamos usar una función pre-declarada como un método, como esto: +Por supuesto, podríamos usar una función pre-declarada como un método, parecido a esto: ```js run let user = { From f0bfcccc33c022a53f362084a2e90757ef95b193 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:21:57 -0300 Subject: [PATCH 09/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Danilo Britto --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index ee55d2bda..01bd5acf0 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -235,7 +235,7 @@ Nuestra posición no es juzgar si la decisión del diseño de lenguaje es buena ## Las funciones de flecha no tienen "this" -Las funciones de flecha son especiales: ellas no tienen su "propio" `this`. Si referenciamos `this` desde tales funciones, será tomado desde el exterior "normal" de la función. +Las funciones de flecha son especiales: ellas no tienen su "propio" `this`. Si nosotros hacemos referencia a `this` desde tales funciones, esta será tomada desde afuera función "normal". Por ejemplo, aquí `arrow()` usa `this` desde fuera del método `user.sayHi()`: From a0a48753a3334deec5ae6f8da50bac0e1f8afba2 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 14 Aug 2020 07:23:46 -0300 Subject: [PATCH 10/16] Update article.md --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 01bd5acf0..a7542ec92 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -235,7 +235,7 @@ Nuestra posición no es juzgar si la decisión del diseño de lenguaje es buena ## Las funciones de flecha no tienen "this" -Las funciones de flecha son especiales: ellas no tienen su "propio" `this`. Si nosotros hacemos referencia a `this` desde tales funciones, esta será tomada desde afuera función "normal". +Las funciones de flecha son especiales: ellas no tienen su "propio" `this`. Si nosotros hacemos referencia a `this` desde tales funciones, esta será tomada desde afuera de la función "normal". Por ejemplo, aquí `arrow()` usa `this` desde fuera del método `user.sayHi()`: From 41c48b073b6bda06ad5c01d92d2181887272dec8 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 15 Aug 2020 19:53:35 -0300 Subject: [PATCH 11/16] Update 1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md Co-authored-by: Maksumi Murakami --- .../04-object-methods/4-object-property-this/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index 296e31080..0ba7155c4 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -14,7 +14,7 @@ let user = makeUser(); alert( user.ref.name ); // Error: No se puede leer la propiedad 'name' de undefined ``` -Esto es porque porque las reglas que establecen el `this` no buscan en la definición del objeto. Solamente importa el momento en que se llama. +Esto es porque las reglas que establecen el `this` no buscan en la definición del objeto. Solamente importa el momento en que se llama. Aquí el valor de `this` dentro de `makeUser()` es `undefined`, porque es llamado como una función, no como un método con sintaxis de punto. From 3803ad0eca8618f852a3a8ce4a050dc9c16327e4 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 15 Aug 2020 20:25:56 -0300 Subject: [PATCH 12/16] Apply suggestions from code review Co-authored-by: Maksumi Murakami --- .../4-object-property-this/solution.md | 2 +- .../04-object-methods/8-chain-calls/task.md | 2 +- 1-js/04-object-basics/04-object-methods/article.md | 14 +++++++------- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index 0ba7155c4..07817d83d 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -18,7 +18,7 @@ Esto es porque las reglas que establecen el `this` no buscan en la definición d Aquí el valor de `this` dentro de `makeUser()` es `undefined`, porque es llamado como una función, no como un método con sintaxis de punto. -El valor de `this` es uno para la función entera, bloques de código y objetos literales no lo afectan. +El valor de `this` es uno para la función entera. Bloques de código y objetos literales no lo afectan. Entonces `ref: this` en realidad toma el `this` actual de la función. diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index 260bffb3a..af65019c9 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -21,7 +21,7 @@ let ladder = { }; ``` -Ahora, si necesitamos hace varios llamados en secuencia, podemos hacer algo como esto: +Ahora, si necesitamos hacer varios llamados en secuencia podemos hacer algo como esto: ```js ladder.up(); diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index a7542ec92..1479e4de8 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -9,7 +9,7 @@ let user = { }; ``` -Y, en el mundo real, un usuario puede *actuar*: seleccionar algo del carrito de compras, hacer login, logout, etc. +Y en el mundo real un usuario puede *actuar*: seleccionar algo del carrito de compras, hacer login, logout, etc. Las acciones son representadas en JavaScript por funciones en las propiedades. @@ -36,7 +36,7 @@ Aquí simplemente usamos una expresión de función para crear la función y asi Entonces la llamamos. ¡El usuario ahora puede hablar! -Una función que es la propiedad de un objeto es denominado su *método*. +Una función que es la propiedad de un objeto es denominada su *método*. Así, aquí tenemos un método `sayHi` del objeto `user`. @@ -61,7 +61,7 @@ user.sayHi(); // ¡Hola! ``` ```smart header="Programación orientada a objetos" -Cuando escribimos nuestro código usando objetos que representan entidades, eso es llamado [Programación orientada a objetos](https://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos), abreviado: "POO". +Cuando escribimos nuestro código usando objetos que representan entidades, eso es llamado [Programación Orientada a Objetos](https://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos), abreviado: "POO". POO (OOP sus siglas en inglés) es una cosa grande, un ciencia interesante en sí misma. ¿Cómo elegir las entidades correctas? ¿Cómo organizar la interacción entre ellas? Eso es arquitectura, y hay muy buenos libros del tópico como "Patrones de diseño: Elementos de software orientado a objetos reutilizable" de E. Gamma, R. Helm, R. Johnson, J. Vissides o "Análisis y Diseño Orientado a Objetos" de G. Booch, y otros. ``` @@ -94,7 +94,7 @@ A decir verdad, las notaciones no son completamente idénticas. Hay diferencias ## "this" en métodos -Es común que in método de objeto necesite acceder a la información almacenada en el objeto para cumplir su tarea. +Es común que un método de objeto necesite acceder a la información almacenada en el objeto para cumplir su tarea. Por ejemplo, el código dentro de `user.sayHi()` puede necesitar el nombre del usuario `user`. @@ -123,7 +123,7 @@ user.sayHi(); // John Aquí durante la ejecución de `user.sayHi()`, el valor de `this` será `user`. -Técnicamente, es también posible acceder al objeto sin `this`, haciendo referencia a él por medio de la variable externa: +Técnicamente, también es posible acceder al objeto sin `this`, haciendo referencia a él por medio de la variable externa: ```js let user = { @@ -132,7 +132,7 @@ let user = { sayHi() { *!* - alert(user.name); // "user" en vez de"this" + alert(user.name); // "user" en vez de "this" */!* } @@ -220,7 +220,7 @@ En este caso `this` es `undefined` en el modo estricto. Si tratamos de acceder a En modo no estricto el valor de `this` en tal caso será el *objeto global* (`window` en un navegador, llegaremos a ello en el capítulo [](info:global-object)). Este es un comportamiento histórico que `"use strict"` corrije. -Usualmente tal llamado en un error de programa. Si hay `this` dentro de una función, se espera que sea llamada en un contexto de objeto. +Usualmente tal llamado es un error de programa. Si hay `this` dentro de una función, se espera que sea llamada en un contexto de objeto. ```` ```smart header="Las consecuencias de un `this` desvinculado" From 1b97e0fa7747dde7f054a02bce4034d32d28125e Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 15 Aug 2020 20:26:43 -0300 Subject: [PATCH 13/16] Update 1-js/04-object-basics/04-object-methods/article.md Co-authored-by: Maksumi Murakami --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 1479e4de8..d9dfbb46f 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -98,7 +98,7 @@ Es común que un método de objeto necesite acceder a la información almacenada Por ejemplo, el código dentro de `user.sayHi()` puede necesitar el nombre del usuario `user`. -**Para acceder al objeto un método puede usar la palabra clave `this`.** +**Para acceder al objeto, un método puede usar la palabra clave `this`.** El valor de `this` es el objeto "delante del punto", el usado para llamar al método. From 5b91491ee2cbc14eb05de59ca71c6460b3bcfbb7 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 15 Aug 2020 20:29:10 -0300 Subject: [PATCH 14/16] Update article.md --- 1-js/04-object-basics/04-object-methods/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index d9dfbb46f..8ee42cd90 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -100,7 +100,7 @@ Por ejemplo, el código dentro de `user.sayHi()` puede necesitar el nombre del u **Para acceder al objeto, un método puede usar la palabra clave `this`.** -El valor de `this` es el objeto "delante del punto", el usado para llamar al método. +El valor de `this` es el objeto "antes del punto", el usado para llamar al método. Por ejemplo: @@ -160,7 +160,7 @@ let user = { let admin = user; user = null; // sobrescribimos para hacer las cosas evidentes -admin.sayHi(); // ¡oops! dentro de sayHi(), ¡el nombre viejo es usado! ¡Error! +admin.sayHi(); // ¡oops! dentro de sayHi(), ¡usa el nombre viejo! ¡Error! ``` Si usamos `this.name` en vez de `user.name` dentro de `alert`, entonces el código funciona. @@ -196,7 +196,7 @@ admin.f = sayHi; */!* // estos llamados tienen diferente "this" -// "this" dentro de la función es el objeto "delante del punto" +// "this" dentro de la función es el objeto "antes del punto" user.f(); // John (this == user) admin.f(); // Admin (this == admin) From c60d0078b3be5097183b2f8ad09b1a380b145c01 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 15 Aug 2020 22:09:29 -0300 Subject: [PATCH 15/16] Update article.md --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 8ee42cd90..55827b166 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -160,7 +160,7 @@ let user = { let admin = user; user = null; // sobrescribimos para hacer las cosas evidentes -admin.sayHi(); // ¡oops! dentro de sayHi(), ¡usa el nombre viejo! ¡Error! +admin.sayHi(); // ¡oops! dentro de sayHi(), ¡Se usa el nombre viejo! ¡Error! ``` Si usamos `this.name` en vez de `user.name` dentro de `alert`, entonces el código funciona. From 066f2608b59992412d579e7d7a4f5b712b454400 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 15 Aug 2020 23:18:50 -0300 Subject: [PATCH 16/16] Update solution.md --- .../04-object-methods/4-object-property-this/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index 07817d83d..32362d6b2 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -18,7 +18,7 @@ Esto es porque las reglas que establecen el `this` no buscan en la definición d Aquí el valor de `this` dentro de `makeUser()` es `undefined`, porque es llamado como una función, no como un método con sintaxis de punto. -El valor de `this` es uno para la función entera. Bloques de código y objetos literales no lo afectan. +El valor de `this` es uno para la función entera; bloques de código y objetos literales no lo afectan. Entonces `ref: this` en realidad toma el `this` actual de la función.