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

---
title: 类
slug: Web/JavaScript/Reference/Classes
tags:
  - ECMAScript 2015
  - Học
  - JavaScript
  - 中级
  - 构造函数
  - 类
  - 继承
  - 高阶类
translation_of: Web/JavaScript/Reference/Classes
---
<div></div>

<div>{{JsSidebar("Classes")}}</div>

<p>类是用于创建对象的模板。他们用代码封装数据以处理该数据。 JS中的类建立在原型上，但也具有某些语法和语义未与ES5类相似语义共享。</p>

<h2 id="定义类">定义类</h2>

<p>实际上，类是“特殊的<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions">函数</a>”，就像你能够定义的<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/function">函数声明</a>一样，类语法有两个组成部分：<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/class">类表达式</a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/class">类声明</a>。</p>

<h3 id="类声明">类声明</h3>

<p>定义类的一种方法是使用<strong>类声明</strong>。要声明一个类，你可以使用带有<code>class</code>关键字的类名（这里是“Rectangle”）。</p>

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

<h4 id="提升">提升</h4>

<p><strong>函数声明</strong>和<strong>类声明</strong>之间的一个重要区别在于, 函数声明会{{Glossary("Hoisting", "提升")}}，类声明不会。你首先需要声明你的类，然后再访问它，否则类似以下的代码将抛出{{jsxref("ReferenceError")}}：</p>

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

class Rectangle {}
</pre>

<h3 id="类表达式">类表达式</h3>

<p><strong>类表达式</strong>是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。(不过，可以通过类的(而不是一个实例的) {{jsxref("Function.name", "name")}} 属性来检索它)。</p>

<pre class="brush: js notranslate">// 未命名/匿名类
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 命名类
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 输出: "Rectangle2"</pre>

<div class="blockIndicator note">
<p><strong>注意:</strong> 类<strong>表达式</strong>也同样受到<a href="/zh-CN/docs/Web/JavaScript/Reference/Classes$edit#Class_declarations">类声明</a>部分中提到的类型提升的限制。</p>
</div>

<h2 id="类体和方法定义">类体和方法定义</h2>

<p>一个类的类体是一对花括号/大括号 <code>{}</code> 中的部分。这是你定义类成员的位置，如方法或构造函数。</p>

<h3 id="严格模式">严格模式</h3>

<p>类声明和类表达式的主体都执行在<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>下。比如，构造函数，静态方法，原型方法，getter和setter都在严格模式下执行。</p>

<h3 id="构造函数">构造函数</h3>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a>方法是一个特殊的方法，这种方法用于创建和初始化一个由<code>class</code>创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法。如果类包含多个<code>constructor</code>的方法，则将抛出 一个{{jsxref("SyntaxError")}} 。</p>

<p>一个构造函数可以使用 <code>super</code><strong> </strong>关键字来调用一个父类的构造函数。</p>

<h3 id="原型方法">原型方法</h3>

<p>参见<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Method_definitions">方法定义</a>。</p>

<pre class="brush: js notranslate">class Rectangle {
    // constructor
    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="静态方法">静态方法</h3>

<p><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Classes/static">static</a></code> 关键字用来定义一个类的一个静态方法。调用静态方法不需要<a href="/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)">实例化</a>该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。</p>

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

    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);
p1.displayName;
// undefined
p1.distance;
// undefined

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

<h3 id="用原型和静态方法绑定_this">用原型和静态方法绑定 this</h3>

<p>当调用静态或原型方法时没有指定 <em>this </em>的值，那么方法内的 <em>this </em>值将被置为 <strong><code>undefined</code></strong>。即使你未设置 <font face="consolas, Liberation Mono, courier, monospace">"use strict"</font> ，因为 <code>class</code> 体内部的代码总是在严格模式下执行。</p>

<pre class="brush: js notranslate">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>如果上述代码通过传统的基于函数的语法来实现，那么依据初始的 <em>this </em>值，在非严格模式下方法调用会发生自动装箱。若初始值是 <code>undefined</code>，<em>this</em> 值会被设为全局对象。</p>

<p>严格模式下不会发生自动装箱，<em>this </em>值将保留传入状态。</p>

<pre class="brush: js notranslate">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
</pre>

<h3 id="实例属性">实例属性</h3>

<p>实例的属性必须定义在类的方法里：</p>

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

<p>静态的或原型的数据属性必须定义在类定义的外面。</p>

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

<h3 id="字段声明">字段声明</h3>

<div class="blockIndicator warning">
<p>公共和私有字段声明是JavaScript标准委员会<a href="https://tc39.es/">TC39</a>提出的<a href="https://github.com/tc39/proposal-class-fields">实验性功能（第3阶段）</a>。浏览器中的支持是有限的，但是可以通过<a href="https://babeljs.io/">Babel</a>等系统构建后使用此功能。</p>
</div>

<h4 id="公有字段声明">公有字段声明</h4>

<p>使用JavaScript字段声明语法，上面的示例可以写成：</p>

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

<p>通过预先声明字段，类定义变得更加自我记录，并且字段始终存在。</p>

<p>正如上面看到的，这个字段可以用也可以不用默认值来声明。</p>

<h4 id="私有字段声明">私有字段声明</h4>

<p>使用私有字段，可以按以下方式细化定义。</p>

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

<p>从类外部引用私有字段是错误的。它们只能在类里面中读取或写入。通过定义在类外部不可见的内容，可以确保类的用户不会依赖于内部，因为内部可能在不同版本之间发生变化。</p>

<div class="blockIndicator note">
<p>私有字段仅能在字段声明中预先定义。 </p>
</div>

<p>私有字段不能通过在之后赋值来创建它们，这种方式只适用普通属性。</p>

<p>更多信息，请看<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields">class fields</a>.</p>

<h2 id="使用_extends_扩展子类">使用 <code>extends</code> 扩展子类</h2>

<p><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> 关键字在 <em>类声明 </em>或 <em>类表达式 </em>中用于创建一个类作为另一个类的一个子类。</p>

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用超类构造函数并传入name参数
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

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

<p>如果子类中定义了构造函数，那么它必须先调用 <code>super()</code> 才能使用 <code>this</code> 。</p>

<p>也可以继承传统的基于函数的“类”：</p>

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

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

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

<p>请注意，类不能继承常规对象（不可构造的）。如果要继承常规对象，可以改用{{jsxref("Object.setPrototypeOf()")}}：</p>

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

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

Object.setPrototypeOf(Dog.prototype, Animal);// 如果不这样做，在调用speak时会返回TypeError

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

<h2 id="Species">Species</h2>

<p>你可能希望在派生数组类 <em><code>MyArray</code> </em>中返回 {{jsxref("Array")}}对象。这种 species 方式允许你覆盖默认的构造函数。</p>

<p>例如，当使用像{{jsxref("Array.map", "map()")}}返回默认构造函数的方法时，您希望这些方法返回一个父<code>Array</code>对象，而不是<code>MyArray</code>对象。{{jsxref("Symbol.species")}} 符号可以让你这样做：</p>

<pre class="brush: js notranslate">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="使用_super_调用超类">使用 <code>super</code> 调用超类</h2>

<p><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/super">super</a></code> 关键字用于调用对象的父对象上的函数。</p>

<pre class="brush: js notranslate">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.');
  }
}
</pre>

<h2 id="Mix-ins_混入">Mix-ins / 混入</h2>

<p>抽象子类或者 mix-ins 是类的模板。 一个 ECMAScript 类只能有一个单超类，所以想要从工具类来多重继承的行为是不可能的。子类继承的只能是父类提供的功能性。因此，例如，从工具类的多重继承是不可能的。该功能必须由超类提供。</p>

<p>一个以超类作为输入的函数和一个继承该超类的子类作为输出可以用于在ECMAScript中实现混合：</p>

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

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

<p>使用 mix-ins 的类可以像下面这样写：</p>

<pre class="brush: js notranslate">class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>

<h2 id="规范">规范</h2>

<table>
 <tbody>
  <tr>
   <th scope="col">Specification</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
  </tr>
 </tbody>
</table>

<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>Initial definition.</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="浏览器兼容">浏览器兼容</h2>



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

<h2 id="重新运行一个类定义">重新运行一个类定义</h2>

<p>无法重新定义类。尝试这样做会产生一个 <code>SyntaxError</code>.</p>

<p>如果您正在使用Web浏览器（例如Firefox Web控制台， (<strong>Tools </strong>&gt;<strong> Web Developer </strong>&gt;<strong> Web Console</strong>)并且您两次“运行”具有相同名称的类的定义，您将收到一个 <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (请参阅中有关此问题的进一步讨论 {{Bug(1428672)}}.) 在Chrome开发者工具中执行类似的操作会给您一个以下信息： <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at &lt;anonymous&gt;:1:1</code>.</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{jsxref("Functions", "Functions", "", "true")}}</li>
 <li>{{jsxref("Statements/class", "class declaration", "", "true")}}</li>
 <li>{{jsxref("Operators/class", "class expression", "", "true")}}</li>
 <li>{{jsxref("Classes/Public_class_fields", "Public class fields", "", "true")}}</li>
 <li>{{jsxref("Classes/Private_class_fields", "Private class fields", "", "true")}}</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>
 <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li>
</ul>

<div id="gtx-trans" style="position: absolute; left: 160px; top: 11337px;">
<div class="gtx-trans-icon"></div>
</div>