Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

F.prototype#231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
jonnathan-ls merged 11 commits intojavascript-tutorial:masterfromflaviohblima:develop-function-prototype
Sep 18, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
11 commits
Select commitHold shift + click to select a range
2f6340c
FEAT: Translate F.prototype article, task and solution to pt.
flaviohblimaOct 25, 2021
6ed9576
FIX: article/tasks reviews resolved. Translate missing task.
flaviohblimaOct 28, 2021
75ce566
FIX: Resolving reviews.
flaviohblimaOct 29, 2021
74f456d
Update 1-js/08-prototypes/02-function-prototype/4-new-object-same-con…
flaviohblimaNov 1, 2021
fa0c64e
Update 1-js/08-prototypes/02-function-prototype/4-new-object-same-con…
flaviohblimaNov 1, 2021
4d86e7c
Update 1-js/08-prototypes/02-function-prototype/4-new-object-same-con…
flaviohblimaNov 1, 2021
525cc2e
Update 1-js/08-prototypes/02-function-prototype/4-new-object-same-con…
flaviohblimaNov 1, 2021
2157dd4
Update 1-js/08-prototypes/02-function-prototype/article.md
flaviohblimaNov 1, 2021
7054535
Update 1-js/08-prototypes/02-function-prototype/article.md
flaviohblimaNov 24, 2021
e159873
refactor: applies the corrections requested in the second review of t…
jonnathan-lsSep 18, 2023
2e32549
refactor: translates pending texts in svg files
jonnathan-lsSep 18, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@

Answers:
Respostas:

1. `true`.

The assignment to `Rabbit.prototype`sets up `[[Prototype]]`for new objects, but it does not affect the existing ones.
A atribuição a `Rabbit.prototype`configura o `[[Prototype]]`para novos objetos, mas não afeta os objetos que já existem.

2. `false`.

Objects are assigned by reference. The object from `Rabbit.prototype`is not duplicated, it's still a single object referenced both by `Rabbit.prototype`and by the`[[Prototype]]`of `rabbit`.
Objetos são atribuídos por referência. O objeto do `Rabbit.prototype`não é duplicado, ele continua sendo um único objeto referenciado por `Rabbit.prototype`e pelo`[[Prototype]]`do `rabbit`.

So when we change its content through one reference, it is visible through the other one.
Portanto, quando nós mudamos o seu conteúdo através de uma referência, ele fica visível para as outras.

3. `true`.

All`delete`operations are applied directly to the object. Here`delete rabbit.eats`tries to remove`eats`property from`rabbit`,but it doesn't have it. So the operation won't have any effect.
Todas as operações de`delete`são aplicadas diretamente ao objeto. Neste caso,`delete rabbit.eats`tenta remover a propriedade`eats`do`rabbit`,mas ele não a tem. Assim, essa operação não tem nenhum efeito.

4. `undefined`.

The property `eats`is deleted from the prototype, it doesn't exist any more.
A propriedade `eats`é deletada do protótipo, então ela realmente não existe mais.
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,11 +2,11 @@ importance: 5

---

#Changing "prototype"
#Mudando o "prototype"

In the code below we create `new Rabbit`,and then try to modify its prototype.
No código abaixo, nós criamos um `new Rabbit`,depois tentamos modificar seu protótipo.

In the start, we have this code:
No começo, nós temos esse código:

```js run
function Rabbit() {}
Expand All@@ -19,8 +19,7 @@ let rabbit = new Rabbit();
alert( rabbit.eats ); // true
```


1. We added one more string (emphasized). What will `alert` show now?
1. Nós adicionamos uma linha (realçada). O que o `alert` vai mostrar agora?

```js
function Rabbit() {}
Expand All@@ -37,7 +36,7 @@ alert( rabbit.eats ); // true
alert( rabbit.eats ); // ?
```

2. ...And if the code is like this (replaced one line)?
2. ...E se o código for assim (a linha foi substituída)?

```js
function Rabbit() {}
Expand All@@ -54,7 +53,7 @@ alert( rabbit.eats ); // true
alert( rabbit.eats ); // ?
```

3.And like this (replaced one line)?
3.E se for assim (a linha foi substituída)?

```js
function Rabbit() {}
Expand All@@ -71,7 +70,7 @@ alert( rabbit.eats ); // true
alert( rabbit.eats ); // ?
```

4.The last variant:
4.A última variação:

```js
function Rabbit() {}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
We can use such approach if we are sure that`"constructor"`property has the correct value.
Nós podemos usar essa abordagem se nós tivermos a certeza de que a propriedade`"constructor"`tem o valor correto.

For instance, if we don't touch the default`"prototype"`, then this code works for sure:
Por exemplo, se nós não tocarmos no`"prototype"` padrão, então esse código funciona com certeza:

```js run
function User(name) {
Expand All@@ -10,14 +10,14 @@ function User(name) {
let user = new User('John');
let user2 = new user.constructor('Pete');

alert( user2.name ); // Pete (worked!)
alert( user2.name ); // Pete (funcionou!)
```

It worked, because `User.prototype.constructor == User`.
Funcionou, porque `User.prototype.constructor == User`.

..But if someone, so to speak, overwrites `User.prototype`and forgets to recreate`constructor`to reference`User`,then it would fail.
...Mas se alguém, por acaso, sobrescrever `User.prototype`e se esquecer de recriar o`constructor`referenciando`User`,então o código irá falhar.

For instance:
Por exemplo:

```js run
function User(name) {
Expand All@@ -33,17 +33,17 @@ let user2 = new user.constructor('Pete');
alert( user2.name ); // undefined
```

Why`user2.name`is `undefined`?
Por que`user2.name`está `undefined`?

Here's how`new user.constructor('Pete')`works:
Abaixo está como o`new user.constructor('Pete')`funciona:

1.First, it looks for `constructor`in `user`.Nothing.
2.Then it follows the prototype chain. The prototype of `user`is `User.prototype`,and it also has no`constructor` (because we "forgot" to set it right!).
3.Going further up the chain, `User.prototype`is a plain object, its prototype is the built-in`Object.prototype`.
4.Finally, for the built-in`Object.prototype`, there's a built-in `Object.prototype.constructor == Object`. So it is used.
1.Primeiro, ele procura o `constructor`do `user`.Não o encontra.
2.Depois, ele segue a cadeia de protótipos. O protótipo de `user`é `User.prototype`,e ele também não tem um`constructor` (porque nós nos "esquecemos" de configurá-lo!).
3.Indo adiante na cadeia, `User.prototype`é um objeto vazio, cujo protótipo é o`Object.prototype` padrão.
4.Por último, para o`Object.prototype` padrão existe um `Object.prototype.constructor == Object` padrão. Então, ele é usado.

Finally, at the end, we have `let user2 = new Object('Pete')`.
No fim, nós temos `let user2 = new Object('Pete')`.

Probably, that's not what we want. We'd like to create`new User`,not`new Object`.That's the outcome of the missing `constructor`.
Provavelmente não é isso que nós queremos. Nós gostaríamos de criar um`new User`,não um`new Object`.Essa é a consequência da falta de um `constructor`.

(Just in case you're curious, the`new Object(...)`call converts its argument to an object. That's a theoretical thing, in practice no one calls`new Object`with a value, and generally we don't use `new Object`to make objects at all).
(Caso você esteja curioso, a chamada`new Object(...)`converte o seu argumento para um objeto. Isso é algo teórico, mas, na prática, ninguém faz a chamada`new Object`com um valor, e geralmente nós não usamos `new Object`para criar objetos).
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ importance: 5

---

#Create an object with the same constructor
#Criando um objeto com o mesmo construtor

Imagine, we have an arbitrary object `obj`, created by a constructor function --we don't know which one, but we'd like to create a new object using it.
Imagine que nós temos um objeto `obj` arbitrário, criado por uma função construtura --nós não sabemos qual é, mas nós gostaríamos de criar um objeto novo usando ela.

Can we do it like that?
Nós podemos fazer isso dessa forma?

```js
let obj2 = new obj.constructor();
```

Give an example of a constructor function for`obj`which lets such code work right. And an example that makes it work wrong.
Dê um exemplo de uma função construtora para o`obj`que faça esse código funcionar corretamente, e outro exemplo que faça ele não funcionar.
96 changes: 48 additions & 48 deletions1-js/08-prototypes/02-function-prototype/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
# F.prototype

Remember, new objects can be created with a constructor function, like `new F()`.
Lembre-se, novos objetos podem ser criados com uma função construtora, usando `new F()`.

If `F.prototype`is an object, then the`new`operator uses it to set `[[Prototype]]`for the new object.
Se `F.prototype`for um objeto, então o operador`new`usa ela para configurar o `[[Prototype]]`do novo objeto.

```smart
JavaScripthad prototypal inheritance from the beginning. It was one of the core features of the language.
JavaScripttem herança prototipada desde o começo. Isso era uma das funcionalidades centrais da linguagem.

But in the old times, there was no direct access to it. The only thing that worked reliably was a `"prototype"`property of the constructor function, described in this chapter. So there are manyscriptsthat still use it.
Mas antigamente não havia um acesso direto a ela. A única coisa que funcionava de forma confiável era uma propriedade `"prototype"`da função construtora, descrita nesse capítulo. Então, existem muitosscriptsque ainda a utilizam.
```

Please note that `F.prototype`here means aregularproperty named`"prototype"`on`F`.It sounds somethingsimilarto the term"prototype", but here we really mean a regular property with this name.
Note que o `F.prototype`aqui significa uma propriedaderegularchamada`"prototype"`dentro de`F`.Isso soa um poucosimilarao termo"prototype" (protótipo), mas aqui nós estamos falando realmente de uma propriedade regular com esse nome.

Here's the example:
Aqui temos um exemplo:

```js run
let animal = {
Expand All@@ -27,32 +27,32 @@ function Rabbit(name) {
Rabbit.prototype = animal;
*/!*

let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
let rabbit = new Rabbit("Coelho Branco"); // rabbit.__proto__ == animal

alert( rabbit.eats ); // true
```

Setting `Rabbit.prototype = animal`literally states the following: "When a `new Rabbit`is created, assign its `[[Prototype]]`to `animal`".
Configurando `Rabbit.prototype = animal`literalmente significa o seguinte: "Quando o `new Rabbit`for criado, atribua seu `[[Prototype]]`para `animal`".

That's the resulting picture:
Essa é a imagem do resultado:

![](proto-constructor-animal-rabbit.svg)

On the picture, `"prototype"`is ahorizontal arrow, meaning a regular property, and `[[Prototype]]`isvertical,meaning the inheritance of `rabbit`from `animal`.
Na imagem, `"prototype"`é aseta na horizontal, indicando uma propriedade regular, e `[[Prototype]]`está navertical,indicando a herança de `rabbit`vinda de `animal`.

```smart header="`F.prototype`only used at`new F` time"
`F.prototype`property is only used when`new F`is called, it assigns`[[Prototype]]`of the new object.
```smart header="`F.prototype`é usada apenas na chamada`new F`"
A propriedade`F.prototype`é usada apenas quando`new F`é chamado, e ela atribui um valor para o`[[Prototype]]`do novo objeto.

If, after the creation,`F.prototype`property changes(`F.prototype = <another object>`),then new objects created by `new F`will have another object as `[[Prototype]]`,but already existing objects keep the old one.
Se, depois da criação, a propriedade`F.prototype`mudar(`F.prototype = <another object>`),então novos objetos criados com `new F`vão ter outro objeto como `[[Prototype]]`,enquanto os objetos que já existirem vão manter o antigo.
```

##DefaultF.prototype, constructor property
## F.prototype padrão, propriedade do construtor

Every function has the`"prototype"` property even if we don't supply it.
Toda função tem a propriedade`"prototype"`, mesmo quando nós não a provermos.

The default`"prototype"`is an object with the only property`constructor`that points back to the function itself.
O`"prototype"`padrão é um objeto com apenas uma propriedade`constructor`que aponta para a própria função a que pertence.

Like this:
Assim:

```js
function Rabbit() {}
Expand All@@ -64,58 +64,58 @@ Rabbit.prototype = { constructor: Rabbit };

![](function-prototype-constructor.svg)

We can check it:
Nós podemos conferir isso:

```js run
function Rabbit() {}
//by default:
//Por definição:
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true
```

Naturally, if we do nothing, the`constructor`property is available to allrabbits through `[[Prototype]]`:
Naturalmente, se nós não fizermos nada, a propriedade`constructor`está disponível para todos os coelhos (*rabbits*) através do `[[Prototype]]`:

```js run
function Rabbit() {}
//by default:
//Por definição:
// Rabbit.prototype = { constructor: Rabbit }

let rabbit = new Rabbit(); //inherits from {constructor: Rabbit}
let rabbit = new Rabbit(); //herda de {constructor: Rabbit}

alert(rabbit.constructor == Rabbit); // true (from prototype)
alert(rabbit.constructor == Rabbit); // true (vindo do protótipo)
```

![](rabbit-prototype-constructor.svg)

We can use`constructor`property to create a new object using the same constructor as the existing one.
Nós podemos usar a propriedade`constructor`para criar um objeto novo usando o próprio construtor de um objeto que já exista.

Like here:
Como abaixo:

```js run
function Rabbit(name) {
this.name = name;
alert(name);
}

let rabbit = new Rabbit("White Rabbit");
let rabbit = new Rabbit("Coelho Branco");

*!*
let rabbit2 = new rabbit.constructor("Black Rabbit");
let rabbit2 = new rabbit.constructor("Coelho Preto");
*/!*
```

That's handy when we have an object, don't know which constructor was used for it (e.g. it comes from a 3rd party library),and we need to create another one of the same kind.
Isso é prático quando nós temos um objeto, não sabemos que construtor foi usado para ele (de uma biblioteca de terceiros, por exemplo),e nós precisamos de criar outro objeto do mesmo tipo.

But probably the most important thing about`"constructor"`is that...
Mas provavelmente a coisa mais importante sobre o`"constructor"`é que...

**...JavaScriptitself does not ensure the right`"constructor"` value.**
**...O próprioJavaScriptnão garante qual é o valor correto do`"constructor"`.**

Yes, it exists in the default`"prototype"`for functions, but that's all. What happens with it later--is totally on us.
Sim, existe um`"prototype"`padrão para funções, mas é só isso. O que acontece com ele depois--está totalmente por nossa conta.

In particular,if we replace the defaultprototype as a whole, then there will be no`"constructor"`in it.
Em particular,se nós substituirmos o `prototype` padrão, não vai haver um`"constructor"`nele.

For instance:
Por exemplo:

```js run
function Rabbit() {}
Expand All@@ -129,18 +129,18 @@ alert(rabbit.constructor === Rabbit); // false
*/!*
```

So, to keep the right`"constructor"`we can choose to add/remove properties to the default`"prototype"`instead of overwriting it as a whole:
Portanto, para manter o`"constructor"`certo, nós podemos escolher adicionar/remover propriedades do`"prototype"`ao invés de sobrescrevê-lo completamente:

```js
function Rabbit() {}

//Not overwrite Rabbit.prototypetotally
//just add to it
//não sobrescreva Rabbit.prototypecompletamente
//apenas adicione
Rabbit.prototype.jumps = true
//the defaultRabbit.prototype.constructoris preserved
//oRabbit.prototype.constructorpadrão fica preservado
```

Or, alternatively, recreate the`constructor`property manually:
Outra alternativa é recriar a propriedade`constructor`manualmente:

```js
Rabbit.prototype = {
Expand All@@ -150,26 +150,26 @@ Rabbit.prototype = {
*/!*
};

//nowconstructoris also correct, because we added it
//agora oconstructortambém está correto, porque nós o adicionamos
```

## Resumo

## Summary
Neste capítulo, nós descrevemos brevemente a forma de configurar um `[[Prototype]]` para os objetos criados via função construtura. Mais tarde nós vamos ver padrões (*patterns*) mais avançados de programação que dependem disso.

In this chapter we briefly described the way of setting a `[[Prototype]]` for objects created via a constructor function. Later we'll see more advanced programming patterns that rely on it.
É tudo bem simples, mas aqui estão algumas notas para deixar as coisas claras:

Everything is quite simple, just a few notes to make things clear:
- A propriedade `F.prototype` (não confunda com o `[[Prototype]]`) configura o `[[Prototype]]` de novos objetos quando `new F()` é chamado.
- O valor de `F.prototype` deveria ser um objeto ou `null`: outros valores não vão funcionar.
- A propriedade `"prototype"` só tem o efeito especial quando configurada em uma função construtora, e invocada com `new`.

- The `F.prototype` property (don't mistake it for `[[Prototype]]`) sets `[[Prototype]]` of new objects when `new F()` is called.
- The value of `F.prototype` should be either an object or `null`: other values won't work.
- The `"prototype"` property only has such a special effect when set on a constructor function, and invoked with `new`.
Em objetos regulares, o `prototype` não tem nada de especial:

On regular objects the `prototype` is nothing special:
```js
let user = {
name: "John",
prototype: "Bla-bla" //no magic at all
prototype: "Bla-bla" //nenhuma mágica aqui
};
```

By default all functions have`F.prototype = { constructor: F }`,so we can get the constructor of an object by accessing its `"constructor"` property.
Por padrão, todas as funções possuem`F.prototype = { constructor: F }`,então nós podemos obter o construtor de um objeto acessando sua propriedade `"constructor"`.
4 changes: 4 additions & 0 deletionsimages.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
proto-constructor-animal-rabbit.svg:
White Rabbit:
text: Coelho Branco
position: center

[8]ページ先頭

©2009-2025 Movatter.jp