---
title: class
slug: Web/JavaScript/Reference/Statements/class
tags:
  - Classes
  - Declaração
  - ES2015
  - ES6
  - Estático
  - JavaScript
  - Static
translation_of: Web/JavaScript/Reference/Statements/class
---
<div>{{jsSidebar("Statements")}}</div>

<div>A <strong>declaração class</strong> cria uma nova classe com dado <strong>nome </strong>usando a herança do protótipo base.</div>

<p> </p>

<p>Você também pode definir uma classe usando {{jsxref("Operators/class", "class expression", "", 1)}}.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush: js">class <em>name</em> [extends] {
  // class body
}
</pre>

<h2 id="Descrição">Descrição</h2>

<p>Assim como as expressões de classe, o corpo de uma declaração de classe é executado em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>

<p>Declarações de classe não são {{Glossary("Hoisting", "hoisted")}} (ao contrário de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Declaração_simples_de_classe">Declaração simples de classe</h3>

<p>No exemplo a seguir, primeiro definimos uma classe chamada <em>Polygon</em>, então extendemos essa classe para criar uma classe chamada <em>Square</em>. Note que <em>super()</em>, usada no construtor, só pode ser usada em construtores e deve ser chamada antes da chave <em>this</em> ser usada.</p>

<pre class="brush: js">class Poligono {
  constructor(altura, largura) {
    this.nome = 'Polígono';
    this.altura = altura;
    this.largura = largura;
  }
}

class Quadrado extends Poligono {
  constructor(altura) {
    super(altura, altura);
    this.nome = 'Quadrado';
  }
}</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>



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

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

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
</ul>