JavaScript：クラスへの決定的なガイド

良い一日、友達！



JavaScriptは、プロトタイプ継承モデルを使用します。各オブジェクトは、プロトタイプオブジェクトのフィールド（プロパティ）とメソッドを継承します。



オブジェクトを作成するためのテンプレートまたはスキーマとしてJavaまたはSwiftで使用されるクラスは、JavaScriptには存在しません。プロトタイプの継承にはオブジェクトのみがあります。



プロトタイプの継承は、クラス継承の古典的なモデルを模倣できます。これを行うために、ES6はクラスキーワードを導入しました：プロトタイプ継承のための構文シュガー。



この記事では、クラスの操作方法を学習します。クラス、そのプライベート（プライベート）およびパブリック（パブリック）フィールドとメソッドを定義し、インスタンスを作成します。

1.定義：クラスキーワード

classキーワードは、クラスを定義するために使用されます。

class User {
    //  
}

この構文はクラス宣言と呼ばれます。



クラスに名前がない場合があります。クラス式を使用して、クラスを変数に割り当てることができます。

const UserClass = class {
    //  
}

クラスはモジュールとしてエクスポートできます。デフォルトのエクスポートの例を次に示します。

export default class User {
    //  
}

名前付きエクスポートの例を次に示します。

export class User {
    //  
}

クラスはインスタンスを作成するために使用されます。インスタンスは、クラスのデータとロジックを含むオブジェクトです。







インスタンスは、new：instance = new Class（）演算子を使用して作成されます。



Userクラスのインスタンスを作成する方法は次のとおりです。

const myUser = new User()

2.初期化：コンストラクター（）

コンストラクター（param1、param2、...）は、インスタンスを初期化するクラス内の特別なメソッドです。ここで、インスタンスフィールドの初期値が設定および構成されます。



次の例では、コンストラクターが名前フィールドの初期値を設定します。

class User {
    constructor(name) {
        this.name = name
    }
}

コンストラクターは、this.nameフィールドの初期値を設定するために使用される1つのパラメーターnameを取ります。



コンストラクターのこれは、作成されるインスタンスを指します。



クラスをインスタンス化するために使用される引数は、そのコンストラクターのパラメーターになります。

class User {
    constructor(name) {
        name // 
        this.name = name
    }
}

const user = new User('')

コンストラクター内のnameパラメーターの値は「Pechorin」です。



独自のコンストラクターを定義しない場合、標準のコンストラクターが作成されます。これは、インスタンスに影響を与えない空の関数です。

3.フィールド

クラスフィールドは、特定の情報を含む変数です。フィールドは2つのグループに分けることができます。

1. クラスインスタンスフィールド
2. クラス自体のフィールド（静的）

フィールドには、次の2つのレベルのアクセスもあります。

1. パブリック（パブリック）：フィールドは、クラス内とインスタンスの両方で使用できます
2. プライベート（プライベート）：フィールドはクラス内でのみアクセス可能です

3.1。クラスインスタンスのパブリックフィールド

class User {
    constructor(name) {
        this.name = name
    }
}

this.name = nameという式は、インスタンスフィールド名を作成し、それに初期値を割り当てます。



このフィールドには、プロパティアクセサーを使用してアクセスできます。

const user = new User('')
user.name // 

この場合、nameはUserクラスの外部からアクセスできるため、パブリックフィールドです。



コンストラクター内で暗黙的にフィールドを作成する場合、すべてのフィールドのリストを取得することは困難です。このため、フィールドはコンストラクターから取得する必要があります。



最良の方法は、クラスフィールドを明示的に定義することです。コンストラクターが何をするかは関係ありません。インスタンスには常に同じフィールドのセットがあります。



クラスフィールドを作成するための提案では、クラス内のフィールドを定義できます。さらに、ここでフィールドに初期値を割り当てることができます：

class SomeClass {
    field1
    field2 = ' '

    // ...
}

パブリック名フィールドを定義して、Userクラスのコードを変更しましょう。

class User {
    name

    constructor(name) {
        this.name = name
    }
}

const user = new User('')
user.name // 

これらのパブリックフィールドは非常にわかりやすく、クラスを一目見れば、そのデータの構造を理解できます。



さらに、クラスフィールドは定義時に初期化できます。

class User {
    name = ''

    constructor() {
        //  
    }
}

const user = new User()
user.name // 

オープンフィールドへのアクセスとその変更に制限はありません。コンストラクター、メソッド、およびクラスの外部で、そのようなフィールドを読み取って値を割り当てることができます。

3.2。クラスインスタンスのプライベートフィールド

カプセル化を使用すると、クラスの内部実装の詳細を非表示にできます。カプセル化されたクラスを使用する人は誰でも、クラスの実装の詳細に立ち入ることなく、パブリックインターフェイスに依存します。



これらのクラスは、実装の詳細が変更されたときに簡単に更新できます。



詳細を非表示にする良い方法は、プライベートフィールドを使用することです。このようなフィールドは、それらが属するクラス内でのみ読み取りおよび変更できます。プライベートフィールドはクラス外では利用できません。



フィールドをプライベートにするには、名前の前に＃記号を付けます（例：#myPrivateField）。このようなフィールドを参照するときは、指定されたプレフィックスを常に使用する必要があります。



名前フィールドをプライベートにしましょう：

class User {
    #name

    constructor(name) {
        this.#name = name
    }

    getName() {
        return this.#name
    }
}

const user = new User('')
user.getName() // 
user.#name // SyntaxError

#nameはプライベートフィールドです。Userクラス内でのみアクセスできます。getName（）メソッドがこれを行います。



ただし、Userクラスの外部で#nameにアクセスしようとすると、構文エラーがスローされます。SyntaxError：プライベートフィールド '#name'は、囲んでいるクラスで宣言する必要があります。

3.3。パブリック静的フィールド

クラスでは、クラス自体に属するフィールド、つまり静的フィールドを定義できます。このようなフィールドは、クラスが必要とする情報を格納する定数を作成するために使用されます。



静的フィールドを作成するには、フィールド名の前にstaticキーワードstaticmyStaticFieldを使用します。



新しいタイプフィールドを追加して、ユーザーのタイプ（管理者または通常）を定義しましょう。静的フィールドTYPE_ADMINおよびTYPE_REGULARは、ユーザーのタイプごとの定数です。

class User {
    static TYPE_ADMIN = 'admin'
    static TYPE_REGULAR = 'regular'

    name
    type

    constructor(name, type) {
        this.name = name
        this.type = type
    }
}

const admin = new User(' ', User.TYPE_ADMIN)
admin.type === User.TYPE_ADMIN // true

静的フィールドにアクセスするには、クラス名とプロパティ名を使用します：User.TYPE_ADMINおよびUser.TYPE_REGULAR。

3.4。プライベート静的フィールド

静的フィールドもクラスの内部実装の一部である場合があります。このようなフィールドをカプセル化するには、それらをプライベートにすることができます。



これを行うには、フィールド名の前に＃：static＃myPrivateStaticFiledを付けます。



Userクラスのインスタンスの数を制限するとします。プライベート静的フィールドを作成して、インスタンスの数に関する情報を非表示にすることができます。

class User {
    static #MAX_INSTANCES = 2
    static #instances = 0
}

name

constructor(name) {
    User.#instances++
    if (User.#instances > User.#MAX_INSTANCES) {
        throw new Error('    User')
    }
    this.name = name
}

new User('')
new User('')
new User('') //     User

静的フィールドUser。＃MAX_INSTANCESは、許可されるインスタンスの数を定義し、User。＃Instancesは、作成されるインスタンスの数を定義します。



これらのプライベート静的フィールドは、Userクラス内でのみ使用できます。外界からの何も制約に影響を与えることはできません。これは、カプセル化の利点の1つです。



約 レーン：インスタンスの数を1つに制限すると、シングルトンデザインパターンの興味深い実装が得られます。

4.方法

フィールドにはデータが含まれています。データを変更する機能は、クラスの一部である特別な関数であるメソッドによって提供されます。



JavaScriptは、インスタンスメソッドと静的メソッドの両方をサポートします。

4.1。インスタンスメソッド

クラスのインスタンスのメソッドは、そのデータを変更できます。インスタンスメソッドは、静的メソッドだけでなく他のインスタンスメソッドも呼び出すことができます。



たとえば、ユーザーの名前を返すgetName（）メソッドを定義しましょう。

class User {
    name = ''

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

const user = new User('')
user.getName() // 

クラスメソッドおよびコンストラクターでは、これは作成されるインスタンスを指します。これを使用して、インスタンスデータを取得する：this.field、またはメソッドを呼び出す：this.method（）。



1つの引数を取り、別のメソッドを呼び出す新しいメソッドnameContains（str）を追加しましょう。

class User {
    name

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }

    nameContains(str) {
        return this.getName().includes(str)
    }
}

const user = new User('')
user.nameContains('') // true
user.nameContains('') // false

nameContains（str）は、1つの引数を取るUserクラスのメソッドです。別のインスタンスメソッドgetName（）を呼び出して、ユーザー名を取得します。



メソッドはプライベートにすることもできます。メソッドをプライベートにするには、＃プレフィックスを使用します。



getName（）メソッドをプライベートにしましょう：

class User {
    #name

    constructor(name) {
        this.#name = name
    }

    #getName() {
        return this.#name
    }

    nameContains(str) {
        return this.#getName().includes(str)
    }
}

const user = new User('')
user.nameContains('') // true
user.nameContains('') // false

user.#getName // SyntaxError

#getName（）はプライベートメソッドです。nameContains（str）メソッド内では、次のように呼び出します。＃GetName（）。



プライベートであるため、＃getName（）メソッドをUserクラスの外部で呼び出すことはできません。

4.2。ゲッターとセッター

ゲッターとセッターは、アクセサーまたは計算されたプロパティです。これらはフィールドを模倣するメソッドですが、データの読み取りと書き込みを可能にします。



ゲッターはデータを受信するために使用され、セッターはデータを変更するために使用されます。



名前フィールドに空の文字列が割り当てられないようにするには、プライベート#nameValueフィールドをゲッターとセッターでラップします。

class User {
    #nameValue

    constructor(name) {
        this.name = name
    }

    get name() {
        return this.#nameValue
    }

    set name(name) {
        if (name === '') {
            throw new Error('     ')
        }
        this.#nameValue = name
    }
}

const user = new User('')
user.name //  , 
user.name = '' //  

user.name = '' //      

4.3。静的メソッド

静的メソッドは、クラス自体に属する関数です。それらは、インスタンスではなく、クラスのロジックを定義します。



静的メソッドを作成するには、メソッド名の前にstaticキーワードを使用します：static myStaticMethod（）。



静的メソッドを使用する場合、覚えておくべき2つの簡単なルールがあります。

1. 静的メソッドは静的フィールドにアクセスできます
2. インスタンスフィールドにアクセスできません

指定した名前のユーザーがすでに作成されていることを確認する静的メソッドを作成しましょう。

class User {
    static #takenNames = []

    static isNameTaken(name) {
        return User.#takenNames.includes(name)
    }

    name = ''

    constructor(name) {
        this.name = name
        User.#takenNames.push(name)
    }
}

const user = new User('')

User.isNameTaken('') // true
User.isNameTaken('') // false

isNameTaken（）は、プライベート静的ユーザーを使用する静的メソッドです。＃takenNamesフィールドを使用して、使用された名前を判別します。



静的メソッドはプライベートにすることもできます：static #myPrivateStaticMethod（）。このようなメソッドは、クラス内でのみ呼び出すことができます。

5.継承：拡張

JavaScriptのクラスは、extendsキーワードを使用した継承をサポートします。



式では、クラスChildはParent {}を拡張し、Childクラスは、Parentからコンストラクター、フィールド、およびメソッドを継承します。



親クラスUserを拡張する子クラスContentWriterを作成しましょう。

class User {
    name

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

class ContentWriter extends User {
    posts = []
}

const writer = new ContentWriter('')

writer.name // 
writer.getName() // 
writer.posts // []

ContentWriterは、ユーザーからコンストラクター、getName（）メソッド、および名前フィールドを継承します。ContentWriter自体が新しい投稿フィールドを定義します。



親クラスのプライベートフィールドとメソッドは、子クラスに継承されないことに注意してください。

5.1。親コンストラクター：コンストラクター（）のスーパー（）

子クラスの親クラスのコンストラクターを呼び出すには、子クラスのコンストラクターで使用可能な特別なsuper（）関数を使用します。



ContentWriterコンストラクターが親コンストラクターを呼び出し、postsフィールドを初期化するようにします。

class User {
    name

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

class ContentWriter extends User {
    posts = []

    constructor(name, posts) {
        super(name)
        this.posts = posts
    }
}

const writer = new ContentWriter('', ['  '])
writer.name // 
writer.posts // ['  ']

子クラスContentWriterのsuper（name）は、親クラスコンストラクターUserを呼び出します。



thisキーワードを使用する前に、子コンストラクターでsuper（）が呼び出されることに注意してください。super（）呼び出しは、親コンストラクターをインスタンスに「バインド」します。

class Child extends Parent {
    constructor(value1, value2) {
        //  !
        this.prop2 = value2
        super(value1)
    }
}

5.2。親インスタンス：メソッドのスーパー

子クラス内の親メソッドにアクセスするには、特別なスーパーショートカットを使用します。

class User {
    name

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

class ContentWriter extends User {
    posts = []

    constructor(name, posts) {
        super(name)
        this.posts = posts
    }

    getName() {
        const name = super.getName()
        if (name === '') {
            return ''
        }
        return name
    }
}

const writer = new ContentWriter('', ['  '])
writer.getName() // 

子ContentWriterクラスのgetName（）は、親クラスUserのgetName（）メソッドを呼び出します。



これは、メソッドオーバーライドと呼ばれます。



superは、親クラスの静的メソッドにも使用できることに注意してください。

6.オブジェクトタイプチェック：instanceof

クラス式のオブジェクトinstanceofは、オブジェクトが指定されたクラスのインスタンスであるかどうかを判別します。



例を考えてみましょう：

class User {
    name

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

const user = new User('')
const obj = {}

user instanceof User // true
obj instanceof User // false

instanceof演算子は多態性であり、クラスチェーン全体を調べます。

class User {
    name

    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

class ContentWriter extends User {
    posts = []

    constructor(name, posts) {
        super(name)
        this.posts = posts
    }
}

const writer = new ContentWriter('', ['  '])

writer instanceof ContentWriter // true
writer instanceof User // true

特定のインスタンスクラスを定義する必要がある場合はどうなりますか？コンストラクタープロパティは、これに使用できます。

writer.constructor === ContentWriter // true
writer.constructor === User // false
// 
writer.__proto__ === ContentWriter.prototype // true
writer.__proto__ === User.prototype // false

7.クラスとプロトタイプ

クラス構文は、プロトタイプの継承に対する優れた抽象化であると言わなければなりません。クラスを使用するためにプロトタイプを参照する必要はありません。



ただし、クラスは、プロトタイプの継承に関する単なる上位構造です。すべてのクラスは、コンストラクターが呼び出されたときにインスタンスを作成する関数です。



次の2つの例は同じです。



クラス：

class User {
    constructor(name) {
        this.name = name
    }

    getName() {
        return this.name
    }
}

const user = new User('')

user.getName() // 
user instanceof User // true

プロトタイプ：

function User(name) {
    this.name = name
}

User.prototype.getName = function () {
    return this.name
}

const user = new User('')

user.getName() // 
user instanceof User // true

したがって、クラスを理解するには、プロトタイプの継承に関する十分な知識が必要です。

8.クラス機能の可用性

この記事で紹介するクラス機能は、検討の第3段階でES6仕様と提案に分けられます。

• パブリックインスタンスフィールドとプライベートインスタンスフィールド
• プライベートインスタンスメソッドとアクセサー
• パブリックおよびプライベート静的フィールドとプライベート静的メソッド
• ES6仕様

約 あたり：使用できますかによると、プライベートクラスフィールドのサポートは現在68％です。

9.結論

JavaScriptのクラスは、コンストラクターを使用してインスタンスを初期化し、それらのフィールドとメソッドを定義するために使用されます。staticキーワードを使用して、クラス自体のフィールドとメソッドを定義できます。



継承は、extendsキーワードを使用して実装されます。superキーワードを使用すると、子から親クラスにアクセスできます。



カプセル化を利用するために、すなわち 内部実装の詳細を非表示にし、フィールドとメソッドをプライベートにします。このようなフィールドとメソッドの名前は、＃記号で始まる必要があります。



クラスは現代のJavaScriptに遍在しています。



この記事がお役に立てば幸いです。清聴ありがとうございました。