Javascriptの新しいクラス

| | | | | |

JavaScriptはプロトタイプに基づいています。オブジェクトを宣言するたびに、そのオブジェクトに関連付けられたプロパティとメソッドを拡張するプロトタイププロパティが作成されます。

近年、多くのJavaScript開発者は、オブジェクトを埋め込むように方向付ける方法を探しています。コード内のオブジェクトを設計します。これにより、プロトタイプを拡張するクラスと呼ばれるJavaScriptの新しいタイプのオブジェクトが生まれました。

このガイドでは、クラスとは何か、クラスが使用される理由、およびクラスを実装する方法について説明します。コード内のクラス。クラスを開始するための例を示します。

JavaScriptクラスとは何ですか?

クラスはオブジェクトのモデルを宣言する方法です。

オブジェクト指向プログラミング言語に精通している場合は、それらがクラスとオブジェクトに大きく依存していることをご存知でしょう。クラスはデータ型のテンプレートのようなものです。つまり、どのデータを保存でき、どのメソッドにアクセスできるかを示します。オブジェクトはこのクラスのインスタンスです。

クラスの例はBookです。このクラスには、書籍に保存できる情報とそのデータを変更する方法の青写真が含まれます。オブジェクトは、個々の本であるdesireと呼ばれるストリートカーである可能性があります。

JavaScriptでは、クラスは私たちがシンタックスシュガーと呼んでいるものです。クラスの構文は便利ですが、必ずしも新しい機能が追加されるわけではありません。

クラスは、ReactやNext.jsなどの最新のJavaScriptフレームワークで一般的に使用されています。

関数に関連するレッスン

この記事の1つを覚えているなら、それはこの1つです。クラスはごく普通の関数です

クラスと関数式の唯一の違いは、宣言方法です。関数はキーワード を使用し、クラスはクラスを使用します。技術的にはキーワードで、クラスキーワードを使用しなくてもクラスを宣言できます

2つの関数を作成し、それらのプロトタイプを出力することで、同じであると言えます。

p>

クラスと関数の式は次を返します:

function()

function()

2つの関数とクラスは、プロトタイプに基づいて同じアーク読み取りを使用します。

クラスをどのように定義しますか?これはすばらしい質問です。

キーワードを使用してクラスを定義できます。クラスを定義したら、コンストラクター()関数を使用して、デフォルト値で初期化できます。

JavaScriptコンソールを開き、次のコードを貼り付けます。

p>

これにより、 Bookというクラスが作成されます。クラスには、クラス構築メソッドで定義したTitleとAuthorの2つの値を格納できます。このクラスのオブジェクトを作成するには、次のコードを使用できます。

他のオブジェクトと同じように、クラスの値を取得できます。

コードは次を返します:。プロトタイプでクラスを使用する利点の1つは、クラス内でメソッドを宣言できることです。つまり、既存の関数に新しいメソッドを追加するために protocol構文を使用する必要はありません

次の例を見てみましょう。

クラス内に存在するGetDetails()というメソッドを宣言しました。すべてのコードがグループ化されているので便利です。関数をGetDetails()と呼びます:

コードは次を返します:

ストリートカーと呼ばれる欲望は、テネシーウィリアムズによって書かれた本です

レッスンの継承

他のオブジェクト指向構造と同様に、クラスは他のクラスからプロパティを継承できます。

継承とは、継承するプロセスを指します。子クラスは、親クラスのメソッドとデータにアクセスできます。クラスから継承するには、 Extendキーワードを使用できます。 JavaScriptファイルを作成するか、JavaScriptコンソールを開いて、次のコードを貼り付けます。

以前にプロジェクトとして宣言した本のクラスを使用する、フィクションと呼ばれるクラスを作成しました。このコードでは、 super()キーワードを使用して、親クラスの作成者であるBookからタイトルと値を継承しました。そこで、新しい属性 fiction を定義しました。この属性の値は、デフォルトでtrueに設定されています

新しいフィクションクラスのオブジェクトを作成します。
< / p>

コードはtrueを返します。 fictionクラスは、デフォルトでtrueである fictionと呼ばれる要素を格納します。Bookクラスのインスタンスからこの値にアクセスしようとしても、何も返されません。実際、「フィクション」はフィクションクラスでアクセスできます。

ゲッターとセッター

クラスを操作するときは、ゲッター関数とセッター関数を使用する必要があります。

Get関数を使用すると、クラスのメソッドを取得できます。セッター関数を使用すると、クラス内の特定の要素の値を変更できます。これらの関数は、それぞれキーワード gettogetherを使用して示されます

次のコードを検討してください。

この例では、 authorという2つのメソッドを宣言しています。これらのメソッドの1つを使用すると、 authorの値を取得できます。これがgetメソッドです。もう1つの方法では、 authorの値を変更できます

次のコードを使用して、実際の動作を確認できます。

コードが返す:Tennessee Williams

We tra m という名前のオブジェクトを初期化し、 A Streetcar Named Desireというタイトルを付けました。次に、コードで定義したコンポーザーを使用して authorTennesseeWilliams を取得します。最後に、コンソールで author値を使用してauthor値を出力します。 playメソッド。

結論

クラスは新しいJavaScript機能に対応していませんが、オブジェクト指向プログラミングに慣れている場合は、記述関数を理解しやすくなります。

JavaScriptプロトタイプに基づいてデザインの抽象クラスを作成し、よりオブジェクト指向に見えるようにします。クラスは関数であるため、「外観」という言葉は非常に重要です。クラスは構文糖衣にすぎません。

これで、JavaScriptエキスパートのようなクラスを使い始める準備が整いました。

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method