---
title: static
slug: Web/JavaScript/Reference/Classes/static
tags:
  - Classes
  - ECMAScript 2015
  - ES6
  - JavaScript
  - Static
  - 静态方法
translation_of: Web/JavaScript/Reference/Classes/static
---
<div>{{jsSidebar("Classes")}}</div>

<p>类（class）通过 <strong>static </strong>关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。</p>

<p> </p>

<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>



<h2 id="语法">语法</h2>

<pre class="syntaxbox">static methodName() { ... }</pre>

<h2 id="描述">描述</h2>

<p>静态方法调用直接在类上进行，不能在类的实例上调用。静态方法通常用于创建实用程序函数。</p>

<h2 id="调用静态方法">调用静态方法</h2>

<h3 id="从另一个静态方法">从另一个静态方法</h3>

<p>静态方法调用同一个类中的其他静态方法，可使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> </code>关键字。</p>

<pre class="brush: js">class StaticMethodCall {
    static staticMethod() {
        return 'Static method has been called';
    }
    static anotherStaticMethod() {
        return this.staticMethod() + ' from another static method';
    }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'
</pre>

<h3 id="从类的构造函数和其他方法">从类的构造函数和其他方法</h3>

<p>非静态方法中，不能直接使用 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 关键字来访问静态方法。而是要用类名来调用：<code>CLASSNAME.STATIC_METHOD_NAME()</code> ，或者用构造函数的属性来调用该方法： <code>this.constructor.STATIC_METHOD_NAME()</code>.</p>

<pre class="brush: js">class StaticMethodCall {
    constructor() {
        console.log(StaticMethodCall.staticMethod());
        // 'static method has been called.'
        console.log(this.constructor.staticMethod());
        // 'static method has been called.'
    }
    static staticMethod() {
        return 'static method has been called.';
    }
}</pre>

<h2 id="示例">示例</h2>

<p>下面的例子说明了这几点：</p>

<ol>
 <li>静态方法如何在类上实现。</li>
 <li>具有静态成员的类，可以被子类化 。</li>
 <li>什么情况下静态方法可以调用，什么情况下不能调用。</li>
</ol>

<p class="brush: js"> </p>

<pre class="brush: js">class Tripple {
  static tripple(n = 1) {
    return n * 3;
  }
}


class BiggerTripple extends Tripple {
  static tripple(n) {
    return super.tripple(n) * super.tripple(n);
  }
}


console.log(Tripple.tripple());// 3
console.log(Tripple.tripple(6));// 18

let tp = new Tripple();

console.log(BiggerTripple.tripple(3));// 81（不会受父类实例化的影响）
console.log(tp.tripple());// 'tp.tripple 不是一个函数'.</pre>

<p class="brush: js"> </p>

<h2 id="规范">规范</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>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

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

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/class"><code>class</code>表达式</a></li>
 <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/class"><code>class</code>声明</a></li>
 <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
</ul>