質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.34%

  • JavaScript

    11219questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • オブジェクト指向

    212questions

    オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

JavaScriptのstaticメソッドの使い方

解決済

回答 2

投稿 2017/12/07 22:16 ・編集 2017/12/07 22:16

  • 評価
  • クリップ 2
  • VIEW 116

nekojiro

score 34

一度同じような質問をしました。そのときにJavaのstaticメソッドを参考にしていたのですが、他の言語は参考しないほうがいいと回答があったのでもう一度質問します。

JavaScriptのstaticメソッドを使うメリット、デメリットは何ですか。
どのようなときに使うべきですか。
また下記使い方はjavascriptのオブジェクト指向的に使うべきなんでしょうか。
staticにすると可読性が上がっていいと思います。
exampleconsole.logで確認すると__proto__constructorの中にbメソッドがあるのでインスタンスにコピーされてないと思うのでメモリも多く使っているわけでもないから使ったほうがいいよう気がします。

class Example {
  constructor(number) {
    this.number = number;
  }

  a() {
    return Example.b(this.number);
  }

  static b(number) {// thisを使ってないことが一目でわかる
    return number * 2;
  }
}

const example = new Example(2);
console.log(example);// オブジェクトの中にbメソッドはない
console.log(example.a());
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/12/08 11:14

    メソッド a も、実体はインスタンスではなく、Example.prototype にあるのでやはりコピーされていないような?

    キャンセル

  • nekojiro

    2017/12/08 11:22

    仰る通りです。メッソドaもprototypeになってます。

    キャンセル

回答 2

+4

staticにする意味は「◯◯という分野に属する△△という機能」を表現するのによく使われます。JavaScript標準にMathクラスがありますが、Mathクラスをnewして使うことはないですよね?でもMath.abs()とかで使われますね。これは「数学的機能をまとめたMathクラス」にstaticでメソッドをもたせることにより、見た人に「あ、これは数学の絶対値(Absolute)を求める関数か」とひと目で分かるようになります。いきなりabs()と書かれるより、頭に「数学」を表すMathが付いているほうが可読性が上がりますね。

また、グローバル関数として定義するのではなく、クラスのstaticメソッドとして持たせることにより「関数名が同名であっても干渉されない」メリットがあります。例えばグローバルにfunction hoge()と定義してしまうと、後から追加したコードでhogeという名前のグローバル関数を作れなくなりますが、Hogeクラスのhogeというstaticメソッドとして定義すれば、別の人はFugaクラスのhogeといった具合に「別のクラスで同じ名前のメソッドを定義しても大丈夫」になります。これは例えば「copy」や「clone」や「add」といった、「誰でも付けそうな名前のメソッド」で特に効果を発揮します。

投稿 2017/12/08 10:52

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

クラス変数のないjavascriptで静的メソッドやクラスメソッドを使うメリットはほとんどなさそうな気がします。

一方でデメリットもあまりないと思いますが、質問のコードのようにメソッド内でクラス名を直書きするのは、継承でバグを生みやすくなりそうな気がします。

class Example {
  constructor(number) {
    this.number = number;
  }

  a() {
    return Example.b(this.number);
  }

  static b(number) {
    return number * 2;
  }
}
class Example2 extends Example {
  static b(number) {
    return number * 3;
  }
}

const example = new Example2(2);
example.a();   //4


this.constructorからたどったほうがいいのではないかな、と。
クラスへの参照があれば楽でいいんですけどねえ。
 

 コメントを受けて追記

いえいえ、こんな書き方をすれば継承でも使えると思いますよ。

class Example {
  constructor(number) {
    this.number = number;
  }

  get cls_(){
    return this.constructor;
  }

  a() {
    return this.cls_.b(this.number);
  }

  static b(number) {
    return number * 2;
  }
}

class Example2 extends Example {
  static b(number) {
    return number * 3;
  }
}

const example = new Example2(2);
return example.a()//6;

投稿 2017/12/08 12:09

編集 2017/12/08 12:51

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/08 12:32

    継承のことは全く考えていませんでした。継承するなら使わないほうがよさそうですね。

    キャンセル

  • 2017/12/08 12:52

    コメントを受けて追記しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.34%

関連した質問

  • 解決済

    paizaのスキルチェックでおかしなことになります........

    こんばんは paizaのスキルチェックをしていておかしなことになったので質問しました。 現在JavaScriptで進めているのですが、 process.stdin

  • 解決済

    javascriptのobjectのソートについて

    以下のようなオブジェクトがあり、 Object {69a560179519: { id: 1, time:11:00}, 1b6507a0111a: { id: 2, tim

  • 解決済

    [[prototype]]とprototypeと__proto__について

    お世話になります。 [[prototype]]とprototypeとprotoの違いを端的にご教授をお願い致します。

  • 受付中

    constructorと合致するもの

    console.log( Myclass.__proto__ === Function.prototype, Myclass.prototype.__proto__ === Obj

  • 解決済

    オブジェクト、コンストラクタの考え方

    お世話になっております。 Javascriptの基礎的な部分を本気で理解しようとしているのですが、どうもどの参考書やサイトを見ても一足飛びのところがあり、腹落ちしない部分があ

  • 解決済

    apply()やcall()を使う機会を知りたい

    apply()、call()メソッドについて この2つのメソッドについては、使用している実際のコードを目にすることもあり、これまでにもネットで調べて自分でカスタマイズしつつ検証し

  • 解決済

    JavaScriptのオブジェクト指向

    前提・実現したいこと クラスというものがどのようなものであるか、はっきりと理解できているわけではないのですが、 function内に大量の処理を記述し、それをインスタンス化?するこ

  • 受付中

    JSのundefined対策について

    JavaScriptのundefined対策について、スマートな方法がないか試行錯誤しています。 例えば下記のList.jsの例では、msgList配列をmapでループする場合、m

同じタグがついた質問を見る

  • JavaScript

    11219questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • オブジェクト指向

    212questions

    オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。