path: root/files/pt-pt/web/javascript/reference/classes/index.html

---
title: Classes
slug: Web/JavaScript/Reference/Classes
tags:
  - Classes
  - Construtores
  - ECMAScript 2015
  - Herança
  - Intermedio
  - JavaScript
translation_of: Web/JavaScript/Reference/Classes
---
<div>{{JsSidebar("Classes")}}</div>

<p>Classes JavaScript , introduzidas no ECMAScript de 2015, são principalemente syntactical sugar sobre a herança baseada em prototipagem do JavaScript. A sintaxe de classe <strong>não </strong>introduz no JavaScript nenhum novo modelo de herança do paradigma das linguagens orientado a objetos .</p>

<h2 id="Definição_de_classes">Definição de classes</h2>

<p>As classes são na realidade "<a href="/en-US/docs/Web/JavaScript/Reference/Functions">funções</a> especiais", e, tal como você pode definir o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expressões de funções</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">declarações de funções</a>, a sintaxe de classe tem dois componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">expressões de classes</a> e a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaração da classe</a>.</p>

<h3 id="Declaração_de_classes">Declaração de classes</h3>

<p>Uma forma de definir uma classe é usar uma <strong>declaração de classe</strong>. Para declarar uma classe, utiliza-se a palavra reservada <code>class</code> seguida do nome da classe ("Rectangle" no seguinte exemplo).</p>

<pre class="brush: js">class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}</pre>

<h4 id="Hoisting">Hoisting</h4>

<p>Uma diferença importante entre a <strong>declaração de funções</strong> e a <strong>declaração de classes</strong> é que a declaração de funções são {{Glossary("Hoisting", "hoisted")}} e a declaração de classes não. É preciso primeiro declarar a classe e só depois aceder-lhe, caso contrário, como no código que se segue, será lançada uma {{jsxref("ReferenceError")}}:</p>

<pre class="brush: js example-bad">var p = new Rectangle(); // ReferenceError

class Rectangle {}
</pre>

<h3 id="Expressão_de_Classe">Expressão de Classe</h3>

<p>A <strong>expressão de classe</strong> é outra forma de definir uma classe. As expressões de classes podem ter nome o ser anónimas. O nome dado a uma expressão de classe é local ao corpo da classe. (ainda assim pode ser obtido através do propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">.name</a> da classe (não da instância) )</p>

<pre class="brush: js">// unnamed
var Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Rectangle = class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
</pre>

<div class="blockIndicator note">
<p><strong>Nota:</strong> <strong>Expressões </strong>de classes também padecem da mesma situação de hoisting mencionada para as <strong>declarações </strong>de classes.</p>
</div>

<h2 id="Definição_de_corpo_de_classe_e_de_método">Definição de corpo de classe e de método</h2>

<p>O corpo da classe é a parte que está entre as chavetas <code>{}</code>. É aqui que são definidos os membros da classe, tais como, métodos e construtores.</p>

<h3 id="Strict_mode_-_modo_estrito">Strict mode - modo estrito</h3>

<p>Os corpos da <em>declaração de classes </em>e da <em>expressão de classes </em>são executados em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> i.e. construtor, métodos estáticos e de prototipo, funções getter e setter são executadas em modo estrito.</p>

<h3 id="Construtor_(constructor)">Construtor (<em>constructor</em>)</h3>

<p>O método <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> é um método especial para criar e inicializar um objto criado de uma <code>class</code>. Numa classe, apenas pode existir um método especial com o nome "constructor". Se a classe tiver mais do que uma occorrência de um método <code>constructor</code> será lançada uma  {{jsxref("SyntaxError")}}.</p>

<p>Um construtor pode utlizar a palavra reservada <code>super</code> para invocar o construtor da classe pai.</p>

<h3 id="Métodos_de_Prototype">Métodos de Prototype </h3>

<p>Ver também <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definição de métodos</a>.</p>

<pre class="brush: js">class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100</pre>

<h3 id="Métodos_estáticos">Métodos estáticos</h3>

<p>A palavra reservada <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> define um método como estático para uma classe. Os métodos estáticos são chamados sem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instanciarem </a>as suas classes e <strong>não podem </strong>ser chamados a partir de instâncias da classe. Os métodos estáticos são frequentemente utilizados para criar funções utilitárias para uma aplicação.</p>

<pre class="brush: js">class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre>

<h3 id="Boxing_com_métodos_estáticos_e_de_protótipo">Boxing com métodos estáticos e de protótipo </h3>

<p>Quando um método estático é chamado sem um objeto correspondente ao "this", o valor do "this" é então <code>undefined</code> dentro do método chamado. O comportamento será o mesmo, mesmo que a diretiva <code>"use strict"</code> não esteja presente, isto porque o código contido no limite sintático do corpo da <code>class</code> é sempre executado em modo estrito.</p>

<pre class="brush: js">class Animal {
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined</pre>

<p> </p>

<p>Se o texto acima for escrito usando a sintaxe tradicional baseada em função, o autooboxing ocorrerá nas chamadas de método no modo não estrito com base no valor inicial do <em>this</em>. Se o valor inicial for <code>undefined</code>, isso será definido para o objeto global.</p>

<p>Autoboxing não acontecerá no modo estrito, o valor do <em>this </em>permanece como passado ao método.</p>

<p> </p>

<pre><code>function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object</code></pre>

<h3 id="Propriedades_de_instância">Propriedades de instância</h3>

<p>Propriedades de instância devem ser definidas dentro de métodos da classe:</p>

<pre><code>class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}</code></pre>

<p>Propriedades estáticas da classe e propriedades de dados do protótipo devem ser definidas fora da declaração do ClassBody:</p>

<pre><code>Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;</code></pre>

<h3 id="Declaração_de_campos_(Field)">Declaração de campos (<em>Field</em>)</h3>

<div class="blockIndicator warning">
<p>Declarações de campo públicos e privados são uma <a href="https://github.com/tc39/proposal-class-fields">funcionalidade experimental (stage 3)</a>  proposta no <a href="https://tc39.github.io/beta/">TC39</a>, o comité de padrões JavaScript. O suporte nos navegadores é limitado, mas a funcionalidade pode ser usada por meio de uma etapa de <em>build</em> com sistemas como o <a href="https://babeljs.io/">Babel</a>.</p>
</div>

<h4 id="Declaração_de_campos_(field_)_públicos">Declaração de campos (<em>field </em>) públicos</h4>

<p>Com a sintaxe de declaração de campo JavaScript, o exemplo acima pode ser escrito como:</p>

<pre><code>class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}</code></pre>

<p> </p>

<p>Ao declarar campos antecipadamente, as definições de classe se tornam mais autodocumentadas e os campos estão sempre presentes.</p>

<p>Como visto acima, os campos podem ser declarados com ou sem um valor padrão.</p>

<p> </p>

<h4 id="Declaração_de_campos_(field)_privados">Declaração de campos (<em>field</em>) privados </h4>

<p>Usando campos privados, a definição pode ser refinada como abaixo.</p>

<pre><code>class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {
    this.#height = height;
    this.#width = width;
  }
}</code></pre>

<p> </p>

<p>É um erro referenciar campos privados de fora da classe. eles só podem ser lidos ou escritos dentro do corpo da classe. Ao definir coisas que não são visíveis fora da classe, você garante que os utilizadores das suas classes não dependeram de estruturas internas, que podem mudar a versão para a versão.</p>

<div class="blockIndicator note">
<p>Campos privados só podem ser declarados antecipadamente numa declaração de campo.</p>
</div>

<p>Os campos privados não podem ser criados posteriormente através da sua afetação, como se pode fazer com as propriedades normais.</p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<h2 id="Derivação_de_classes_com_extends">Derivação de classes com <code>extends</code></h2>

<p>A palavra reservada <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> é utilizada na <em>declaração de classes </em>ou na <em>expressão de classes</em> para criar uma classe filha ou derivada de outra .</p>

<pre class="brush: js">class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
</pre>

<p>Se houver um construtor presente numa classe derivada, este precisa de chamar super() antes de utilizar o "this".</p>

<p>A tradicionais "classes" function-based podem também ser extendidas:</p>

<pre class="brush: js">function Animal (name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
</pre>

<p>É de notar que uma classe não pode estender um objeto regular (non-constructible). Alternativamente, para se criar herança a partir de um objeto regular, deve ser usado {{jsxref("Object.setPrototypeOf()")}}:</p>

<pre class="brush: js">var Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
}

// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.
</pre>

<h2 id="Espécies">Espécies</h2>

<p>Se quiser devolver um objeto do tipo {{jsxref("Array")}} na sua classe derivada <code>MyArray</code>. O padrão espécies permite-lhe redefinir o construtor por omissão.</p>

<p>Por exemplo, na utilização de um método como o {{jsxref("Array.map", "map()")}}, o qual devolve o construtor por omissão, querer-se-á que estes métodos devolvam um objeto pai do tipo <code>Array</code>, em vez de um objeto <code>MyArray</code>. O símbolo {{jsxref("Symbol.species")}} permite fazer isto:</p>

<pre class="brush: js">class MyArray extends Array {
  // Overwrite species to the parent Array constructor
  static get [Symbol.species]() { return Array; }
}

var a = new MyArray(1,2,3);
var mapped = a.map(x =&gt; x * x);

console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true
</pre>

<h2 id="Chamadas_à_super_classe_com_super">Chamadas à super classe com <code>super</code></h2>

<p>A palavra reservada <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> é utilizada para chamar funções no objeto pai do objeto.</p>

<pre class="brush: js">class Cat {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

var l = new Lion('Fuzzy');
l.speak();
// Fuzzy makes a noise.
// Fuzzy roars.

</pre>

<h2 id="Mix-ins">Mix-ins</h2>

<p>A subclasses abstratas ou <em>mix-ins</em> são templates para classes. Uma classe ECMAScript apenas pode ter uma única superclasse, Portanto, múltiplas heranças de classes de ferramentas, por exemplo, não são possíveis. A funcionalidade deve ser fornecida pela superclasse.</p>

<p>Uma função com uma superclasse como entrada e uma subclasse estendendo aquela superclasse como saída pode ser usada para implementar mix-ins no ECMAScript.:</p>

<pre class="brush: js">var calculatorMixin = Base =&gt; class extends Base {
  calc() { }
};

var randomizerMixin = Base =&gt; class extends Base {
  randomize() { }
};
</pre>

<p>Uma classe que usa esses mix-ins pode ser escrita assim:</p>

<pre class="brush: js">class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</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('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Definição inicial.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ES2016')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ES2017')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_no_Browser">Compatibilidade no Browser </h2>

<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, consulte: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div>

<p>{{Compat("javascript.classes")}}</p>

<h2 id="Executar_no_Scratchpad">Executar no Scratchpad</h2>

<p>Uma classe não pode ser redefinida. Se estiver a escrever código no Scratchpad (Firefox menu Tools &gt; Web Developer &gt; Scratchpad) e se 'executar' a definição de uma classe com o mesmo nome duas vezes, irá receber um obscuro SyntaxError: redeclaration of let &lt;class-name&gt;.</p>

<p>Para voltar a executar uma definição, utilise o menu Scratchpad's Execute &gt; Reload and Run.<br>
 Vote, por favor, no bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
 <li>{{jsxref("Operators/super", "super")}}</li>
 <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
</ul>