diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/javascript/reference/operators/property_accessors | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pt-br/web/javascript/reference/operators/property_accessors')
-rw-r--r-- | files/pt-br/web/javascript/reference/operators/property_accessors/index.html | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/operators/property_accessors/index.html b/files/pt-br/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..2931effbdb --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,189 @@ +--- +title: Assessores de propriedade +slug: Web/JavaScript/Reference/Operators/Property_Accessors +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Os assessores de propriedade fornecem acesso as propriedades de um objeto usando a notação de ponto ou a notação de colchetes.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">object.property +object["property"] +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p><span id="result_box" lang="pt"><span>Pode-se</span> <span>pensar em</span> <span>um objeto</span> <span>como uma matriz associativa</span></span> (a.k.a. <em>map</em>, <em>dictionary</em>, <em>hash</em>, <em>lookup table</em>). As chaves nesta matriz são os nomes das propriedades dos objetos. <span id="result_box" lang="pt"><span>É típico</span> <span>quando se fala de</span> <span>propriedades de um objeto</span> <span>para fazer uma</span> <span>distinção entre</span> <span>propriedades e métodos</span></span>. No entanto, a distinção entre propriedade/método é um pouco mais do que convenção. <span id="result_box" lang="pt"><span>Um método</span> <span>é simplesmente</span> <span>uma propriedade que</span> <span>pode ser chamada</span><span>, por exemplo</span><span>, se tiver</span> <span>uma referência</span> <span>a uma instância</span> <span>de <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions">Function</a></span> <span>como seu valor.</span></span></p> + +<p>Há duas maneira de acessar propriedades: notação de ponto ou a notação de colchetes.</p> + +<h3 id="Notação_de_ponto">Notação de ponto</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p>Neste código, a propriedade deve ser um identificador válido, i.e. uma sequência de carácteres alfanuméricos, incluíndo também o underline ("<code>_</code>") e o cifrão ("<code>$</code>"), não pode começar com um número. Por exemplo, <code>object.$1</code> é valido, enquanto <code>object.1</code> não é.</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Aqui, o método chamado "createElement" <span class="short_text" id="result_box" lang="pt"><span>é recuperado do</span> <span>documento e</span> <span>é chamado.</span></span></p> + +<p>Se você usar um método para um literal numérico e o literal numérico não tem expoente e nenhum ponto decimal, deixar de espaço em branco antes do ponto que precede a chamada de método para evitar que o ponto seja interpretado como um ponto decimal.</p> + +<pre class="brush: js">77 .toExponential(); +// ou +77 +.toExponential(); +// ou +(77).toExponential(); +// ou +77..toExponential(); +// ou +77.0.toExponential(); +// porque 77. === 77.0, sem ambiguidade :p</pre> + +<h3 id="Notação_de_colchete">Notação de colchete</h3> + +<pre class="brush: js">get = object[property_name]; +object[property_name] = set; +</pre> + +<p><code>property_name</code> é uma string. A string não precisa ser um identificador válido; pode ser qualquer valor, e.g. "1foo", "!bar!", ou até " " (um espaço).</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Isto faz exatamente a mesma coisa que o exemplo anterior.</p> + +<p>Um espaço antes da notação de colchete é permitido.</p> + +<pre class="brush: js">document ['createElement']('pre');</pre> + +<h3 id="Nomes_de_propriedades"><span class="short_text" id="result_box" lang="pt"><span>Nomes de propriedades</span></span></h3> + +<p><span class="short_text" id="result_box" lang="pt"><span>Nomes de propriedades</span></span> devem ser strings. Isto significa que objetos não-string não podem ser usados como chave em um objeto. Qualquer objeto não-string, incluindo um número, é <span class="short_text" id="result_box" lang="pt"><span>estereotipado</span></span> como uma string pelo método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString</a>.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'value'; +console.log(object[1]); +</pre> + +<p>A saída é "value", desde 1 é estereotipado como '1'.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>A saída também é "value", já que ambos foo e bar são convertidos para a mesma string. No motor de Javascript <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, esta string poderia ser "['object Object']".</p> + +<h3 id="Ligação_de_método">Ligação de método</h3> + +<p>Um método não é limitado ao objeto de quem é metodo. Especificamente, <code>this</code> não é fixo em um método, i.e., <code>this</code> não se referece necessariamente ao objeto contendo o método. Ao invés disso, <code>this</code> é "passado" pela função call. Veja <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this#Method_binding">method binding</a>.</p> + +<h3 id="Nota_sobre_eval">Nota sobre <code>eval</code></h3> + +<p>Novatos em JavaScript comentem muitas vezes o erro de usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a> onde a notação de colchete pode ser usada no lugar. Por exemplo, a sintaxe a seguir é muitas vezes vista em muitos scripts.</p> + +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +</pre> + +<p><code>eval</code> é lento e deve ser evitado sempre que possível. Também, <code>strFormControl</code> would have to hold an identifier, which is not required for names and IDs of form controls. It is better to use bracket notation instead:</p> + +<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value; +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object/defineProperty")}}</li> +</ul> |