From fd0770c9d2f9803c2ffcc04290bf97254a7b7d18 Mon Sep 17 00:00:00 2001 From: Thiago Cardoso Date: Mon, 15 Aug 2022 23:46:02 -0300 Subject: [PATCH 1/3] Updates first `article.md` file --- 1-js/09-classes/01-class/article.md | 192 ++++++++++++++-------------- 1 file changed, 97 insertions(+), 95 deletions(-) diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 135d24929..9a64e2a5c 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -2,18 +2,18 @@ # Class basic syntax ```quote author="Wikipedia" -In object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods). +Em programação e na orientação a objetos, uma classe é um tipo abstrato de Dados (TAD); ou seja, uma descrição que abstrai um conjunto de objetos com características similares (um projeto do objeto), é um código da linguagem de programação orientada a objetos que define e implementa um novo tipo de objeto, que terão características (atributos) que guardaram valores e, também funções específicas para manipular estes. ``` -In practice, we often need to create many objects of the same kind, like users, or goods or whatever. +Na prática, muitas vezes precisamos criar muitos objetos do mesmo tipo, como usuários, bens ou qualquer outra coisa. -As we already know from the chapter , `new function` can help with that. +Como já sabemos do capítulo , `new function` pode ajudar com isso. -But in the modern JavaScript, there's a more advanced "class" construct, that introduces great new features which are useful for object-oriented programming. +Mas no JavaScript moderno, há uma construção de "classe" mais avançada, que introduz novos recursos excelentes que são úteis para programação orientada a objetos. -## The "class" syntax +## A sintaxe da "class" -The basic syntax is: +A sintaxe básica é: ```js class MyClass { // class methods @@ -25,11 +25,12 @@ class MyClass { } ``` -Then use `new MyClass()` to create a new object with all the listed methods. +Então use `new MyClass()` para criar um novo objeto com todos os métodos listados. The `constructor()` method is called automatically by `new`, so we can initialize the object there. +O método `constructor()` é executado automaticamente pela declaração de `new`, então realizamos a inicialização o objeto através dessa chamada. -For example: +Por exemplo: ```js run class User { @@ -49,28 +50,29 @@ let user = new User("John"); user.sayHi(); ``` -When `new User("John")` is called: -1. A new object is created. -2. The `constructor` runs with the given argument and assigns it to `this.name`. +Quando `new User("John")` é executado: -...Then we can call object methods, such as `user.sayHi()`. +1. Um novo objeto é criado (também descrito como tendo sido `instanciado`). +2. O `construtor` é executado com o argumento fornecido e o atribui a `this.name`. + +...Então podemos chamar os métodos do objetos `User`, como `user.sayHi()`. ```warn header="No comma between class methods" -A common pitfall for novice developers is to put a comma between class methods, which would result in a syntax error. +Uma armadilha comum para desenvolvedores iniciantes é colocar uma vírgula entre os métodos de classe, o que resultaria em um erro de sintaxe. -The notation here is not to be confused with object literals. Within the class, no commas are required. +A notação aqui não deve ser confundida com `Object Literals`. Dentro da classe, não são necessárias vírgulas. ``` -## What is a class? +## O que é uma classe? -So, what exactly is a `class`? That's not an entirely new language-level entity, as one might think. +Então, o que exatamente é uma `classe`? Essa não é uma entidade totalmente nova em nível de linguagem, como se poderia pensar. -Let's unveil any magic and see what a class really is. That'll help in understanding many complex aspects. +Vamos desvendar qualquer mágica e ver o que realmente é uma classe. Isso ajudará na compreensão de muitos aspectos complexos. -In JavaScript, a class is a kind of function. +Em JavaScript, uma classe é um tipo de função. -Here, take a look: +Aqui, dê uma olhada: ```js run class User { @@ -78,24 +80,24 @@ class User { sayHi() { alert(this.name); } } -// proof: User is a function +// prova: o usuário é uma função *!* alert(typeof User); // function */!* ``` -What `class User {...}` construct really does is: +O que a construção `class User {...}` realmente faz é: -1. Creates a function named `User`, that becomes the result of the class declaration. The function code is taken from the `constructor` method (assumed empty if we don't write such method). -2. Stores class methods, such as `sayHi`, in `User.prototype`. +1. Cria uma função chamada `User`, que se torna o resultado da declaração da classe. O código da função é retirado do método `constructor` (assumido vazio se não escrevermos tal método). +2. Armazena métodos de classe, como `sayHi`, em `User.prototype`. -After `new User` object is created, when we call its method, it's taken from the prototype, just as described in the chapter . So the object has access to class methods. +Após a criação do objeto via `new User`, quando chamamos um de seus métodos, ele é retirado do protótipo, exatamente como descrito no capítulo . Assim, o objeto tem acesso a métodos de classe. -We can illustrate the result of `class User` declaration as: +Podemos ilustrar o resultado da declaração `class User` como: ![](class-user.svg) -Here's the code to introspect it: +Aqui está o código para introspecção: ```js run class User { @@ -103,50 +105,50 @@ class User { sayHi() { alert(this.name); } } -// class is a function +// classe é uma função alert(typeof User); // function -// ...or, more precisely, the constructor method +// ...ou, mais precisamente, o método construtor alert(User === User.prototype.constructor); // true -// The methods are in User.prototype, e.g: +// Os métodos estão em User.prototype, por exemplo: alert(User.prototype.sayHi); // the code of the sayHi method -// there are exactly two methods in the prototype +// existem exatamente dois métodos no protótipo alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi ``` -## Not just a syntactic sugar +## Não é apenas um syntax sugar -Sometimes people say that `class` is a "syntactic sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same thing without using the `class` keyword at all: +Às vezes as pessoas dizem que `class` é um "syntax sugar" (sintaxe projetada para tornar as coisas mais fáceis de ler, mas não introduz nada de novo), porque poderíamos declarar a mesma coisa sem usar a palavra-chave `class` em tudo: ```js run -// rewriting class User in pure functions +// reescrevendo a classe User em funções puras -// 1. Create constructor function +// 1. Cria a função construtora function User(name) { this.name = name; } -// a function prototype has "constructor" property by default, -// so we don't need to create it +// um protótipo de função tem a propriedade "construtor" por padrão, +// então não precisamos criá-lo -// 2. Add the method to prototype +// 2. Adicione o método ao protótipo User.prototype.sayHi = function() { alert(this.name); }; -// Usage: +// Forma de uso: let user = new User("John"); user.sayHi(); ``` -The result of this definition is about the same. So, there are indeed reasons why `class` can be considered a syntactic sugar to define a constructor together with its prototype methods. +O resultado desta definição é aproximadamente o mesmo. Portanto, existem de fato razões pelas quais `class` pode ser considerado um açúcar sintático para definir um construtor junto com seus métodos de protótipo. -Still, there are important differences. +Ainda assim, existem diferenças importantes. -1. First, a function created by `class` is labelled by a special internal property `[[IsClassConstructor]]: true`. So it's not entirely the same as creating it manually. +1. Primeiro, uma função criada por `class` é rotulada por uma propriedade interna especial `[[IsClassConstructor]]: true`. Portanto, não é exatamente o mesmo que criá-lo manualmente. - The language checks for that property in a variety of places. For example, unlike a regular function, it must be called with `new`: + A linguagem verifica essa propriedade em vários lugares. Por exemplo, diferente de uma função normal, ela deve ser chamada com `new`: ```js run class User { @@ -157,7 +159,7 @@ Still, there are important differences. User(); // Error: Class constructor User cannot be invoked without 'new' ``` - Also, a string representation of a class constructor in most JavaScript engines starts with the "class..." + Além disso, uma representação textual de um construtor de classe na maioria dos mecanismos JavaScript começa com o "class..." ```js run class User { @@ -166,23 +168,23 @@ Still, there are important differences. alert(User); // class User { ... } ``` - There are other differences, we'll see them soon. + Existem outras diferenças, veremos em breve. -2. Class methods are non-enumerable. - A class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`. +2. Os métodos de classe não são enumeráveis. + Uma definição de classe define a *flag* `enumerable` como `false` para todos os métodos no `"prototype"`. - That's good, because if we `for..in` over an object, we usually don't want its class methods. + Isso é bom, porque se nós iterarmos via `for..in` sobre um objeto, geralmente não queremos seus métodos de classe. -3. Classes always `use strict`. - All code inside the class construct is automatically in strict mode. +3. As classes sempre usam `use strict`. + Todo o código dentro da construção da classe está automaticamente no modo estrito. -Besides, `class` syntax brings many other features that we'll explore later. +Além disso, a sintaxe `class` traz muitos outros recursos que exploraremos mais tarde. -## Class Expression +## Expressões de classe -Just like functions, classes can be defined inside another expression, passed around, returned, assigned, etc. +Assim como as funções, as classes podem ser definidas dentro de outra expressão, passadas, retornadas, atribuídas, etc. -Here's an example of a class expression: +Aqui está um exemplo de uma expressão de classe: ```js let User = class { @@ -192,29 +194,29 @@ let User = class { }; ``` -Similar to Named Function Expressions, class expressions may have a name. +Assim como expressões de função nomeadas, expressões de classe podem ter um nome. -If a class expression has a name, it's visible inside the class only: +Se uma expressão de classe possuir um nome, este será visível apenas dentro da classe. ```js run -// "Named Class Expression" -// (no such term in the spec, but that's similar to Named Function Expression) +// "Expressão de Classe Nomeada" +// (nenhum termo na especificação, mas é semelhante à expressão de função nomeada) let User = class *!*MyClass*/!* { sayHi() { - alert(MyClass); // MyClass name is visible only inside the class + alert(MyClass); // O nome MyClass é visível apenas dentro da classe } }; -new User().sayHi(); // works, shows MyClass definition +new User().sayHi(); // funciona, mostra a definição de MyClass -alert(MyClass); // error, MyClass name isn't visible outside of the class +alert(MyClass); // erro, o nome MyClass não é visível fora da classe ``` -We can even make classes dynamically "on-demand", like this: +Podemos até fazer aulas dinamicamente "sob demanda", assim: ```js run function makeClass(phrase) { - // declare a class and return it + // declara uma classe e retorna return class { sayHi() { alert(phrase); @@ -222,7 +224,7 @@ function makeClass(phrase) { }; } -// Create a new class +// Cria uma nova classe let User = makeClass("Hello"); new User().sayHi(); // Hello @@ -231,15 +233,15 @@ new User().sayHi(); // Hello ## Getters/setters -Just like literal objects, classes may include getters/setters, computed properties etc. +Assim como os objetos literais, as classes podem incluir getters/setters, propriedades computadas etc. -Here's an example for `user.name` implemented using `get/set`: +Aqui está um exemplo para `user.name` implementado usando `get/set`: ```js run class User { constructor(name) { - // invokes the setter + // invoca o setter this.name = name; } @@ -253,7 +255,7 @@ class User { set name(value) { */!* if (value.length < 4) { - alert("Name is too short."); + alert("Nome é muito curto."); return; } this._name = value; @@ -264,14 +266,14 @@ class User { let user = new User("John"); alert(user.name); // John -user = new User(""); // Name is too short. +user = new User(""); // Nome é muito curto ``` -Technically, such class declaration works by creating getters and setters in `User.prototype`. +Tecnicamente, tal declaração de classe funciona criando getters e setters em `User.prototype`. -## Computed names [...] +## Nomes computados [...] -Here's an example with a computed method name using brackets `[...]`: +Aqui está um exemplo com um nome de método calculado usando colchetes `[...]`: ```js run class User { @@ -287,19 +289,19 @@ class User { new User().sayHi(); ``` -Such features are easy to remember, as they resemble that of literal objects. +Esses recursos são fáceis de lembrar, pois se assemelham aos de objetos literais. -## Class fields +## Campos de classe ```warn header="Old browsers may need a polyfill" -Class fields are a recent addition to the language. +Os campos de classe são uma adição recente a linguagem. ``` -Previously, our classes only had methods. +Anteriormente, nossas classes tinham apenas métodos. -"Class fields" is a syntax that allows to add any properties. +"Campos de classe" é uma sintaxe que permite adicionar quaisquer propriedades. -For instance, let's add `name` property to `class User`: +Por exemplo, vamos adicionar a propriedade `name` à classe `User`: ```js run class User { @@ -315,9 +317,9 @@ class User { new User().sayHi(); // Hello, John! ``` -So, we just write " = " in the declaration, and that's it. +Então, nós apenas escrevemos " = " na declaração e pronto. -The important difference of class fields is that they are set on individual objects, not `User.prototype`: +A diferença importante dos campos de classe é que eles são definidos em objetos individuais, não em `User.prototype`: ```js run class User { @@ -331,7 +333,7 @@ alert(user.name); // John alert(User.prototype.name); // undefined ``` -We can also assign values using more complex expressions and function calls: +Também podemos atribuir valores usando expressões mais complexas e chamadas de função: ```js run class User { @@ -345,13 +347,13 @@ alert(user.name); // John ``` -### Making bound methods with class fields +### Fazendo métodos vinculados com campos de classe -As demonstrated in the chapter functions in JavaScript have a dynamic `this`. It depends on the context of the call. +Como demonstrado no capítulo, as funções em JavaScript têm um `this` dinâmico. Depende do contexto da chamada. -So if an object method is passed around and called in another context, `this` won't be a reference to its object any more. +Portanto, se um método de objeto for passado e chamado em outro contexto, `this` não será mais uma referência ao seu objeto. -For instance, this code will show `undefined`: +Por exemplo, este código mostrará `undefined`: ```js run class Button { @@ -371,14 +373,14 @@ setTimeout(button.click, 1000); // undefined */!* ``` -The problem is called "losing `this`". +O problema é chamado de "perder `this`". -There are two approaches to fixing it, as discussed in the chapter : +Existem duas abordagens para corrigi-lo, conforme discutido no capítulo : -1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`. -2. Bind the method to object, e.g. in the constructor. +1. Passe uma função wrapper, como `setTimeout(() => button.click(), 1000)`. +2. Vincule o método ao objeto, por exemplo. no construtor. -Class fields provide another, quite elegant syntax: +Os campos de classe fornecem outra sintaxe bastante elegante: ```js run class Button { @@ -397,13 +399,13 @@ let button = new Button("hello"); setTimeout(button.click, 1000); // hello ``` -The class field `click = () => {...}` is created on a per-object basis, there's a separate function for each `Button` object, with `this` inside it referencing that object. We can pass `button.click` around anywhere, and the value of `this` will always be correct. +O campo de classe `click = () => {...}` é criado por objeto, há uma função separada para cada objeto `Button`, com `this` dentro dele referenciando aquele objeto. Podemos passar `button.click` em qualquer lugar, e o valor de `this` sempre estará correto. -That's especially useful in browser environment, for event listeners. +Isso é especialmente útil no ambiente do navegador, para ouvintes de eventos. -## Summary +## Resumo -The basic class syntax looks like this: +A sintaxe básica da classe se parece com isso: ```js class MyClass { @@ -423,6 +425,6 @@ class MyClass { } ``` -`MyClass` is technically a function (the one that we provide as `constructor`), while methods, getters and setters are written to `MyClass.prototype`. +`MyClass` é tecnicamente uma função (aquela que fornecemos como `constructor`), enquanto métodos, getters e setters são escritos em `MyClass.prototype`. -In the next chapters we'll learn more about classes, including inheritance and other features. +Nos próximos capítulos, aprenderemos mais sobre classes, incluindo herança e outros recursos. From 77c77b54426650f443ab510f013902cc3cac6852 Mon Sep 17 00:00:00 2001 From: Thiago Cardoso Date: Tue, 16 Aug 2022 22:34:16 -0300 Subject: [PATCH 2/3] Includes translated task --- 1-js/09-classes/01-class/1-rewrite-to-class/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/09-classes/01-class/1-rewrite-to-class/task.md b/1-js/09-classes/01-class/1-rewrite-to-class/task.md index 4477de679..1db4ad6cd 100644 --- a/1-js/09-classes/01-class/1-rewrite-to-class/task.md +++ b/1-js/09-classes/01-class/1-rewrite-to-class/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Rewrite to class +# Reescrever como classe -The `Clock` class (see the sandbox) is written in functional style. Rewrite it in the "class" syntax. +A classe `Clock` (veja o sandbox) é escrita em estilo funcional. Reescreva-o usando a sintaxe de "classe". -P.S. The clock ticks in the console, open it to see. +P.S. O relógio corre no console, abra para vê-lo. \ No newline at end of file From e3f47157128d51bac4ca30ab05684c1f0e006f73 Mon Sep 17 00:00:00 2001 From: Jonnathan Santos Date: Sat, 23 Dec 2023 18:19:01 -0300 Subject: [PATCH 3/3] refactor: add adjustments as per code review suggestions --- 1-js/09-classes/01-class/article.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 9a64e2a5c..40101cfcd 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -25,9 +25,8 @@ class MyClass { } ``` -Então use `new MyClass()` para criar um novo objeto com todos os métodos listados. +Então use `new MyClass()` para criar um objeto com todos os métodos listados. -The `constructor()` method is called automatically by `new`, so we can initialize the object there. O método `constructor()` é executado automaticamente pela declaração de `new`, então realizamos a inicialização o objeto através dessa chamada. Por exemplo: @@ -55,10 +54,10 @@ Quando `new User("John")` é executado: 1. Um novo objeto é criado (também descrito como tendo sido `instanciado`). 2. O `construtor` é executado com o argumento fornecido e o atribui a `this.name`. -...Então podemos chamar os métodos do objetos `User`, como `user.sayHi()`. +...Então podemos chamar os métodos do objeto `User`, como `user.sayHi()`. -```warn header="No comma between class methods" +```warn header="Sem vírgula entre métodos de classe" Uma armadilha comum para desenvolvedores iniciantes é colocar uma vírgula entre os métodos de classe, o que resultaria em um erro de sintaxe. A notação aqui não deve ser confundida com `Object Literals`. Dentro da classe, não são necessárias vírgulas. @@ -142,11 +141,11 @@ let user = new User("John"); user.sayHi(); ``` -O resultado desta definição é aproximadamente o mesmo. Portanto, existem de fato razões pelas quais `class` pode ser considerado um açúcar sintático para definir um construtor junto com seus métodos de protótipo. +O resultado desta definição é aproximadamente o mesmo. Portanto, existem de fato razões pelas quais `class` pode ser considerado um açúcar sintático para definir um construtor com seus métodos de protótipo. Ainda assim, existem diferenças importantes. -1. Primeiro, uma função criada por `class` é rotulada por uma propriedade interna especial `[[IsClassConstructor]]: true`. Portanto, não é exatamente o mesmo que criá-lo manualmente. +1. Primeiro, uma função criada por `class` é rotulada por uma propriedade interna especial `[[IsClassConstructor]]: true`. Portanto, não é o mesmo que criá-lo manualmente. A linguagem verifica essa propriedade em vários lugares. Por exemplo, diferente de uma função normal, ela deve ser chamada com `new`: @@ -212,7 +211,7 @@ new User().sayHi(); // funciona, mostra a definição de MyClass alert(MyClass); // erro, o nome MyClass não é visível fora da classe ``` -Podemos até fazer aulas dinamicamente "sob demanda", assim: +Podemos até fazer uma classe dinamicamente "sob demanda", assim: ```js run function makeClass(phrase) { @@ -289,11 +288,11 @@ class User { new User().sayHi(); ``` -Esses recursos são fáceis de lembrar, pois se assemelham aos de objetos literais. +Esses recursos são fáceis de lembrar, pois, se assemelham aos de objetos literais. ## Campos de classe -```warn header="Old browsers may need a polyfill" +```warn header="Navegadores antigos podem precisar de um polyfill" Os campos de classe são uma adição recente a linguagem. ``` @@ -378,7 +377,7 @@ O problema é chamado de "perder `this`". Existem duas abordagens para corrigi-lo, conforme discutido no capítulo : 1. Passe uma função wrapper, como `setTimeout(() => button.click(), 1000)`. -2. Vincule o método ao objeto, por exemplo. no construtor. +2. Vincule o método ao objeto, por exemplo, no construtor. Os campos de classe fornecem outra sintaxe bastante elegante: