You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The error message in most browsers does not give us much of a clue about what went wrong.
14
+
A mensagem de erro na maioria dos navegadores não fornece muita indicação sobra o que deu errado.
15
15
16
-
**The error appears because a semicolon is missing after `user = {...}`.**
16
+
**O erro ocorre porque está faltando um ponto e vírgula após user = {...}.**
17
17
18
-
JavaScript does not auto-insert a semicolon before a bracket `(user.go)()`, so it reads the code like:
18
+
JavaScript não insere automaticamente um ponto e vírgula antes de um colchete `(user.go)()`, então ele interpreta o código como:
19
19
20
20
```js no-beautify
21
21
let user = { go:... }(user.go)()
22
22
```
23
23
24
-
Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }`as a function with the argument`(user.go)`. And that also happens on the same line with `let user`, so the `user`object has not yet even been defined, hence the error.
24
+
Então também podemos ver que tal expressão conjunta é sintaticamente uma chamada do objeto `{ go: ... }`como uma função com o argumento`(user.go)`. E isso também acontece na mesma linha com `let user`, então o objeto `user`ainda nem foi definido, daí o erro.
25
25
26
-
If we insert the semicolon, all is fine:
26
+
Se inserirmos o ponto e vírgula, tudo fica bem:
27
27
28
28
```js run
29
29
let user = {
@@ -34,4 +34,4 @@ let user = {
34
34
(user.go)() // John
35
35
```
36
36
37
-
Please note that parentheses around `(user.go)`do nothing here. Usually they setup the order of operations, but here the dot`.`works first anyway, so there's no effect. Only the semicolon thing matters.
37
+
Por favor, note que os parênteses em torno de `(user.go)`não fazem nada aqui. Normalmente, eles estabelecem a ordem das operações, mas aqui o ponto`.`funciona primeiro de qualquer maneira, então não há efeito. A única coisa que importa é o ponto e vírgula.
1. Isso é uma chamada de método de objeto regular.
3
4
4
-
1. That's a regular object method call.
5
+
2. O mesmo, parênteses não alteram a ordem das operações aqui, o ponto é executado primeiro de qualquer maneira.
5
6
6
-
2. The same, parentheses do not change the order of operations here, the dot is first anyway.
7
-
8
-
3. Here we have a more complex call `(expression)()`. The call works as if it were split into two lines:
7
+
3. Aqui temos uma chamada mais complexa (expressão)(). A chamada funciona como se estivesse dividida em duas linhas:
9
8
10
9
```js no-beautify
11
-
f =obj.go; //calculate the expression
12
-
f(); //call what we have
10
+
f =obj.go; //calcula a expressão
11
+
f(); //chama o que temos
13
12
```
14
13
15
-
Here `f()` is executed as a function, without `this`.
16
-
17
-
4. The similar thing as `(3)`, to the left of the parentheses `()` we have an expression.
14
+
Aqui, f() é executado como uma função, sem this.
18
15
19
-
To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type.
16
+
4.A coisa semelhante ao`(3)`, à esquerda dos parênteses `()` temos uma expressão.
20
17
21
-
Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`.
18
+
Para explicar o comportamento de `(3)` e `(4)`, precisamos lembrar que os acessadores de propriedade (ponto ou colchetes) retornam um valor do Tipo de Referência.
22
19
20
+
Qualquer operação nele, exceto uma chamada de método (como a atribuição `=` ou `||`), o transforma em um valor comum, que não carrega a informação permitindo configurar `this`.
This article covers an advanced topic, to understand certain edge-cases better.
4
+
```warn header="Recurso aprofundado da linguagem"
5
+
Este artigo aborda um tópico avançado para uma compreensão mais aprofundada de casos específicos.
6
6
7
-
It's not important. Many experienced developers live fine without knowing it. Read on if you want to know how things work under the hood.
7
+
Não é algo crucial. Muitos desenvolvedores experientes conseguem viver bem sem conhecê-lo. Continue lendo se desejar entender como as coisas funcionam internamente.
8
8
```
9
9
10
-
A dynamically evaluated method call can lose`this`.
10
+
Uma chamada de método avaliada dinamicamente pode perder a referência de`this`.
11
11
12
-
For instance:
12
+
Por exemplo:
13
13
14
14
```js run
15
15
let user = {
@@ -18,42 +18,42 @@ let user = {
18
18
bye() { alert("Bye"); }
19
19
};
20
20
21
-
user.hi(); //works
21
+
user.hi(); //funciona
22
22
23
-
//now let's call user.hi or user.bye depending on the name
23
+
//agora, vamos chamar user.hi ou user.bye dependendo do nome
24
24
*!*
25
-
(user.name=="John"?user.hi:user.bye)(); //Error!
25
+
(user.name=="John"?user.hi:user.bye)(); //Erro!
26
26
*/!*
27
27
```
28
28
29
-
On the last line there is a conditional operator that chooses either `user.hi`or`user.bye`. In this case the result is`user.hi`.
29
+
Na última linha, há um operador condicional que escolhe entre `user.hi`ou`user.bye`. Neste caso, o resultado é`user.hi`.
30
30
31
-
Then the method is immediately called with parentheses`()`. But it doesn't work correctly!
31
+
Então, o método é imediatamente chamado com parênteses`()`. Mas não funciona corretamente!
32
32
33
-
As you can see, the call results in an error, because the value of`"this"`inside the call becomes`undefined`.
33
+
Como você pode ver, a chamada resulta em um erro, porque o valor de`"this"`dentro da chamada se torna`undefined`.
34
34
35
-
This works (object dot method):
35
+
Isso funciona (objeto, ponto, método):
36
36
```js
37
37
user.hi();
38
38
```
39
39
40
-
This doesn't (evaluated method):
40
+
Isso não funciona (método avaliado):
41
41
```js
42
-
(user.name=="John"?user.hi:user.bye)(); //Error!
42
+
(user.name=="John"?user.hi:user.bye)(); //Erro!
43
43
```
44
44
45
-
Why? If we want to understand why it happens, let's get under the hood of how `obj.method()`call works.
45
+
Por quê? Se quisermos entender porque isso acontece, vamos nos aprofundar em como funciona a chamada `obj.method()`por debaixo dos panos.
46
46
47
-
## Reference type explained
47
+
## Tipo por referência explicado
48
48
49
-
Looking closely, we may notice two operations in`obj.method()` statement:
49
+
Observando de perto, podemos notar duas operações na instrução`obj.method()`:
50
50
51
-
1.First, the dot`'.'`retrieves the property`obj.method`.
52
-
2.Then parentheses `()`execute it.
51
+
1.Primeiro, o ponto`'.'`recupera a propriedade`obj.method`.
52
+
2.Em seguida, os parênteses `()`o executam.
53
53
54
-
So, how does the information about `this`get passed from the first part to the second one?
54
+
Então, como a informação sobre `this`é passada da primeira parte para a segunda?
55
55
56
-
If we put these operations on separate lines, then`this`will be lost for sure:
56
+
Se colocarmos essas operações em linhas separadas, então`this`certamente será perdido:
57
57
58
58
```js run
59
59
let user = {
@@ -62,47 +62,47 @@ let user = {
62
62
};
63
63
64
64
*!*
65
-
//split getting and calling the method in two lines
65
+
//Divide a obtenção e a chamada do método em duas linhas
66
66
let hi =user.hi;
67
-
hi(); //Error, because this is undefined
67
+
hi(); //Erro, pois é undefined
68
68
*/!*
69
69
```
70
70
71
-
Here`hi = user.hi`puts the function into the variable, and then on the last line it is completely standalone, and so there's no`this`.
71
+
Aqui`hi = user.hi`coloca a função na variável, e então, na última linha, ela é completamente independente, e assim não há`this`.
72
72
73
-
**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).**
73
+
**Para fazer com que chamadas user.hi() funcionem, o JavaScript utiliza um truque: o ponto `.` não retorna uma função, mas um valor do [tipo por referência](https://tc39.github.io/ecma262/#sec-reference-specification-type) especial.**
74
74
75
-
The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language.
75
+
O tipo por referência é um "tipo de especificação". Não podemos usá-lo explicitamente, mas é utilizado internamente pela linguagem.
76
76
77
-
The value of Reference Type is a three-value combination `(base, name, strict)`, where:
77
+
O valor do tipo de referência é uma combinação de três valores `(base, name, strict)`, onde:
78
78
79
-
-`base`is the object.
80
-
-`name`is the property name.
81
-
-`strict`is true if`use strict`is in effect.
79
+
-`base`é o objeto.
80
+
-`name`é o nome da propriedade.
81
+
-`strict`é verdadeiro se`use strict`estiver em efeito.
82
82
83
-
The result of a property access `user.hi`is not a function, but a value of Reference Type. For`user.hi`in strict mode it is:
83
+
O resultado de um acesso à propriedade `user.hi`não é uma função, mas um valor de tipo de referência. Para`user.hi`em modo estrito (strict mode), é:
84
84
85
85
```js
86
-
//Reference Type value
86
+
//valor do Tipo de Referência
87
87
(user, "hi", true)
88
88
```
89
89
90
-
When parentheses `()` are called on the Reference Type, they receive the full information about the object and its method, and can set the right `this` (`user`in this case).
90
+
Quando parênteses são chamados no tipo de referência, eles recebem todas as informações sobre o objeto e o seu método, e podem definir o `this`correto (`user`nesse caso).
91
91
92
-
Reference type is a special "intermediary" internal type, with the purpose to pass information from dot`.`to calling parentheses`()`.
92
+
O tipo de referência é um tipo interno especial "intermediário", com o propósito de transmitir informações do ponto`.`para os parênteses de chamada`()`.
93
93
94
-
Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of`user.hi` (a function) and passes it on. So any further operation "loses" `this`.
94
+
Qualquer outra operação, como a atribuição `hi = user.hi`, descarta o tipo de referência como um todo, pega o valor de`user.hi` (uma função) e o repassa. Portanto, qualquer operação subsequente "perde" o `this`.
95
95
96
-
So, as the result, the value of`this`is only passed the right way if the function is called directly using a dot `obj.method()`or square brackets `obj['method']()`syntax (they do the same here). There are various ways to solve this problem such as[func.bind()](/bind#solution-2-bind).
96
+
Então, como resultado, o valor de`this`é apenas passado corretamente apenas se a função for chamada diretamente usando a sintaxe de ponto `obj.method()`ou colchetes `obj['method']()`(ambas fazem o mesmo aqui). Existem várias maneiras de resolver esse problema, como[func.bind()](/bind#solution-2-bind).
97
97
98
-
## Summary
98
+
## Resumo
99
99
100
-
Reference Type is an internal type of the language.
100
+
O Tipo de referência é um tipo interno da linguagem.
101
101
102
-
Reading a property, such as with dot`.`in`obj.method()`returns not exactly the property value, but a special "reference type" value that stores both the property value and the object it was taken from.
102
+
Ler uma propriedade, como com o ponto`.`em`obj.method()`não retorna exatamente o valor da propriedade, mas um valor especial do "tipo de referência" que armazena tanto o valor da propriedade quanto o objeto do qual foi extraído.
103
103
104
-
That's for the subsequent method call `()`to get the object and set `this`to it.
104
+
Isso é para a subsequente chamada de método `()`obter o objeto e definir `this`para ele.
105
105
106
-
For all other operations, the reference type automatically becomes the property value (a function in our case).
106
+
Para todas as outras operações, o tipo de referência automaticamente se torna o valor da propriedade (uma função no nosso caso).
107
107
108
-
The whole mechanics is hidden from our eyes. It only matters in subtle cases, such as when a method is obtained dynamically from the object, using an expression.
108
+
Toda a mecânica está oculta aos nossos olhos. Isso é relevante em casos sutis, como quando um método é obtido dinamicamente a partir do objeto, usando uma expressão.
0 commit comments