javascript javascript WEB WEBフロントエンド開発

ES6のクラス定義について

投稿日:2017年12月6日 更新日:

 

概要

  • JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。
  • プロトタイプを使ってクラスと同等なことを実現するということがJavaScriptでも行われていました。
  • ECMAScript 6(ES6)でJavaScriptにも「クラス」の文法が追加されました。
  • Javascriptにはクラスという概念はないため、クラスベースの言語のクラスとは異なり、あくまでも、今までのプロトタイプを使った記述をClassで定義できるようになっただけ。
  • クラス定義の中ではメソッドしか定義出来ない。

 

クラスとコンストラクタの定義

  • ES6ではclassキーワードを使ってクラスを定義
  • classのブロックの中でconstructorという名前の関数を定義するとそれがコンストラクタとして利用されます。

 

メンバ変数 (インスタンス変数)

  • クラスの内部でメンバ変数を定義・参照するにはthis.<プロパティ名>を使います。プロパティの概念はないが、this.変数で定義される変数はpublicなプロパティ名として見える。
  • JavaScriptではJavaやC++のようにthisを省略することは出来ない。
  • javascriptには、privateやprotectedのようなアクセス修飾子が存在しない。

 

メソッド定義と呼び出し

  • classブロックの中にconstructor以外の名前の関数を定義するとメソッドになります。
  • メソッド内から他のメソッドの呼び出しを行う場合はthis.<メソッド名>(引数)を使います。メソッド呼び出しの際にthis を省略することは出来ない。
  • javascriptには、privateやprotectedのようなアクセス修飾子が存在しない。ただし名前規約で private なものを名前でわかりやすくして間違えてアクセスしないようにすることはできます。 Google の JavaScript のスタイルガイド では private なメソッド, メンバ変数は名前の末尾に _ をつけることが求められています。
  • プロパティの考えはなく、定義できるのはメソッドのみ。

 

継承

  • ES6 JavaScriptでクラスを継承するにはextendsを使います。
  • 親クラスのコンストラクタを呼び出すにはsuper(...)を使います。
  • 子クラスで親クラスと同名のメソッドを定義すればメソッドがオーバーライドされます。
  • 子クラスから親クラスのメソッドを呼び出すにはsuper.methodName(...)のようにします。
  • コンストラクタの上書き時はsuperを入れる

 

静的メソッド(クラスメソッド)

class構文は、静的メソッドの定義方法も用意しています。

クラスのインスタンスを作らずとも呼べるメソッドのこと。

 

 

参考にさせて頂いたページです。

ES6 におけるJavaScriptのクラス定義

ES2015新機能: JavaScriptのclassとmethod

javascriptでprivate変数とメソッドを定義する方法

 

 

 

スポンサーリンク

スポンサーリンク

-javascript, javascript, WEB, WEBフロントエンド開発

執筆者:

関連記事

JavaScriptのコンストラクタとプロトタイプについて

概要 Javascriptにはクラスという概念はない コンストラクタ定義+newによってインスタンスを生成する。 ES6以前ではclass構文が実装がされていなかったので、prototypeという機能 ...

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

Apache2のモジュール設定

Apache2のモジュール設定について Apache2はデフォルトでGCIモジュール(CGID)が無効になっている。 Apache2のモジュールの有効化/無効化の設定は、a2enmodコマンド(有効化 ...

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

HTML5についてのメモ書き

FileSystem API     HTML5 FileSystem Explorer Chromeの拡張機能に「HTML5 FileSystem Explorer」というツール ...


プロフィール
管理人です。 業務プログラムに勤しむ人です プロフィール詳細


検索
no image

2021/02/23

aaaaa

no image

2021/01/29

C++言語

no image

2021/01/29

ASP.NET Core

2020/05/11

Laravel

2020/05/05

requireについて